var myVue = new Vue({
el:"#firstVue"
})
js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>
和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue
el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”
的这个标签。
vue这个框架的数据流是单向的,所以数据绑定后的数据流向是从vue实例 ——> DOM文档的。
使用v-bind绑定某个html标签的属性值,<div v-bind:hidden="my_hidden"></div>,可以简写为<div :hidden="my_hidden"></div>
注:html标签内的数据和属性值,都放在data参数内。
事件绑定:<button v-on:click="clickButton">btn</button> 可简写为<button @click="clickButton">btn</button>
var myVue = new Vue({
el:"",
methods:{
clickButton:function(){...}
}
})
表单控件绑定:Vue.js提供给用户的一个语法糖 v-model
,这个语法糖通过两步实现了数据的反向传递,也就是从DOM传送给vue实例数据。
<div id="vv">
<input type="text" v-model="my_data">
<div>{{my_data}}</div>
</div>
var myVue = new Vue({
el:'#vv',
data:{
my_data="test"
}
})
这样当我们在文本框里输入时,div里的文本也会跟着改变。