vue.js基礎02--計算屬性(computed、watch、&watch)、過濾器、自定義元件(component、components)
阿新 • • 發佈:2019-01-11
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>
若有不足請多多指教!希望給您帶來幫助!