VueJS 語法

vuejs 的使用

<div class='box'>
    <p>{{msg}}</p>
    <p>{{name}}</p>
</div>
//創建一個控制器
new Vue({
    //選擇器，控制器要去控制哪個標簽，給哪個標簽當中提供數據
    el:'.box'.
    //數據模型，給 el 選擇出來的內容提供數據
    data:{
        msg:'hello world',
        name:'xmg'
    }
//另一種綁定方法
}).$mount('.box');

vuejs 的一些指令

  • 不閃爍的數據綁定 <p v-text='msg'></p>
  • 如果數據中有 html 標簽，則會被解析 <p v-html = 'msg'></p>
  • 顯示標簽 <p v-show='true'>123</p> 如果另一個標簽與此標簽相反的顯示隱藏則用<p v-else>456</p>
  • <p v-pre>{{msg}}</p> 不會解析直接原樣輸出
  • <li v-for="(key,value) in course">{{key}}--{{value}}</li> 遍歷
  • 上述遍歷是vue.js1.0，在 vue.js 2.0 中 <li v-for="(value,key) in course">{{value}}--{{key}}</li> 第二個參數變為下標，第一個參數為值
  • <p v-if='true'>123</p> 標簽存在與否，相反的用 v-else 屬性
  • vuejs 中沒有templateUrl，所以模版都寫在<template></template> 標簽中
  • <input type='text' v-model='name'> 雙向綁定
// new Vue() 會返回當前的控制器，使用返回值的控制器可以直接調用里面的屬性
var vue = new Vue({
    data:{
        name:'',
        age:10
    }
}).$mount('#box');

Vue.js 的事件

vuejs 中的事件指令都寫在控制器下的methods:{} 中

<div id="box">

    <p>{{age}}</p>
    <button v-on:mouseenter="modify(5)">修改年齡</button>
    <button @click="age=20">修改年齡</button>  <!--可以直接在后面操作模型的屬性-->
    <button @click="modify(20)">修改年齡</button>  <!--可以直接在后面操作模型的屬性-->

</div>

<script>

    var vue = new Vue({     //new Vue() 會返回當前的控制器，使用返回的控制器可以直接調用里面的屬性。
        data:{
            age:10,
        },
        methods:{
            modify:function (agr) {
                this.age = agr;
            }
        }

    }).$mount('#box');   //$mount(選擇器)


</script>

<div @click = 'show'>
    <button @keydow='modify($event)'>點擊</button>
    //給指令鍵注冊事件
    <input type="text" @keydow.xmg="down($event)">
</div>

<script>
    Vue.directive('on').keyCodes.xmg = 17;
    new Vue({
        data:{
            age:10
        },
        methods:{
            modify:function(e){
                this.age = 20;
                //阻止事件冒泡
                e.cancelBubble = true ;
            }.
            down:function(e){
                alert('down----' + e.keyCode);
            }
        }
    }).$mount('#box');
</script>

vue.js 過濾器

<div id="app">
    <p>{{name | uppercase | lowercase}}</p>
    <p>{{price | currency '￥'}}</p> <!-- 傳參通過空格來傳參-->
    <ul>
        <li v-for="value in curse | filterBy 'css'">{{value}}</li>
    </ul>

    <ul>
        <li v-for="value in curse | limitBy  2">{{value}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        }
    });

</script>
  • 綁定控制器時，不建議綁定到 body\html 上，在 vue2.0當中這么做會報錯；在 vue2.0 里，所有的內置過濾器都被刪除了，以壓縮框架體積，但是可以自定義過濾器
Vue.filter('xmgCurrency',function(input,a){
    return a + input;
})

自定義指令

  • Vue.directive 定義的指令都是以屬性形式的 'Attribute'
Vue.directive('red',function(){
    //在自定義指令當中可以拿到指令標簽
    this.el.style.background = 'red';
})
  • 自定義指令可以傳參數
Vue.directive('color',function(color){
    this.el.style.background = color;
})
  • 自定義元素指令
Vue.elementDirective('xmg-red',{
    bind:function(){
        this.el.style.background = 'red';
    }
})

<p>{{name}}</p>
<p v-red>123456</p>
<p v-color=" 'green' ">77777</p>
<xmg-red>777788888</xmg-red>

