vue.js 小结1

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里的文本也会跟着改变。