Vue语法介绍 - b13wen/vue.js-study GitHub Wiki

	2)可以扩展Vue构造器，预定义可复用的组件构造器
	var MyComponent = Vue.extend({  // 扩展选项})
	// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
	var myComponentInstance = new MyComponent()
	
2、属性与方法
	vue实例会代理data对象里所有的属性
	
3、模糊语法
	{{message|capitalize}}

4、计算机属性
	{{reversedMessage}}
	自定义声明一个计算机属性
	computed:{
		 // a computed getter   
		 reversedMessage: function () 
		 {      
			 // `this` points to the vm instance      
			 return this.message.split('').reverse().join('')    }  
		 }
	}
	
	1）计算机属性 VS method
	
		调用method中的方法和计算机属性方法都能实现功能，但计算机属性会缓存函数的执行结果
	相对而言，计算机属性将不会更新
	
	2) 计算机属性 Vs watched（观察 Watchers）
	    watch 监控 
		<div id="watch-example">  
			<p>   
				Ask a yes/no question:    
				<input v-model="question">  
			</p>  
			<p>{{ answer }}</p>
		</div>

		data: {    
			question: '',    
			answer: 'I cannot give you an answer until you ask a question!'  
		},  
		watch: {    
		// 如果 question 发生改变，这个函数就会运行    
		question: function (newQuestion) {      
			this.answer = 'Waiting for you to stop typing...'      
			this.getAnswer()    
			}  
		},
	
	
	
5、Class与Style绑定

	数据绑定一个常见需求是操作元素的Class列表和它的内联样式。
	
	1）绑定Class 从而动态切换Class 
		a、对象语法
			传入一个对象，以动态切换class
			<div class="static active"></div> 结果
			
			1）绑定data属性
				<div class="static"     
					v-bind:class="{ active: isActive, 'text-danger': hasError }"> 是否绑定取决于后面第二个参数是否为true
				</div>
			data: {  
				isActive: true, 
				hasError: false
				}
				
				<div v-bind:class="classObject"></div>

				data: {  
					classObject: {    
						active: true,    
						'text-danger': false  
					}}

			
			2)绑定计算机属性
				<div v-bind:class="classObject"></div>

				data: {  
					isActive: true,  
					error: null
				},
				computed: 
				{  
					classObject: function () {    
						return {      
						active: this.isActive && !this.error,      
						'text-danger': this.error && this.error.type === 'fatal',    
				}  }}



			
		b、数组语法
				
			<div v-bind:class="[activeClass, errorClass]">
 
			data: { 
				activeClass: 'active', 
				errorClass: 'text-danger'
			}
			 
			渲染为:<div class="active text-danger"></div>
			如果你也想根据条件切换列表中的 class ，可以用三元表达式：
				<div v-bind:class="[isActive ? activeClass : '', errorClass]">
			此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass 。

	2）绑定Style
		<div v-bind:style="styleObject"></div>

		data: {  
			styleObject: {    
				color: 'red',    
				fontSize: '13px'  
			}
		}


6、条件渲染
	1）v-if 和v-else
		<div v-if="Math.random() > 0.5">  
			Sorry
		</div>
		<div v-else>  
			Not sorry
		</div>
		
	2)template-if
		<template v-if="ok">  
			<h1>Title</h1>  
			<p>Paragraph 1</p>  
			<p>Paragraph 2</p>
		</template

	3)v-show  
		<h1 v-show="ok">Hello!</h1>

	v-if 在切换时才会渲染
	v-show 在初始化时就会渲染
	

