Vue示例

Vue 简明示例。 

首先要引入vue.js

 
  
  
  
  
 
 

  

	

		
变量绑定使用示例
		
		

			

				
显示变量内容，变量值变更后会更新
				
变量值：{{var_bind}}
			
			

				
变量值修改后不会更新，指令 v-once
				
变量值：{{var_once}}
			
			

				
变量绑定，输出HTML内容，指令 v-html
				
这里将被变量var_html的HTML内容给替换掉。
			
			

				
绑定属性，指令 v-bind:(html属性)
				绑定class属性
			
			

				
JS计算表达式(不能用“;”结尾)
				

					
算数运算：{{ number + 1}}
					
三元运算：{{ yes ? 'Yes' : 'No'}}
					
函数调用: {{ var_func.split('').reverse().join('')}}
				
			
			

				
绑定样式
				

					
绑定class
					
绑定class,数组形式
					
绑定style，:style是v-bind:style的简写
				
			
		
	

	

		
条件渲染示例，指令：v-if, v-else-if, v-else
		判断结果：
		条件值：A 
		条件值：B 
		条件值：C 
		其它值
	

	

		
列表渲染，指令 v-for
		

			

				
数组方式
				

					
姓名：{{ item.name }}， 年龄：{{ item.age }}
				

				
数组方式（取数组下标号）
				

					
{{index}}. 姓名：{{ item.name }}， 年龄：{{ item.age }}
				
			

			

				
对象方式（遍历属性）
				

					
属性值：{{ item }}
				

				
对象方式（遍历属性，取属性名）
				

					
{{attr}}：{{ item }}
				
			
		
	

	

		
事件绑定，指令 v-on:(HTML事件名 onclick, ondblclick ...) 简写形式如：@click, @dblclick
		

			

				
行内JS
				点我看click_counter的值：{{click_counter}}
			
			

				
绑定methods中的函数
				点我
			
			

				
绑定methods中的函数并传参数
				点我
			
			

				
绑定methods中的双击函数并传参数
				点我
			
			

				
绑定methods中的函数,传参数和事件对象($event)
				点我
			
		
	

	

		
表单对象,双向绑定，指令 v-model

		
		
input内容：{{form_input}}

		
		
textarea内容：{{form_textarea}}

		Jack
		Jhon
		Mike
		
checkbox内容：{{form_checkbox}}

		One
		Two
		
form_radio内容：{{form_radio}}

		
	

	

		
全局注册的组件
		
		在组件内插入的内容
		

		
局部注册的组件