Vue基礎知識之常用屬性和事件修飾符(二)

2022-07-17 10:24:10 字數 2190 閱讀 6365

computed為可以計算的屬性,由get方法和set方法組成,預設呼叫的是get方法。裡面的

計算屬性簡單來說,就是根據資料推算出來的值,當給這個值賦值時可以影響其他值的變化。

data:,,]

},computed:

},get());

return obj?false:true;

}} msg:function()//預設是get

}

定義一些方法,供元件使用。

用於檢測的資料發生改變的api

和computed不同,watch可以夾雜非同步邏輯

當乙個值發生變化的時候,執行某個動作用watch更加方便。

var vm = new vue(,

watch:,2000);}}

});//修改msg的值先等待兩秒後再顯示。

computed適合做複雜邏輯,簡單的只能給watch,當乙個值改變觸發某個事件時使用watch;如果是非同步,並且有中間過程,用watch。

每個 vue 例項都會**其 data 物件裡所有的屬性

var data = 

var vm = new vue()

vm.a === data.a // -> true

vm.a = 2 // 設定屬性也會影響到原始資料

data.a // -> 2

data.a = 3 // ... 反之亦然

vm.a // -> 3

注意:只有這些被**的屬性是響應的。如果在例項建立之後新增新的屬性到例項上,它不會觸發檢視更新

除了 data 屬性, vue 例項暴露了一些有用的例項屬性與方法。這些屬性與方法都有字首 $,以便與**的 data 屬性區分。

var data = 

var vm = new vue()

vm.$data === data // -> true

vm.$el === document.getelementbyid('example') // -> true

vm.$watch('a', function (newval, oldval) )

注意:不要在例項屬性或者**函式中(如 vm.$watch('a', newval => this.mymethod()))使用箭頭函式。因為箭頭函式繫結父上下文,所以 this 不會像預想的一樣是 vue 例項,而是 this.mymethod 未被定義

1、事件冒泡(事件不會向上傳遞)

parent

child

//阻止冒泡

2、阻止預設事件(不觸發預設事件)

3、指定元素觸發(不包括子元素)

2

1

4、事件捕獲方式(父->子)

parent

child

5、繫結事件一次(觸發後移除事件)

say

6、.capture事件預設是雙向的,先捕獲,在冒泡

注意:'.'後面也可以使用對應鍵值的ascii碼值
1、物件繫結方式:

:class=""

如果條件為true,新增樣式;如果條件為false,移除樣式。

2、陣列繫結方式:

:class="[data中的資料,"類名",]"

data:

1、物件繫結方式:

:style=""

2、陣列繫結方式:

:style="[data中的資料]"

data:

}

VUE常用基礎知識

一.開發環境搭建 1.nvm node的版本控制工具 2.快速匯入cdn推薦位址 3.快速開啟除錯視窗 f12 4.在官網安裝node.js 安裝cnpm 映象 npm install g cnpm registry 安裝vue cnpm install vue g cnpm install vue...

事件基礎知識

什麼是事件 是物件內部狀態發生了變化,或者物件做某些動作時 或做之前,做之後 向外界發出的通知。註冊時間的基本形式 1註冊事件偵聽器 處理事件的物件.addeventlistener 事件型別,偵聽器函式 2定義事件偵聽器 function 偵聽器函式 e 事件類 void 預設為void 此處為響...

jqurey基礎知識和常用事件方法

樣式檔案不需要標籤 引用style檔案的方法 引用jqurey檔案 輸出到控制台 console.log document ready function this css color red this css ul li eq 2 on click datatype json success fun...