vue.js入门(一)创建vue对象和常用指令及使用示例

Vue官网中文网：https://cn.vuejs.org/

一、创建一个Vue对象

二、Vue常用指令

1、v-if指令

            
Yes!
            
No!
            
Age: {{ age }}
            
Name: {{ name }}

2、v-show指令

            
Yes!
            
No!
            
Age: {{ age }}
            
Name: {{ name }}

3、v-else指令

            
Yes!
            
No!
            
Age: {{ age }}
            
sex:{{sex}}

4、v-for指令

        var vm = new Vue({
            el: '#app',
            data: {
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            }
        })

            

                

                    

                        
Name
                        
Age
                        
Sex
                    
                
                

                    

                        
{{ person.name  }}
                        
{{ person.age  }}
                        
{{ person.sex  }}
                    
                
            
        

5、v-bind指令

 

            

                

                    {{ n + 1 }}
                
            
        
 
    

6、v-on指令(处理事件)，并且v-on可以使用@符号替代

	
  

            

            

                
                Greet
            
            

                
                Hi
            
        
    
    

三、使用v-model实现数据双向绑定

    
显示文本框的输入值：{{ message }}
    

    
	

以v-model实现双向绑定来理解vue.js的mv-vm框架模式：model即数据，V即数据显示，控件的值，vm即Vue对象。