1.vue实例的属性data是函数,method是对象;专业词汇:data就是vue的状态; 2.v-if显示隐藏组件,是隐藏了dom; 3.v-show显示隐藏组件,是改变了display属性; 4.不停往list中添加数据的时候,dom会不断的增加,v-for会循环遍历data里的数据,把遍历到的数据赋给item; vue的核心思想:数据驱动,我们增加dom的时候不是像jq那样去增加dom数据节点, 而是通过数据增加,来反向驱动dom的增加,v-for就是dom和数据之间的桥梁
<div v-for="item in list">{{item}}</div>
5.vue的双向绑定: vue的数据流是单向的,状态(data)的改变触发dom的变化,如点击按钮,改变data,引起dom发生改变,这就是单向数据流;如果我们对界面进行改变,状态是不会变的,我们改变dom的时候,状态是不会变的 如下输入框输入内容时,界面上输入框的值变成了输入的内容,但是这个值是组件来维护的, vue的状态value并没有变化,这就是单向数据流:我们改变dom的时候,状态是不会变的, 但是反过来,我们改变状态,dom是会发生变化的,控件是会发生变化的,如把vue中的状态value改成123,界面上输入框内容会显示123
<input :value="value" @input="onInput" />
new Vue({
data(){
return {
value:""
}
}
methods:{
onInput(e){
console.log(e,this.value)
}
}
})
6.如果我们想改变界面的同时,也改变状态,那么在监听input事件的方法中 改变状态为输入的值即可,即this.value = e.target.value; 这样就实现了双向绑定 7.vue中为我们提供了语法糖v-model来为我们解决了双向绑定的问题
<input v-model="value" @input="onInput" />
new Vue({
data(){
return {
value:""
}
}
methods:{
onInput(e){
console.log(e,this.value)
}
}
})
8.数据驱动和组件化是vue最重要的两个概念
