vue 语法

快速入门

	
        

            {
    {message}}

            
            {
    { false ? "OK" : "No" }}

            
            {
    {number*3.14}}

            

        
    
    

v-on: click 事件绑定

   
        

            {
    {message}}  
            vue的onclick
        
    
    

v-on:keydom 键盘绑定

        

            Vue:
            

            传统JS：
        
    
    

v-on:事件修饰符(中断，停止)

	 
        

            

                
            
            
            

            

                这是一个文件域
            
        
    
    

v-on:按钮修饰符

	 
        

            Vue:
        
    
    

v-bind不同写法

	
       

           第一种不同写法
           第二种不同写法
       
   
   

v-model

	
        

            

                用户名：

                密码：

            
        
    
    

v-for 遍历数组

	
        

            

                
{
    {item}}={
    {index}} 
            
        
    
    

v-for遍历对象

第一种遍历方式

	

	  

	    

	      {
    { todo.text }}
	    
	  
	
	var app4 = new Vue({
	  el: '#app-4',
	  data: {
	    todos: [
	      { text: '学习 JavaScript' },
	      { text: '学习 Vue' },
	      { text: '整个牛项目' }
	    ]
	  }
	})

第二种遍历方式

	
        

            

                
{
    {value}}===={
    {key}} 
            
        
    
    

v-for遍历对象二

	
        

            

                

                    
序号
                    
编号
                    
名称
                    
价格
                
                

                    
{
    {index}}
                    
{
    {product.id}}
                    
{
    {product.name}}
                    
{
    {product.price}}
                
            
        
    
    

v-if 与 v-show

	 
        

            风电吃亏
            itcast
            切换
        
    
    

vue的生命周期

	
        

            {
    {message}}
        
    
    

事件修饰符

	Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
	
	Vue.js通过由点(.)表示的指令后缀来调用修饰符。
	
	. stop
	. prevent
	. capture
	. self
	. once

	
	
	
	
	

	
	
	
	
	
	

	
	
	
...
	
	
	
...
	
	
	

按键修饰符

	Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
	
	
	


	记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

	
	
	
	
	

全部的按键别名

	.enter
	.tab
	.delete (捕获 "删除" 和 "退格" 键)
	.esc
	.space
	.up
	.down
	.left
	.right
	.ctrl
	.alt
	.shift
	.meta
	
	实例
	

	
	
	
	
Do something