组建的两个核心点
1.响应式数据绑定 2.组合的视图组件
核心点图
数据---vm视图模型---数据渲染的页面
根据MVVM模式解释双向绑定数据例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>双向绑定数据</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
</head>
<body><!-- 视图模板 --><div id="demo">
<input type="text" v-model="message"/>
<p>{{message}}</p></div><script>
// 数据模型
let data={ message:'Hello World!'
} // 视图模型
var vm=new Vue({ el:'#demo', data:data
}); console.log(vm)</script>
</body>
</html>vue.js入门实例，详细解说
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的实例
var vm = new Vue({
// 数据、模板、挂载元素、方法、生命周期钩子等选项
})
常见的几个：
<strong>data</strong> 类型 Object | Function
<strong>methods</strong> 类型 { [key: string]: Function }
<strong>el</strong> 类型 string | HTMLElement
<strong>template</strong> 类型 string
具体查看API
实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue.js入门实例</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
</head>
<body><!-- 模板 --><div id="demo">
<span v-on:click="evenClick">{{message}}</span></div><script>// 数据
let data={ message:'Hello World!'
}// 视图模型//声明式渲染，只需要挂载选择器将数据渲染到模板
var vm=new Vue({ el:'#demo', data:data, methods:{
evenClick(){
alert('Hello World')
}
}
})</script>
</body>
</html>声明式渲染【如上&& vue常用】 PS 命令式渲染【原生】
声明式渲染 ： 只要关心在哪里（where）做什么（what）无需关心如何实现的（how）
命令式渲染：what +where+how
举例：给数组每个数字乘以2
声明式渲染【也可以如上实例中的举例】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>声明式渲染</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
</head>
<body><script>
var arr=[1,2,3,4,5]; var newArr=arr.map(function(item){ return item*2
}); console.log(newArr)</script>
</body>
</html>命令式渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>命令式渲染</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
</head>
<body><script>
var arr=[1,2,3,4,5]; var newArr=[]; for(var i=0;i<arr.length;i++){
newArr.push(arr[i]*2)
}; console.log(newArr)</script></body></html>内置指令
内置指令
模板
模板：【三类】
1.html模板：基于DOM模板，模板是可解析的有效的Html
2.template字符串模板：模板将会替换挂载的元素，挂载元素的内容都将被忽略 // 根节点只有一个 //将html结构写在一对script标签中，这只为type="x-template"
3.模板---render函数
三个模板举例：
html模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
</head>
<body>
<div id="demo"><div v-html="html"></div></div><script>let obj={ html:"<div>Hello World</div>"}var vm=new Vue({ el:"#demo", data:obj
}); </script>
</body>
</html>template字符串模板【两种方式】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>template模板1</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body><div id="demo"><div>Hello</div></div><script>var str="<div>Hello World</div>";var vm=new Vue({
el:"#demo",
template:str
});// 页面渲染结果是Hello World 而不是Hello,原因是template的权重较高//var str ="只能包含一个div,或者div里面嵌套div等其他元素，不能并列" //在es6语法中，可以写成var str=` `;【该符号在键盘上1的左边切换到英文模式】这种方式的好处是可以换行 </script></body></html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>template2模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body><div id="demo"><div>Hello</div></div><script type="x-template" id="temp"><div>Hello World</div></script><script>
var vm=new Vue({
el:"#demo",
template:"#temp"}); //引入模板引擎，只能在本页面复用</script></body></html>模板---render函数
render 类型 function
render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode
createElement(标签名,[数据对象],子元素)
数据对象属性：
class:{} 绑定class,和v-blind:class 一样的API
style:{} 绑定class,和v-blind:style 一样的API
attrs:{} 添加行间属性
domProps:{} DOM元素属性
on:{} 绑定事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>template2模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script><style type="text/css">.yellow{ background-color: yellow
}</style></head><body><div id="demo"></div><script>
var vm=new Vue({
el:"#demo",
render(createElement){ var obj=createElement( "ul",
{ class:{
yellow:true
},
style:{
fontSize:"50px"
},
attrs:{
type:"text",
name:"email"
}
},
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
console.log(obj) return obj;
}
}); </script>
</body>
</html>总结：
1.渐进式框架Vue
2.vue中两个核心点
3.虚拟DOM
4.MVVM模式
5.Vue实例
6.声明式渲染
7.指令
8.模板
作者：Searchen
链接：https://www.jianshu.com/p/19852ba8e974
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