学习资料 来自*小凡!
vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁。
第一课:
不支持IE8.
1、声明式渲染:
el元素的简称 element ; el:元素名字
data放数据;

2、双向绑定:
用到一个指令 v-model ; 指定到一个数据上,这个数据与页面显示就双向绑定了。

这里写错了 ,不能加等号!!!

这样P标签 就可以随这个input的改变而改变。
3、列表渲染
v-for 循环数据 读取数据 渲染到标签;
v-for=" xxx in dataXXX" {{}}
注意数据的写法data:{里面是数据的命名空间:[里面是json数据 一条一条]}

4、处理函数:
new Vue({
el:"#box",
data:{
msg:'111',
},
methods:{
fnName:funxtion(){
alert(1);
}
}
})

5、综合案例

1、外面是 vue的作用范围 盒子。
newTodo是 data中的一个子的数据模型,todos是另一个数据模型。
input绑定到newTodo上;keyup.enter按enter世间触发 addtodo方法;
定义一个变量接受当前的input值:this.newTodo;
this.todo.push({text:当前值});
2、$index当前事件的下标。
总结:data就是建好数据,methods调用数据。html里用v-指令