创建实例：

var vm = new Vue({

})

    var data = { a : 1}
    var vm = new Vue({
      data:data
    })

    console.log(vm.a == data.a)

    vm.a = 2
    console.log(data.a) //2
    反之相同

vue中数据是响应式的，一旦数据改变，视图将会产生相应的变化
只有当实例被创建时 data 中存在的属性才是响应式的，添加一个新的属性改动将不会触发任何视图的更新

注意 Object.freeze(obj) 可以阻止修改现有属性

---

vue实例有很多属性和方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true 挂载

// $watch 是一个实例方法 监听
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
})

---

生命周期钩子
四对：beforeCreate、created、
beforeMount 、mounted
beforeUpdate、 updated
beforeDestory、destoryed

生命周期.png

---

模板语法

插值

1.文本{{message}} v-once 一次性插值
2.原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

image.png

span的内容将会被替换成属性值rawHtml
3.特性，Mustache 不能用在HTML特性上，用v-bind来绑定
4.支持js表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

只能包含单个表达式，下面两种不会生效

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

---

指令 v-

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>

缩写

v-bind ：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on @

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

---

计算属性 computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

模板内表达式获取翻转字符串
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

如果需要多次使用到这个翻转字符串，就会显得很麻烦
所以计算属性computed 应运而生

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>

  <script>
    var vm = new Vue({
      el:'#example',
      data:{
        message:'hello'
      },
      computed:{
        //计算属性的getter,返回相应的值
        reversedMessage: function(){
          return this.message.split('').reverse().join('')
        }
      }
    })

同样的效果也可以通过在methods里面设置一个函数来实现

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

效果完全相同，但是又有什么不一样的地方呢？？

计算属性是基于他们的依赖进行缓存的，只有当依赖改变时他们才会重新求值，只要message不改变，多次访问reverseMessage会立即返回之前计算结果。而每当触发重新渲染时，调用方法将总会再执行函数

---

计算属性 computed和侦听属性watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性

与其滥用侦听属性，不如好好利用计算属性

<div id="demo">{{fullName}}</div>

var vm1 = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }

这里就运用了侦听器属性watch来侦听firstName和lastName，这两个如果有变化立刻处理重新渲染页面，但是我们发现，监听的函数很相似，若是有多个变量，那么侦听器将会显得十分冗杂，看看运用computed效果如何？

  <div id="demo">{{fullName1}}</div>

   computed:{
        fullName1: function(){
          return this.firstName + '' + this.lastName
        }
      }

image.png

效果很不错，因此尽量用computed属性

添加set

 var vm1 = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      computed: {
        fullName1: {
          get: function () {
            return this.firstName + ' ' + this.lastName
          },
          set: function (newValue) {
            console.log('我被调用了')
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }

这个时候修改fullname firstname, lastname 也会相应更新

image.png

---

侦听器 watch 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。