1.安装vue.js
1.网上下载
2.npm install vue(默认下载2.0版本)
优点:相比angular,vue源码比较轻,所以它是轻量级的,它比angular性能更好点
缺点:没有angular功能齐全,比如,angular封装ajax($http)
2.在项目中引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
</html>
3.new Vue()
往Vue构造器传一个对象,这个对象有el属性和data属性
el:节点 相当于angular控制器,如果el:'#demo',就控制所有标签上带有id="demo"的范围
data:你要往html结构(视图)绑定的数据
var app = new Vue({
el:'#demo',//element 元素
//$scope
data:{
name:'xie'
}
})
4.表达式{{}}
表达式支持渲染各种类型的数据,里面支持算术运算,字符串拼接和三元表达式
5.绑定函数
在构造器的对象里面增加一个methods属性,传对象进去
var app = new Vue({
el:'#demo',//element 元素
//$scope
data:{
name:'xie',
obj:{
a:'yi',
b:'yao'
},
arr:['a','b','c'],
number:8,
bool:false
},
methods:{
test:function(){
console.log('test')
}
}
})
6.双向数据绑定
<input v-model="name">
<p>{{name}}</p>
来自 <https://github.com/vickytaozi/mvvn-/issues/10>