計算屬性 get 方法和 set 方法的調用形式

  • 點語法調用的是 get 方法
  • 點等于調用的是 set 方法
 new Vue({
        el:'#app',
        data:{
            num:3,
            price : 10,
        },
        methods:{
            count(){
                this.total;       //會自動調用get方法
                this.total = 10;  //會自動調用set方法把10傳給set方法
            }
        },
        computed:{ //當中聲明都是計算屬性
                    //在每一個計算屬性當中有兩個方法，get方法與set方法
                    //get與set方法是自己調用的方法。
                    //get方法調用時機：當使用 this.total時會調用get方法  return的值，就是定義屬性的值。
                    //想要獲取屬性時，會自動調用get方法
                    /*----------------------------*/
                    //set方法調用時機
                    //給該屬性賦值是會自動調用set方法  this.total = 100;  會自動調用set 并且會把賦的值傳給set的參數。
                    //在set方法當中，不能再使用.屬性=value    this.tataol = 100;
            total:{
                get(){
                    console.log('調用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            },
            age:{
                get(){
                    console.log('調用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            }
        }
    });

生命周期 鉤子函數

在 vue2.0 鉤子函數有所變化

 var vue =  new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        },
        methods:{
            destroyVue:function () {
                alert(1);
                vue.$destroy();
                this.$destroy();
            }
        },
        created:function(){               //鉤子函數：在某個特定時期會自動調用相應的方法。
            alert('實例已經創建');        //生命周期：從生到死的過程。
        },
        beforeCompile:function(){
            alert('編譯之前');
        },
        compiled:function(){
            alert('編譯之后');
        },
        ready:function(){
            alert('準備插入到文檔中');
        },
        beforeDestroy:function(){
            alert('銷毀之前');
        },
        destroyed:function(){
            alert('銷毀之后');
        }
    });

全局組件

組件本質就是模版

//創建了一個模版
var ext = Vue.extend({
    template:'<h1>我是組件</h1>'
});
//全局組件：在任何一個控制器當中都可以使用此組件
Vue.component('xmg',ext);

局部組件

  • 局部組件：只能在自己聲明的控制器中使用，可以定義多個
var ext = Vue.extend({
    template:'<h1>我是組件</h1>'
});
new Vue({
    el:'.box1',
    data:{
        msg:'xmg'
    },
    components:{
        xmg:ext,
        gxq:{
            template:'<h1>我是 gxq</h1>'
        }
    }
})

組件綁定數據

  • 當創建一個組件時，就是一個隔離作用域，里外數據不互通
 /*創建了一個模板*/
    var ext =  Vue.extend({
        template:'<h1>我是組件</h1>'
    });
    /*局部組件：只能在自己聲明的控制器當中來使用 ,可以定義多個*/
    new Vue({
       el:'.box1',
        data:{
           msg:'xmg'
        },

        components:{   //當創建一個組件是，就是一個隔離作用域。
            xmg:ext,
            gxq:{
                data:function () {
                  return {
                      msg:'myMsg',
                      name:'name123'
                  }
                },
                methods:{
                    show(){
                        alert('show');
                    }
                },
                template:'<h1>我是gxq組件{{msg}}----{{name}}</h1><button @click="show">點擊</button>'
            }
        }
    });

組件的模版

    new Vue({
        el:'#app',
        components:{
            xmg:{
                template:'#temp1'  //不能使用templateUrl 來引用模板文件
                                     //Vue考慮到性能性能原因。
                                     //因為瀏覽器不能訪問文件。angular當中使用url來訪問一個文件，
                                    // 它是發送了一個Ajax請求,拿到請求結果，插入到文檔當中。
            }
        }
    })

動態組件

<div id="app">
    <button @click="change">切換</button>
    <!--在屬性前面加上":" 會解析后面的內容 到控制器當中查找有沒有這個屬性-->
    <component v-bind:is="name"></component>
    <component is="xmg"></component> <!--不去解析里面的值-->
</div>

 new Vue({
        el:'#app',
        data:{
            name:'xmg'
        },
        methods:{
            change(){
                this.name = 'xmg2';
            }
        },
        components:{
            xmg:{
                template:'<h1>xmg組件</h1>'
            },
            xmg2:{
                template:'<h1>xmg2組件</h1>'
            }  
        }
    })
  • es6.0 的函數寫法
methods:{
    change(){
        this.name = 'xmg2';
    }
}

父子組件


<div id="app">

    <fathercom></fathercom>

</div>


<template id="temp1">

    <h1>xmg組件{{name}}</h1>
    <input type="text" v-model="name">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr>
    <!--傳遞的數據雙向綁定-->
    <childcom :msg.sync="name"></childcom>

</template>

new Vue({
    el:'#app',
    components:{
        fathercom:{
            template:'#temp1',
            data:function(){
                return {
                    name:'xmg'
                }
            },
            components:{
                //聲明子組件，聲明的子組件只能在父組件的模版中
                children:{
                    template:'<h1>我是子組件{{msg}}</h1> <input type="text" v-model="msg">',
                    //在使用組件時，外部可以傳遞一個值進來
                    //<childcom :msg="name"></childcom>
                    //父數據的變化會影響子數據變化
                    //子數據變化不會影響父數據變化
                    //傳遞數據的時候如果加上 .sync 表示雙向綁定，互相影響
                    // <childcom :msg.sync="name"></childcom>
                    props:['msg']
                }
            }
        }
    }
});
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容