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>

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

猜你喜欢

转载自www.cnblogs.com/1016391912pm/p/12543722.html