[Vue2.0 guidence notes] 基础部分语法

1 实例

1. 构造器

   var vm = new Vue({
   
   })
   
   var MyComponent = Vue.extend({
   	
   })
   var myComponentInstance = new MyComponent()
   

   (1) 扩展Vue构造器，用预定义选项创建可复用的组件构造器

   (2) 实例化Vue对象时，需要传入选项对象，可以包括数据、模板、挂载元素、方法、生命周期钩子等选项

2. 属性和方法

   (1) 每个Vue实例都会代理其data对象里所有的属性

   (2) Vue实例暴露了一些实例属性与方法，其前缀为$，如vm.$data，vm.$el

3. 实例生命周期

   (1) 生命周期钩子

   beforeCreate, 组件实例刚被创建，组件属性(如data属性)计算之前

   created, 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在

   beforeMount, 模板编译/挂载之前

   mounted, 模板编译/挂载之后(不保证组件已在DOM中)

   beforeUpdate, 组件更新之前

   updated, 组件更新之后

   beforeDestroy, 组件销毁前调用

   destroyed, 组件销毁后调用

   (2) created

   var vm = new Vue({
   	data: {
   		a: 1
   	},
   	created: function() {	//在created周期内执行该方法
   		console.log('a is: ' + this.a)
   	}
   })
   

2 模板语法

1. 插值

   (1) 文本

   <span>Message:{{msg}}</span>	
   <span v-once>This will never change:{{msg}}</span>
   

   1) 数据绑定最常用的形式时使用"Mustache"语法{{}}的文本插值

   2) 插值处内容随msg变化而变化

   3) 使用v-once执行可实现一次性地插值

   (2) 纯HTML：忽略数据绑定，将视为纯文本

   <div v-html="rawHtml">
       <p>Message:{{msg}}</p>
   </div>
   

   (3) 属性”插值“——v-bind绑定

   <div v-bind:id="dynamicId"></div>
   

   Mustache不能再HTML元素属性中使用，应使用v-bind指令

   (4) 可在插值中使用JavaScript表达式，单只能是单个表达式，不能是语句

   //valid
   {{number + 1}}
   {{ok ? 'YES' : 'NO'}}
   //invalid
   {{var a = 1}}
   {{if(ok) {return message}}}
   

   (5) JavaScript函数用作过滤器

   {{message|filterA|filterB('arg1',arg2)}} 
   //过滤器添加在Mustache插值尾部，可以串联，可以接受参数
   

   new Vue({
     	//...
     	filters: {
     		filterA: function(value) {	//过滤器函数接受表达式的值作为第一个参数
     			if(!value) return''
     			value = value.toString()
     			return value.charAt(0).toUpperCase() + value.slice(1)
     		},
           filterB: funciton(value, arg1, arg2) {
             
           }
      }
   })
   

   1) 过滤器只能在Mustache绑定中使用，且被添加在Mustache插值的尾部

   2) 过滤器函数接受表达式的值作为第一个参数

   3) 过滤器可以串联

   4) 过滤器可以接受参数

2. 指令

   (1) v-前缀，指令属性得预期值是单一Javascript表达式，目的是当表达式改变时相应地改变DOM

   (2) 指令接受一个参数，如<a v-bind:href="url"></a>

3. 缩写

   (1) v-bind缩写为:

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

   (2) v-on缩写为@

   <a v-on:click="doSomething"></a>
   <a @click="doSomething"></a>
   

3 计算属性

1. 在模板中绑定表达式较为便利，但太多的逻辑会让模板过重且难以维护，对于复杂的逻辑应使用计算属性computed

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

