1.实例:
var vm = new Vue({ el: '#example', data: { a:1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) vm.a === data.a // -> true vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch 是一个实例方法 vm.$watch('a', function (newVal, oldVal) { // 这个回调将在 `vm.a` 改变后调用 })
2.数据绑定:
1)文本
<span>Message: {{ msg }}</span> //加载时会出现{{}},不推荐 <div>{{{ raw_html }}}</div> //raw_html是html时 <p v-html="msg"></p> <p v-text="msg"></p> <span v-once>这个将不会改变: {{ msg }}</span>
2)指令
<button v-bind:disabled="isButtonDisabled">Button</button> <p v-if="seen">现在你看到我了</p> <a v-bind:href="url">...</a> <a :href="url">...</a>//缩写 <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a> //缩写 <form v-on:submit.prevent="onSubmit">...</form>
3.方法:
computed
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
结果:
Original message: "Hello"
Computed reversed message: "olleH"
vm.reversedMessage
的值始终取决于 vm.message
的值,当 vm.message
发生改变时,所有依赖 vm.reversedMessage
的绑定也会更新。
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
和watch区别:https://blog.csdn.net/smartdt/article/details/75557369