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无法做到的