var vm = new Vue({
    el:"#example-1",
    data:{
        message: "Hello"
    },
    computed:{	//定义方法reversedMessage，放在Vue实例的computed属性中
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})

2. 计算属性与methods

   (1) 计算属性基于它的依赖缓存。比如，上例中message不改变，多次访问reversedMessage计算属性会返回之前的计算结果，而不必再次执行函数

   (2) 每当重新渲染时，methods调用总会重新执行函数

   (3) 不适用computed计算属性的例子

   computed: {
   	now: function() {
   		return Date.now()
   	}
   }
   

3. 计算属性与Watched Property

   (1) $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
   		}
   	}
   })
   

   (2) 计算属性

   var vm = new Vue({
       el:"#example-2",
       data:{
           firstName: 'Nick',
           lastName: 'Young',
       },
       computed:{
           fullName: function() {
               return this.firstName + ' ' + this.lastName
           }
       }
   }
   

4. 计算getter与setter

   (1) 计算属性默认只有getter，但可以提供setter

   (2) getter与setter应分别命名为get和set

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

   //运行时在console输入，会调用fullName的setter改变firstName和lastName
   vm.fullName="Nick Young"
   

4 Class与Style的v-bind绑定

1. v-bind的一般语法及简写

   <p v-bind:class="redText">{{warning}}</p>
   

   <p :class="redText">{{warning}}</p>
   

2. 数据绑定的常见需求，是操作element的class列表及其style内联样式。v-bind用于class和style时，表达式的结果可以是字符串、对象或数组

3. 绑定HTML class

   (1) 对象语法：class直接绑定对象

   <div v-bind:class="{active: isActive}"></div>
   

   • 可在对象中传入多个属性来动态切换多个class
   • v-bind:class可与普通的class属性共存

   <div class="static" v-bind:class="{active:isActive, 'text-danger':hasError}"></div>
   

   data: {
   	isActive: true,
   	hasError: false
   }
   

   渲染为

   <div class="static active"></div>
   

   (2) class绑定数据里的对象

   <div v-bind:class="classObj"></div>
   <script>
       data: {
           classObj: {
               active:true,
               'text-danger': false
           }
       }
   </script>
   

   (3) class绑定返回对象的计算属性

   <div v-bind:class="classObj"></div>
   <script>
       data: {
          isAcitve:true,
          error:null
       },
       computed: {
           classObj: function() {
               active: this.isActive && !this.error,
               'text-danger': this.error && this.error.type === 'fatal'
           }
       }
   </script>
   

   (4) 数组语法：将数组传给class

   <div v-bind:class="[activeClass, errorClass]">
   <script>
       data: {
   	activeClass: 'active',
   	errorClass: 'text-danger'
   }
   </script>
   

4. 绑定内联样式

   (1) 对象语法

   <div v-bind:style="styleObject"></div>
   <script>
       data: {
           styleObject: {
               Color: 'red',
           	fontSize: '30px'
           }
       }
   </script>
   

   将JavaScript对象传入style，CSS属性名可以用驼峰式或短横分割命名

   (2) 数组语法：将多个样式对象应用到一个元素上

5 条件渲染

1. v-if

   <h1 v-if="ok">Yes</h1>
   <h1 v-else>No</h1>
   <script>
       data:{
           "ok": true		//No被删除，显示Yes，
           //"ok": false	//Yes被删除，显示No
       }
   </script>
   

2. template v-if

   想切换多个元素时，把<template>元素当作包装元素，对其使用v-if

   <template v-if="ok">
   	<h1>Title</h1>
   	<p>Hello Vue</p>
   </template>
   <script>
   	data:{
   		"ok":true
   	}
   </script>
   

3. v-else

4. v-show

   (1) 用法与v-if基本一致，支持v-else

   (2) v-show不支持<template>语法

   (3) 使用v-show的元素始终渲染并保持在DOM中，通过切换元素的CSS属性display让其show/hide

5. v-show与v-if

   (1) v-if是真实的条件渲染，切换时会销毁或创建条件块内的事件监听器和子组件。v-show的条件块始终保持在DOM中，只改变其display property

   (2) v-if只在第一次条件为真时开始局部编译

   (3) 频繁切换使用v-show较好，运行时条件不变使用v-if较好

6 列表渲染

1. v-for

   (1) item in array

   <ul id="demo">
       <li v-for="item in items">
           {{item.message}}
       </li>
   </ul>
   <script>
       var vm = new Vue({
           el: #demo,
           data: {
   			items: [
           		{message: "foo"},
                   {message: "Bar"}
           	]
           }
       })
   </script>
   

   (2) (item, index) in items：同时获得数组元素的数据和索引

   <ul id="demo">
       <li v-for="(item, index) in items">
           {{index}}-{{item.message}}
       </li>
   </ul>
   

   (3) 可使用of代替in

2. Template v-for

   <template v-for="item in items">
   	<p>name: {{item.name}} </p> 
       <p>size: {{item.size}} </p>  
       <p>weight: {{item.weight}}</p>
   </template>
   <script>
       data: {
           items: [
               {name:"fido", size:20, weight:30},
               {name:"bobby", size:30, weight:20}
           ]
       }
   </script>
   

3. 对象迭代v-for

   (1) value in object

   (2) (value, key) in object

   (3) (value, key, index) in object

   参数名字可更改，但顺序不可变，即(值，键，索引)

   <ul id="example-6">
   	<li v-for="(data,key,index) in temperatures">{{key}} : {{data}} : {{index}}</li>
   </ul>
   <script>
       data: {
           temperatures: {
               indoor: 25,
               outdoor: 10,
               water: 70
           }
       }
   </script>
   

4. 整数迭代v-for

   <div id="test">
   	<span v-for="n in 10">{{n}}</span>
   </div>
   

5. 组件和v-for

6. key（do not understand）

   <div v-for="item in items" v-bind:key="item.id">
   </div>
   

   为每项提供一个唯一的key属性，理想的key值时每项的都有唯一的id

7. 数组更新检测

   (1) 变异方法：改变调用方法的原始数组

   数组的变异方法也会触发视图更新：push, pop, shift, unshift, splice, sort, reverse

   methods:{
       addItem: function() {
           this.items.push({id:'102', size:3})
       }
   }
   

   (2) 重塑数组：非变异方法，返回一个新数组

   非变异方法：filter, concat, slice

   (3) 直接根据索引修改数组元素，Vue无法检测

   vm.items[indexOfItem] = newValue
   

   可改用以下方式修改某索引上元素，同时触发状态更新

   Vue.set(example1.items, indexOfItem, newValue)	//Vue.set
   
   example1.items.splice(indexOfItem, 1, newValue)	//Array.prototype.splice
   

   特别地，数组元素为对象时，直接根据索引修改数组元素的某属性，能触发状态更新

   data:{
       items:[
           {id:'100', size:1},
           {id:'101', size:2}
       ]
   },
   methods: {
       setSize: function(index, size) {
           this.items[index].size = size
       }
   }
   

8. 显示过滤/排序结果

   显示一个数组的过滤副本，而不改变原始数组时，可创建返回过滤数组的计算属性或方法

   <ol id="test">
       <li v-for="item in sortedItems">{{item}}</li>
   </ol>
   <script>
       data: {
           items: [22,15,30]
       },
       computed: {
           sortedItems: function() {
               return this.items.sort()
           }
       }
   </script>
   

7 事件处理器

1. 监听事件

   使用v-on监听DOM事件

   <button @click="counter += 1">add 1</button>
   <p>This button was clicked {{counter}} times</p>
   <script>
   	//...
   	data: {
   		counter: 0
   	}
   </script>
   

2. 方法事件处理器

   v-on可接受一个定义的方法，可通过变量event获取事件对象

   <button @click="greet">Greet</button>
   <script>
   	methods:{
   		greet: function(event) {
   			console.log(event.target.tagName)
   		}
   	}
   </script>
   

3. 内联处理器方法

   (1) 使用内联JavaScript语句处理事件

   <button @click="say('hi')">Say hi</button>
   <script>
   	methods: {
   		say: function(msg) {
   			alert(msg)
   		}
   	}
   </script>
   

   (2) 可通过变量$event将原生DOM事件对象传入

   <button @click="warn('No permission', $event)">Submit</button>
   <script>
   	methods: {
   		warn: function(msg, event){
   			//使用方法事件处理器则无需手动传入event
   		}
   	}
   </script>
   

4. 事件修饰符

   (1) event.preventDefault()：阻止元素的默认行为，如阻止Submit button对表单的提交

   ​ event.stopPropagation()：中止事件的传播，阻止它被分派到其他Document节点

   (2) v-on的时间修饰符

   ​ .stop, .prevent, .capture, .self

5. 按键修饰符

   (1) 监听键盘事件时监测常见的键值，可添加键盘修饰符

   <input v-on:keyup.13="submit">
   <!-- 当keyCode是13时，调用vm.submit() -->
   

   (2) 常用按键的别名

   <input @keyup.enter="submit>"
   

   enter, tab, delete(包括delete和backspace), esc, space, up, down, left, right

   (3) 通过全局config.keyCodes对象自定义按键修饰符别名

   <input @keyup.f1="submit">
   <script>
   	Vue.config.keyCodes.f1 = 112
   </script>
   

8 表单控件绑定

1. 基础用法

   使用v-model指令在表单控件元素上创建双向数据绑定

   (1) 文本：message将随输入文本实时改变

   <input v-model="message" placeholder="edit me">
   <p>Message: {{message}}</p>
   

   (2) 多行文本

   <textarea v-model="message"></textarea>
   <br>
   <span>Message: </span>
   <p style="white-space:pre">{{message}}</p>
   

   在<textarea></textarea>使用Mustache插值不会生效， 应用v-model代替

   (3) 复选框 (checkbox)

   1) 单个勾选框

   <input type="checkobox" id="checkbox" v-model="checked">
   <label for="checkbox">{{checked}}</label>
   

   2) 多个勾选框，绑定到同一个数组

   <input type="checkbox" id="jack" value="Jack" v-model="checked">
   <label for="jack">Jack</label>
   <input type="checkbox" id="rose" value="Rose" v-model="checked">
   <label for="rose">Rose</label>
   <br>
   <span>Checkd names:{{checked}}</span>
   <script>
   	data: {
   		checked: []
   	}
   </script>
   

   (4) 单选按钮 (radio)

   <input type="radio" id="jack" value="Jack" v-model="picked">
   <label for="jack">Jack</label>
   <br>
   <input type="radio" id="rose" value="Rose" v-model="picked">
   <label for="rose">Rose</label>
   <br>
   <span>Checkd names:{{picked}}</span>
   

   (5) 选择列表

   1) 单选列表

   <select v-model="selected">
   	<option>A</option>  
   	<option>B</option>  
   	<option>C</option>
   </select>
   <span>Selected: {{ selected }}</span>
   

   2) 多选列表：绑定到一个数组

   <select v-model="selected" multiple>	<!--使用multiple属性创建多选列表-->
   	<option>A</option>  
   	<option>B</option>  
   	<option>C</option>
   </select>
   <span>Selected: {{ selected }}</span>
   

2. 绑定value

   (1) 用v-bind绑定value到Vue实例的一个动态属性上，属性值可以不是字符串

   (2) 例子

   <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
   <!--选中时，vm.toggle === vm.a
   	没选中时，vm.toggle === vm.b-->
   

3. 修饰符

   (1) .lazy

   <input v-model.lazy="msg">
   

   默认下，v-model在input事件中同步输入框的值与数据，添加.lazy修饰符使其变为在change事件中同步

   (2) .number

   <input v-model.number="age" type="number">
   

   自动将用户的输入值转为Number类型，若原值转换结果为NaN，则返回原值

   (3) .trim

   <input v-model.trim="msg">
   

   自动过滤用户输入的首尾空格