Vue从零开始总结

let变量

const常量

模板：const app=new Vue({

el:'选择器'//挂载，作用范围，也是事件的管理范围，决定了它管理哪个dom

也可以这么写el:document.querySelector('选择器')

data:{//里面存取数据，对数据进行定义和赋值。多用于数据绑定，以{{item}}的方式来调用

item:0,

counter:0,

movies:['星际','海贼王','妖尾']//数组以这种方式

},

methods:{
add:function (){
   this.counter++;
}

})

当我们需要遍历指定数据的内容的时候，需要使用v-for="变量名 in 对象名",在引用的时候就用{{变量名}}

如：<li v-for="item in movies">{{item}}</li>

当我们需要一些事件监听的时候，需要使用v-on:事件来进行操作

这里我们可以给它加一个按钮用于计数，如：

<button v-on:click="counter++"></button>

这样每次点击counter都会加一

如果需求变多，就不能在行内写了

这时候就需要在方法里写函数

就需要在app里的methods中定义函数

（methods是一种属性）

add:function (){
   this.counter++;
}

或者你也可以写成add(){

 this.counter++;

}

值得注意的是，我们这里的counter不是全局变量，所以得用this来指代当前位置

那又有问题出现了，this指代当前对象，这里应该写成this.data.counter++才对啊

这涉及到了代理问题，this.counter代替了this.data.counter

这时，按钮就变为了<button v-on:click="add"></button>

官方还给出了语法糖用于简写

也就是这样<button @click="add"></button>
mvvm，是model view view-model的缩写

model也就是Vue对象里面的内容

view就是给用户看的内容

view-model就是Vue这个对象，可以把它看成一个服务器，负责解析和回调

我们的数据不一定非得在data里面定义

也可以拿到外面来

比如:const test={

counter:0

}

data:test

这样写也可以，也是代理的一种应用