Vue 經常使用指令

 

指令是以數據去驅動DOM行爲，簡化DOM操做。經常使用指令以下

• v-text    innertext，不能解析文本中的html標籤

• v-html   innerhtml，可解析文本中的html標籤

• v-show  控制元素的顯示、隱藏

• v-if、v-else-if、v-else   知足條件才顯示對應的元素

• v-for   遍歷數組、對象

• v-bind  單向數據綁定
• v-model  雙向數據綁定
• v-on  事件綁定

 

 

demo   v-text、v-html、v-show

    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 

    <script>
        
        new Vue({
            el:'#div1',
            template:'<p v-text="info"></p>',  //至關於'<p>{{info}}</p>'
            data:function(){
                return{
                    info:"are you ok?"  //若是裏面含有html標籤，不解析，直接做爲文本輸出
                }
            }
        });
        
        new Vue({
            el:'#div2',
            template:'<p v-html="info"></p>',
            data:function(){
                return{
                    info:"<h3>are you ok?</h3>"  //會解析裏面的html標籤
                }
            }
        });
        
        new Vue({
            el:'#div3',
            template:'<p v-show="display">are you ok?</p>',  //指定一個變量，變量名不必定要是display，什麼都行。display不是指的css屬性名
            data:function(){
                return{
                    display:true  //boolean值，true——顯示，false——不顯示（隱藏），再也不佔據空間
                }
            }
        });
        
    </script>

 

 

 

demo   v-if系列  條件判斷

    <div id="app">
        <p v-if="score>80">優秀</p>
        <p v-else-if="score>60">及格</p>
        <p v-else>不及格</p>
    </div> 

    <script>
        new Vue({
            el:'#app',
            data:function(){
                return{
                    score:85
                }
            }
        });
    </script>

知足條件才顯示對於的元素。

new Vue()中，template、data都可選。

 

 

 

所謂template 模板，就是內容的模板，內容（包括指令）能夠寫在元素裏、也能夠寫在template裏

    <div id="app1">姓名：{{name}}</div>  <!--直接寫在元素裏-->
    <div id="app2"></div>
    
    <script>
        new Vue({
            el:'#app1',
            data:function(){
                return{   
                    name:'chy'
                }
            }
        });
        
        new Vue({
            el:'#app2',
            template:'<p>姓名：{{name}}</p>',  //寫在template裏
            data:function(){
                return{
                    name:'chy'
                }
            }
        });
        
    </script>

效果是同樣的。

return { }  返回的是一個對象。

 

 

 

data的2種寫法

    data:function(){  //指向匿名函數
        return {
            content:20
        }  
    },
    
    data(){ //直接做爲函數名
        return {
            content:20
        } 
    },

效果都是同樣的。

 

 

 

demo   v-for  遍歷數組、對象

　　 <ul id="app1">
        <li v-for="(item,index) in array">第{{index}}項：{{item}}</li>   <!-- index從0開始。一個元素填充一個li -->
    </ul>
    
    <ul id="app2">
        <li v-for="(key,value) in object">{{key}}：{{value}}</li>   <!-- item、index、array、key、value、object都是變量，能夠本身指定，不是固定的 -->
    </ul>


    <script>
        new Vue({
            el:'#app1',
            data:function(){
                return{
                    array:["手機","平板","電腦"]  //數組
                }
            }
        });
        
        new Vue({
            el:'#app2',
            data:function(){
                return{
                    object:{name:'chy',age:20}   //對象
                }
            }
        });
        
    </script>

 

 

 

 demo  v-bind、v-model  單雙向數據綁定

　　<div id="app1"></div>
    <div id="app2"></div>
    
    
    <script>
        
        new Vue({
            el:'#app1',
            //單向綁定，value指定變量名，內存中變量值的變化會同步到視圖，但視圖中值的變化不會影響|同步到內存中的變量
            //若是其餘屬性要使用此變量值，屬性名前面加冒號，好比這局代碼的class="chy"
            template:'<div><input v-bind:value="name" :class="name" /> 值是{{name}}</div>',  
            data:function(){
                return{
                    name:'chy'  //內存中的變量值
                }
            }
        });
        
        new Vue({
            el:'#app2',
            //雙向綁定，內存中變量值的變化會同步到視圖，視圖中值的變化也會同步到內初變量
            template:'<div><input v-model:value="age" :class="age" /> 值是{{age}}</div>',
            data:function(){
                return{
                    age:20
                }
            }
        });
        
    </script>

 能夠 v-bind|model:value="變量名"  來綁定，也能夠  v-bind|model="變量名"  來綁定，相比而言，後者更簡單。

v-bind|model與<input />綁定時，是與<input />的value綁定。

 

 

 

demo  v-on  事件綁定

　　<div id="app1"></div>
    <div id="app2"></div>
    
    <script>
        
        new Vue({
            el:'#app1',
            //能夠修改內存中的變量，但不能直接執行alert()、console.log()之類的語句
            template:'<button v-on:click="content=\'click me\'">{{content}}</button>',  
            data:function(){
                return{
                    content:'btn1'
                }
            }
        });
        
        new Vue({
            el:'#app2',
            // 也能夠調用方法，要執行什麼語句須要放在方法中。指定方法名
            template:'<button v-on:click="showInfo">{{content}}</button>',  
            data:function(){
                return{
                    content:'btn2'
                }
            },
            methods:{
                showInfo:function(){  //冒號前面寫方法名
                    alert("you clicked btn2");
                }
                // 能夠寫多個方法，逗號分隔
            }
        });
        
    </script>

 

 

 

template中能夠寫不少內容

    <div id="app"></div>
    
    <script>
        
        new Vue({
            el:'#app',
            template:'<div><h3>this is a title</h3><p>this is first paragraph</p><p>this is second paragraph</p></div>',  
            data:function(){
                return{
                    content:'btn1'
                }
            }
        });
        
    </script>