vue笔记
Posted HelloHello233
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue笔记相关的知识，希望对你有一定的参考价值。
new Vue({ el: \'#app-5\', data: { message: \'Hello Vue.js!\' }, methods: { reverseMessage: function () { this.message = this.message.split(\'\').reverse().join(\'\') } } })
方法内的this指向vue实例。而且组件中上下文与vue实例是相互关联的，data和methods对象里的属性会被添加到vue实例上了：
常见指令
<div id="app">{{ message }}</div> ：文本输出 <span v-bind:title="message"> ：message单向绑定到title属性上（或其他任意名字的自定义属性） <p v-if="seen">：移除或插入元素（和ng-if一样，不保留元素的状态） <li v-for="todo in todos">{{ todo.text }}</li> ：for循环 <button v-on:click="reverseMessage">绑定点击事件</button> <input v-model="message">：双向绑定
其中bind和on有以下的简写形式
<a @click="doSomething"></a> <a :href="url"></a>
一个实例对象类似ng中的scope对象，也有一样的watch方法。
vm.$watch(\'a\', function (newValue, oldValue) { // 此回调函数将在 `vm.a` 改变后调用 })
但很不同的是，ng中允许动态添加属性，而往vue上动态添加属性，则没有双向绑定的性质。vue实例创建时就设置好了对应属性的动态性，后续再添加进去的没有这个性质，所以后续可能用到的属性，就先放一个空值上去占位
data: { newTodoText: \'\', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }
通过vm操作的属性，实际是操作data对象（如果字段字段匹配的话）：
// data 对象 var data = { a: 1 } // 此对象将会添加到 Vue 实例上 var vm = new Vue({ data: data }) vm.a = 2 data.a // => 2 // ... 反之亦然 data.a = 3 vm.a // => 3
可见，只要把data抽出来，可实现两个组件共用数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>123</title> <script src="https://unpkg.com/vue"></script> <body> <div id="c1"> {{msg}} <br> <input type="text" v-model="msg"> </div> <div id="c2">{{msg}}</div> <script> var common = { msg:"", }; new Vue({ el: \'#c1\', data: common }); new Vue({ el: \'#c2\', data: common }); </script> </body> </html>
模板
<span>Message: {{ msg }}</span> <span v-once>这里的值永远不会改变：{{ msg }}</span>
前者一直存在动态绑定的性质，而后者仅仅绑定一次，以节省消耗，这种思路对应ng中一个库bindonce，也是实现类似的功能。
和ng一样，html中的各种表达式都是可以正确执行的，都无法执行流程控制语句
{{ ok ? \'YES\' : \'NO\' }} {{ message.split(\'\').reverse().join(\'\') }} <div v-bind:id="\'list-\' + id"></div>
computed和method
如何时刻保持两个数据的关联？
1.使用表达式 ，如{{x*2+1}}
2.使用computed，可以改善第一种方法中导致html页面逻辑混乱的问题
3.通过函数调用，将表达式作为返回值返回。
2和3的区别是：
3始终会导致表达式执行，不管表达式的值有没有发生变化。执行的时机是重新渲染的时候
2仅在相关联的数据被修改时发生变化时才会被调用（别人通知他，他才去执行），否则读取上次缓存的值，而不去执行表达式
4.使用watch，watch有两种写法
watch: { firstName: function (val) { this.fullName = val + \' \' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + \' \' + val } } vm.$watch(\'a\', function (newValue, oldValue) { // 此回调函数将在 `vm.a` 改变后调用 })
watch和computed相比
watch只能监视一个值的变化，而computed可以监视多个值的变化，只要其中一个发生变化（有收到通知），表达式的结果就会不同；
watch等待某个值发生变化后，执行某些异步操作，然后再修改数据。这是computed无法做到的
以上是关于vue笔记的主要内容，如果未能解决你的问题，请参考以下文章