vue学习-- 内置指令

vue官网 : https://cn.vuejs.org/v2

Vue.js提供了一些常用的内置指令

• v-if指令

• v-show指令

• v-else指令

• v-for指令

• v-bind指令

• v-on指令

• v-model指令

    
    
    
    
    
    
    
     href="../../lib/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
     href="../../css/vueDemo.css" rel="stylesheet"/>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    
    
    
    <script src="/JS/jsL/public_html/js/vue.js"></script>
    
    
    
    
    
    


    
    
    

        
     
     
        
     
     
{{ message }}
        
     
     

        
     
     

        
     
     
    
    
    
    
    
    

    

    
---------------------分割线---------------------
    

    
    
    

        
     
     
            鼠标
            
    
    
    
    

    
---------------------分割线---------------------
    

    
    
    

            
     
     
v-if
            
     
     
Yes!
            
     
     
name: {{ name }}
            
     
     
No!
            
     
     
Age: {{ age }}
            
     
     
Name: {{ name }}
            
     
     
---------------------分割线---------------------
            
     
     
Yes!
            
     
     
name: {{ name }}
            
     
     
v-show!
    
    
    
    

    
---------------------分割线---------------------
    

    
    
    

        
     
     
Name
Age
Sex
{{ person.name }}
{{ person.age }}
{{ person.sex }}
    
    
    
    

    
---------------------分割线---------------------
    

    
    
    

        
     
     

                {{ n }}
            
    
    
    
    /br>
    
---------------------分割线---------------------
    

    
    
    

        
     
     

        
     
     

            
      
      
            Greet
        
        
     
     

            
      
      
            Hi
        
    
    
    
    <script>
        // 这是我们的Model
        var exampleData = {
            message: 'Hello World!'
        }
        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        var app = new Vue({
          el: '#app',
          data: exampleData
        })
        var app2 = new Vue({
            el: '#app-2',
            data: {
              message: '页面加载 ' + new Date()
            }
          })
        var app3 = new Vue({
            el:'#app-3',
            data:{
                yes: true,
                no: false,
                age: 25,
                name: 'so diao',
                show: false
            }
        })
        var app4 = new Vue({
            el:'#app-4',
            data:{
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }]
            }
        })
        
        var app5 = new Vue({
            el:'#app-5',
            data:{
                activeNumber: 1,
                pageCount: 10
            }
        })
        
        var app6 = new Vue({
            el:'#app-6',
            data:{
                message : "hello this is my first vue"
            },
            methods:{
                greet: function() {
                    // // 方法内 `this` 指向 app6
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }                 
        })
    </script>

参考：http://www.cnblogs.com/rik28/p/6024425.html