vue 基础

Vue.js 是什么？

Vue (读音 /vju ː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 实例

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

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

数据与方法

当一个 Vue 实例被创建时，它就向 Vue 的相应系统中加入了 data 对象，当 data 对象中的属性值发生改变时，视图也会发生“响应”，匹配更新的 data 对象属性值。

var vm = new Vue({
	el:"#app",
    data:{
    	message:'Hello Vue!',
        title:'this is title'
    }
})

当在浏览器控制台输入 vm.message = "Hello World" 时，视图也会被重新渲染。所以 data 中存在的属性是响应式的。
不过例外的是，如果使用的是 Object.freeze() 这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
	foo:'bar'
}
Object.freeze(obj)
new Vue({
	el:'#app',
    data:obj
})

Vue 生命周期

1. 生命周期钩子
   有四个：created,mounted,updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例

var vm = new Vue({
	data:{
    	a:1
    },
    created:function(){
    	// this指向vm实例
        console.log('a is:'+this.a);
    }
})

2. 生命周期图示
   

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。（当然后期可以直接写渲染函数 render 来代替）

插值

1. 普通文本插值
   数据绑定最常见的形式就是使用双大括号的文本插值。

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

当然这里的指令是响应式的，你可以用 v-once 来让插值处的内容不被更新。

<span v-once>这个将不会被改变：{{ msg }}</span>

注意：Vue 也支持完全的 javascript 表达式

{{ number+1 }}
{{ ok ? 'YES' : 'NO'}}
<div v-bind:id="'list-' + id"></div>

2. HTML 插值
   双大括号只会将数据解释为普通文本，而无法解释为 HTML 代码，如果想插入 HTML 代码的值，需要使用 v-html 指令。

<p>用双大括号：{{ rawHtml }}</p>
<p>用v-html指令：<span v-html="rawHtml"></span></p>
=============
rawHtml => <span style="color:red">这里是红色</span>

3. 特性
   双大括号语法不能作用在 HTML 的特性上，这是就需要使用 v-bind 指令。

<button v-bind:disabled="isDisabled">Button</button>

这里如果 isDisabled 为 true 则会显示 Button，否则不显示，当 isDisabled=null 时 button 则没有 disabled 特性

指令

指令是带有 v- 前缀的一些特殊特性，指令一般作用于当个 javascript 表达式(除 v-for 例外)，指令的职责是当表达式的值改变时，响应式的作用于 DOM。

<p v-if="seen">现在你可以看到我</p>

1. 参数
   一些指令能够接收一个"参数",在指令 名称后以 : 表示，例如 v-bind 可以用于响应式的更新 HTML 特性.

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

这里的 href 是参数,v-bind 将 href 特性与表达式 url 绑定.

2. 修饰符
   修饰符是以半角符号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

3. 缩写

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">
  {{ message.split('').reverse().join('') }}
</div>

举个栗子

<div id="app">
	<p>原始Message:"{{message}}"</p>
	<p>反转后的Message:"{{reversedMessage }}"</p>
</div>

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

计算属性与方法、侦听属性的比较

1. 计算属性 vs 方法

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

其实两者执行结果是一样的。但是不同的是，method 在每次触发时都会被调用执行。而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

2. 计算属性 vs 侦听属性
   ++ 侦听属性 ++:Vue 提供的一种来观察和响应 Vue 实例上数据变动的一种属性。watch
   其实侦听属性相比较于计算属性是重复的，如下栗子:
   侦听属性：

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

var vm = 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
        }
    }
})

计算属性：

varr vm = new Vue({
	el:'#demo',
    data:{
    	firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
    	fullName:function(){
        	return this.firstName+' '+this.lastNAme
        }
    }
})

注：计算属性默认只有 getter，当如果要 setter 时则需要如下操作

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这里就不再举栗了。

条件渲染和列表渲染

条件渲染 - v-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

列表渲染 - v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以直接使用键值的形式来直接获取属性

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

第三个参数 index 为索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

数组更新

• 变异方法

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

• 替换数组
  变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

• 注意事项
  由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
  1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  2.当你修改数组的长度时，例如：vm.items.length = newLength

  举个栗子：

  var vm = new Vue({
  data: {
  	items: ['a', 'b', 'c']
  }
  

})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
```