Vue学习笔记2

组件化应用构建

<div id="app">
    <ol>
      <todo-item 
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id">
      </todo-item>
    </ol>
  </div>
 Vue.component('todo-item',{
      props:['todo'],
      template:'<li>{{todo.text}}</li>'
    })
    var app2=new Vue({
      el:'#app',
      data:{
        groceryList:[
          {id:0,text:'蔬菜'},
          {id:1,text:'奶酪'},
          {id:2,text:'随便其它什么人吃的东西'}
        ]
      }
    })

---

Vue实例

创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
 // 选项
})

当创建一个 Vue 实例时，可以传入一个选项对象

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var data={a:2}
 var vm=new Vue({
   data:data
 })
 console.log(data.a===vm.a)//true
 vm.a=5
 console.log(data.a)//5

只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果添加一个新的属性，对这个属性的改动将不会触发任何视图的更新。

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
当使用object.freeze()将选项对象冻结的时候，这会阻止修改现有的属性。也意味着响应系统无法再追踪变化。

<div id="app">
    <p>{{foo}}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>
  
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与自己定义的属性区分开来。

实例生命周期钩子

钩子在实例生命周期的不同阶段被调用。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数

生命周期图示

---

模板语法

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新0。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写

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

v-on 缩写

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

---

计算属性和侦听器

计算属性

 <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>截取字符串:"{{sliceMessage}}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello Vue.js'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    sliceMessage: function () {
      return this.message.slice(1,8)
    }
  }
})

• 计算属性缓存 vs 方法

可以通过在表达式中调用方法来达到跟计算属性同样的效果。

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

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

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

 <div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar', 
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})