vue.js基礎02--計算屬性(computed、watch、&watch)、過濾器、自定義元件（component、components）

muzidigbig發表於2018-07-25
Vue.js過濾器元件

1.vue例項中的計算屬性選項

計算屬性關鍵詞: computed。

在一個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回一個結果就可以。

<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</body>
<!--將vue引入到本地-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
        // 計算屬性的 getter
            reversedMessage: function () {
        // `this` 指向 vm 例項
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。

<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p >Methods reversed message: "{{ reversedMessage2() }}"</p>
</div>
</body>
<!--將vue引入到本地-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
        // 計算屬性的 getter
            reversedMessage: function () {
        // `this` 指向 vm 例項
                return this.message.split('').reverse().join('')
            }
        },
        //通過方法來慚怍屬性
        methods:{
            reversedMessage2:function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

vue.js提供了一個方法$watch,用於觀察Vue例項上的資料變動。更好的辦法是使用計算屬性而不是一個命令式的$watch回撥。

說白了$watch這貨就是觀察一個值的變化，觀察的這個值一變化的話，那麼就執行function裡面的語句。

watch是在vue例項物件中觀測資料的變化；$watch是通過例項物件呼叫觀測資料。

<div id="example">
    firstName:<input type="text" name="li"  v-model="firstName">
             <br>
    lastName:<input type="text" name="fei"  v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>
</body>
<!--將vue引入到本地-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            firstName:'Foo',
            lastName:'Bar',
            fullName:''
        },
        computed: {
        // 計算屬性的 getter
            reversedMessage: function () {
        // `this` 指向 vm 例項
                return this.message.split('').reverse().join('')
            }
        },
        //通過方法來慚怍屬性
        methods:{
            reversedMessage2:function () {
                return this.message.split('').reverse().join('')
            }
        },
//        watch: {
//             firstName: function (val) {
//                 this.fullName = val + ' ' + this.lastName
//             },
//            lastName: function (val) {
//                this.fullName = this.firstName + ' ' + val
//            }
//        }
    });
    vm.$watch('lastName',function (val) {
        this.fullName = val+' '+this.lastName;
    });
    vm.$watch('firstName',function (val) {
        this.fullName = this.firstName+' '+val;
    })
</script>

2.Vue.js 元件

元件（Component）是 Vue.js 最強大的功能之一。

元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹

註冊一個全域性元件語法格式如下：

Vue.component(tagName, options)

tagName 為元件名（標籤名），options 為配置選項。註冊後，我們可以使用以下方式來呼叫元件：

<tagName></tagName>
<div id="example">
    <!--使用我們自定義的元件-->
    <goheader></goheader>
</div>
</body>
<!--將vue引入到本地-->
<script src="js/vue.js"></script>
<script>
//    註冊一個全域性元件
    Vue.component('goheader',{
        template:'<h2>自定義全域性元件！</h2>'
    });
    var vm = new Vue({
        el: '#example',
        data: {
//            這裡不能將全域性元件中的陣列定義在data中
//           meg:"自定義全域性元件！"
        }
    })
</script>

區域性元件

我們也可以在例項選項中註冊區域性元件，這樣元件只能在這個例項中使用：

<div id="example">
    <!--使用我們自定義的元件-->
    <go-child></go-child>
</div>
</body>
<!--將vue引入到本地-->
<script src="js/vue.js"></script>
<script>
//    註冊一個區域性模板
    var divChild = {
        template:'<h2>自定義區域性元件！</h2>'
    };
    var vm = new Vue({
        el: '#example',
        //註冊元件的選型
        components:{
            //<go-child>只在父模板中使用
            'goChild':divChild
        }
    })
</script>

 

 

 

若有不足請多多指教！希望給您帶來幫助！

相關文章