7、组件和v-for
	在自定义组件中不能自动传递数据到组件里，因为组件有自己独立的作用域。我们要使用props来传递
	
	
	1）key 保证数据唯一性
		<div v-for="item in items" :key="item.id">  <!-- 内容 --></div>

	
	2）数组更新检测
		Vue包含一组观察数组的变异方法，
	
			push() 
			pop() 
			shift() 
			unshift() 
			splice() 
			sort() 
			reverse()
		打开控制台，然后用前面例子的 items 数组调用突变方法：example1.items.push({ message: 'Baz' }) 。

	
	3）过滤
		<li v-for="n in even(numbers)">{{ n }}</li>

		data: { 
			numbers: [ 1, 2, 3, 4, 5 ]
		},
			methods: {  
				even: function (numbers) {    
					return numbers.filter(function (number) {      
						return number % 2 === 0    
					})  
				}
			}


8、事件
	1）$event 可以将原生的事件传入到方法中
	<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

	
	
9、表当控件绑定
	1）文本
		使用v-model 绑定单行文本
	2）多行文本
		<textarea v-model="message" placeholder="add multiple lines"></textarea>

	3）复选框
		还是使用v-model ="XXX"
		但XXX是一个数组，在data中进行定义
		
	4）下拉列表
		<select v-model="selected">  
			<option v-for="option in options" v-bind:value="option.value">    
				{{ option.text }}  
			</option>
			</select><span>Selected: {{ selected }}</span>

			new Vue(
				{  el: '...', 
				data: {   
					selected: 'A',    
					options: [      
					{ text: 'One', value: 'A' },      
					{ text: 'Two', value: 'B' },      
					{ text: 'Three', value: 'C' }    
					]  
				}})

10、组件
	
	组件是vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用代码，
	
	1）注册
		全局组件
		Vue.component('my-component', {
				 template: '<div>A custom component!</div>'
			})
		在父实例中使用<my-component></my-component> 来使用自定义元素
	
	2）局部注册
			var Child = {  
				template: '<div>A custom component!</div>'
				}
				new Vue({  
				// ...  
				omponents: {    
					// <my-component> 将只在父模板可用    
					'my-component': Child  
					}
				})
	
	3）DOM模板解析说明
		自定义组件，在HTML标签中使用时有可能会失效
		
		解决使用is属性
		<table> 
			<tr is="my-row">
		</tr></table>

	4）data必须是函数
		当一个实例中插入多个想用组件，，如果不适用函数没插入一个组件都会影响到data的值
		所以
		Vue.component('simple-counter', {  
			template: '<button v-on:click="counter += 1">{{ counter }}</button>',  
			// data 是一个函数，因此 Vue 不会警告，  
			// 但是我们为每一个组件返回了同一个对象引用  
			data: function () {    
				return data  
			}})
	
	5）组件之间作用域是孤立的，所以不能且不应该在子组件模板中直接引用父组件的数据，可以使用props把数据传给子组件
	
		Vue.component('child', {
			// 声明 props  
				props: ['message'], 		
			// 就像 data 一样，prop 可以用在模板内  
			// 同样也可以在 vm 实例中像 “this.message” 这样使用  
				template: '<span>{{ message }}</span>'})

		<child message="hello!"></child>

	6）父子通信
	
		子组件向父组件发送信息，使用自定义事件
			使用 $on(eventName) 监听事件 
			使用 $emit(eventName) 触发事件

		<div id="counter-event-example">  
			<p>{{ total }}</p> 
			<button-counter v-on:increment="incrementTotal"></button-counter>  
			<button-counter v-on:increment="incrementTotal"></button-counter>
		</div>
 
		Vue.component('button-counter', {  
			template: '<button v-on:click="increment">{{ counter }}</button>',  
			data: function () {    
				return {     
				counter: 0    
				}  
			},  
			methods: {   
				increment: function () {      
					this.counter += 1      
					this.$emit('increment')    
					}  
				},
			})
			
			new Vue({  
				el: '#counter-event-example',  
				data: {    
					total: 0  
				}, 					
				methods: {   
					incrementTotal: function () {    
					this.total += 1   
					}  
				}
			})
		
		7）给组件绑定原生事件 native
		
			<my-component v-on:click.native="doTheThing"></my-component>