vue官網
一 、class、style操作
二、事件
三、計算屬性
四、數據監聽、觀測
五、指令+自定義指令
六、過濾器

---

一 、class、style操作 官網

1. class使用：
（1）v-bind:class=“數據|屬性|變量|表達式”
（2）v-bind:class=“數據” ???? 數據類型：字符、對象、數組；
（3）v-bind:class="[‘class名1’,‘class名2’]"
（4）v-bind:class="[{class名1:true},{class名2:false}]"
（5）v-bind:class="{class名1:true,class名2:false}" ???? 布爾值決定樣式是否使用。

<style>.box1{background:red;}.box2{width:500px;height:20px;} </style> <div id="app"><p :class="css">（1）v-bind:class="數據|屬性|變量|表達式"</p><p :class="'box1 box2'">（2）v-bind:class="數據" 數據類型可以是：字符、對象、數組</p><p :class="['box1','box2']">（3）v-bind:class="['class名1','class名2']"</p><p :class="[{box1:true},{box2:false}]">（4）[{class名1:true},{class名2:false}]"</p><p :class="{box1:true,box2:false}">（5）v-bind:class="{class名1:true,class名2:false}"</p> </div> <script>let vm = new Vue({el: "#app",data: {css: "box1 box2"}}); </script>

2. style使用：
（1）:style="‘數據’" ???? 數據類型：字符、對象、數組；
（2）:style="’[‘css屬性名1: 值’, ‘css屬性名2: 值’]’"； 這種方法現已不支持使用
（3）:style="[{css屬性名:‘值’},{css屬性名小駝峰:‘值’}]"；
（4）:style="{css屬性名1:‘值’,css屬性名2:‘值’}"；

<div id="app"><p :style="'background:red;width:500px'">（1）:style="數據" 數據類型：字符、對象、數組；</p><p :style="['background:red','width:500px']">（2）:style="'['css屬性名1: 值', 'css屬性名2: 值']'"</p><p :style="[{background:'red'},{width:'500px'}]">（3）:style="[{css屬性名:'值'},{css屬性名小駝峰:'值'}]；</p><p :style="{background:'red',width:'500px'}">（4）:style="{css屬性名1:'值',css屬性名2:'值'}；</p> </div> <script>let vm = new Vue({el: "#app"}) </script>

二、事件 官網

1. 模板綁定行間事件： <xx v-on:事件名="方法名($event,參數)">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<xx @事件名="方法名($event,參數)">

2. 綁定自定義事件：
（1）定義： vm.$on( '自定義事件名'|['自定義事件名1','自定義事件名2'],回調函數(參數) )；

（2）銷毀： vm.$off( '自定義事件名'|['自定義事件名1','自定義事件名2'],回調函數(參數))；

（3）觸發： vm.$emit(自定義事件名,參數)

（4）示例

let vm = new Vue({...}) vm.$on('myEvent',(arg) =>{console.log('定義一個事件',arg);//vm.$off('myEvent'); //銷毀事件 } ); vm.$emit('myEvent','我要傳參數')//結合 dom 開始 <button @clik="show">按鈕</button>methods:{this.$emit('myEvent','aaa');this.$off('myEvent'); }vm.$on('myEvent',(arg) =>{console.log('定義一個事件',arg);//vm.$off('myEvent'); //銷毀事件 } ); //結合 dom 結束

3. 事件對象： 事件對象可以不傳遞，需要傳遞的場景：傳參數同時使用事件對象時。例如： show($event,參數)

4. 解決事件冒泡和默認行為：
（1）利用 $event ：
e|event.cacelBubble = true;ev.stopPropagation();
e|event.preventDefault();

（2）利用事件：
@click.stop()
@事件.prevent()

5. 修飾符 官網
（1）事件修飾符
（2）按鍵修飾符
（3）系統修飾符

? ? ? ? 模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。模板表達式中不適合寫太多邏輯，此時我們可以使用函數和計算屬性（函數無法響應式）。

三、計算屬性 官網

【使用計算屬性的好處】

• 不想使用原數據，因為原數據可能是從庫中讀取出來的，但是原數據放在頁面（或者模板）中不合適，想要對原數據進行修改、重新計算。處理之后再模板中使用該計算屬性。
• 模板盡量少使用業務邏輯處理。當遇到需要處理的數據，此時可以使用計算屬性。

1. 計算屬性是一個函數，當它 所依賴的元數據變化 時，就會再次執行；

• 應用場景： 比如，當在輸入框中輸入數據時，希望這個數據可以影響 Model 層的變化，此時會用到 v-model 指令，接著可以把 被依賴、變化 的數據用計算屬性重新計算。 這樣可以根據輸入的內容來修改原數據，從而影響接下來的某些變化。常用于搜索。

2. 使用
模板中使用：{{計算屬性}}

computed:{計算屬性1:函數:function(){return 返回值;},計算屬性2:函數:function(){return 返回值;}, }

3. 案例
（1）官網例子；

（2）輸入框檢索

• 當在輸入框中輸入數據時，可以將在輸入框中輸入的數據檢索出來。

<div id="app"><input type="text" v-model="ipt"><ul><li v-for="(val, id) in list" :key="id">{{val}}</li></ul> </div> <script>let vm = new Vue({el: "#app",data: {ipt: "",list: ["apple", "balana", "orange", "peat"]}}) </script>

• 此時循環中不應該是依賴原數據，而是經過計算后的數據。

//模板中修改 <li v-for="(val,id) in resultList" :key="id"></li>computed: {//計算原數據list，對list進行邏輯處理resultList: function(){let result = [];let that = this;that.list.forEach(function(val){if(val.indexOf(that.ipt) !=-1){result.push(val);}});return result;} }

4. 計算屬性 vs 方法

序號計算屬性 computed方法 methods

1	計算屬性是響應式的。只有所依賴的元數據發生改變，數據才會重新計算、求值，頁面響應式渲染；	大部分都是事件綁定時用到，需要調用；
2	計算屬性的性能高，適合做篩選；	方法適合在列表渲染中使用，強制渲染執行；
3	計算屬性需要 return 返回值，且要在模板中使用。

四、數據監聽、觀測 官網 api具體使用

1. 使用

watch:{//第 1 種方式雙向綁定的字段(currentVal,oldVal){ //邏輯},//第 2 種方式 將業務邏輯放到方法中雙向綁定的字段:"方法名",//第 3 種方式 深度觀測（所觀測的數據是對象）雙向綁定的字段:{handler: function (currentVal,oldVal){/*...*/},deep:true //開啟深度檢測},//第 4 種 在偵聽開始之后被立即調用（一上來就有數據）雙向綁定的字段:{handler: function (currentVal,oldVal){/*...*/},immediate:true //首次執行}, }

2. 數據觀測 vs 計算屬性
（1）當你想要在數據變化響應時，執行 異步操作 或開銷較大的操作用 watch 比 computed 會更好。（ 在 computed 中請求數據，可能會一直重復請求 ）
（2）計算屬性需要在模板中使用；
（3）數據觀測和計算屬性都可以響應式渲染，但方法不可以。

五、指令 + 自定義指令

1. 指令： 擴展了html語法功能，區別了普通的html屬性；
（1） 比較 v-show 和 v-if

區別v-show=“布爾”v-if=“布爾”

操作對象	操作css	操作dom
場景	適合頻繁切換	適合不頻繁切換
性能	初始渲染消耗	頻繁切換會有消耗

（2） v-model 和 v-bind

序號v-modelv-bind

使用方法：	v-model = "屬性"	v-bind:value="屬性"、:checked="..."
綁定：	通常用在能生產數據的表單元素，如： input、radio、select等，綁定的時表單元素的 value 值；	單向綁定，綁定一個變量。
響應：	雙向綁定時響應式的	非響應式。單向模擬雙向：輸入時把事件對象的 value 攜帶到方法中，方法修改 model 。@input="fn($event.value)"

（3）v-html 和 v-text 的區別：

名稱v-htmlv-text

區別	不僅可以渲染數據，而且可以解析標簽	和{{}}渲染數據效果相同，不解析標簽。
示例	v-html=“msg”，msg=“< strong>Hello</ strong> Vue!”，結果為：Hello Vue！	v-text=“msg”，msg=“< strong>Hello</ strong> Vue!”，結果為：< strong>Hello</ strong> Vue!

v-html： 在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

（4）v-cloak： 這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

[v-cloak] {display: none; } //給父元素添加 <div v-cloak>{{ message }} </div>

（5）單向綁定模擬雙向綁定
在單向綁定中，由model層 -> view層的方式： :value="..."。然后輸入時把事件對象上的 value 攜帶到方法，方法修改model。v-on:input="fn($event, value)"

<div id="app"><input type="text" :value="msg" @input="checkIpg($event)"> </div> <script> let vm = new Vue({el: "#app",data: {msg: ""},methods: {checkIpg: function (e) { this.msg = e.srcElement.value;}} }) </script>

2. 自定義指令： 指令是個函數/對象，用來操作 dom ，里面的 this，返回 window。
在vue中盡量不要操作真實DOM，因為操作真實DOM消耗性能大，而指令就是用來操作DOM的。

• 使用

（1）全局：

Vue.directive('不帶v-的指令名',function(el,binding)) el ---- 使用指令的 DOM 元素 binding ---- 是個對象，含有傳入的參數(binding.value)

（2）局部

directives:{不帶v-的指令名: function(el,binding){} }

（3） 指令是個函數，也可以是個對象（此時有自定義指令的鉤子函數）。

（4）使用
在標簽中使用： v-指令名；
在標簽中使用： v-指令名="'參數'"；注意引號。

• 自定義指令的鉤子函數 官網
  簡寫時的效果 = bind + update;
  （1）bind: function(el, binding)：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置（此時還未獲取到真實 dom ）。
  （2）inserted: function(el, binding)：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
  （3）update: function(el, binding)：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
  （4）componentUpdated: function(el, binding)：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
  （5）unbind: function(el, binding)：只調用一次，指令與元素解綁時調用。

• 案例

（1）自定義指令 給指定元素添加背景色：

<!---- 全局---- 要放在new實例的上面 ----> <div id="app1"><p v-red>app1自定義指令-不傳參數</p><p v-color="'green'">app1自定義指令-傳參數</p> </div> <div id="app2"><p v-red>app2自定義指令-不傳參數</p><p v-color="'green'">app2自定義指令-傳參數</p> </div><script>Vue.directive('red', (el, binding)=>{el.style.background = "red";});Vue.directive('color', (el, binding)=>{el.style.background = binding.value || 'red';});let vm = new Vue({el: "#app1"});let vm2 = new Vue({el: "#app2"}); </script><!---- 局部 ----> <script>let vm = new Vue({el: "#app1",directives: {red: function(el, binding){console.log(el,binding);el.style.background = "red";},color: function(el, binding){console.log(el,binding);el.style.background = binding.value;}}}); </script>

注意： 指令在模板中使用，傳參時參數還要用 單引號 引起來，否則會報錯。報錯信息如下：

• 輸入框自動聚焦

<div id="app"><input type="text" v-focus> </div> <script>let vm = new Vue({el: "#app",directives: {focus: {inserted: function(el, binding){el.focus();}}}}) </script>

六、過濾器 官網

1. 全局（）：
（1）直接在 main.js 文件中寫：Vue.filter('過濾器名稱',函數(要過濾的元數據,參數))；
（2）新建一個 filters 文件夾，并在該文件夾下新建 index.js 文件，在 main.js 中注冊：import 'filters文件夾所在位置'

2. 局部：
（1）不帶參數：

filters:{過濾器名稱(){//...return ...} }

（2）帶參數：

filters:{過濾器名稱(要過濾的元數據,參數) {//...return ...} }

3. 使用：

{{數據名 | 過濾器名(參數1,參數2)}} v-xxx="數據名 | 過濾器名(參數1,參數2)" :屬性="數據名 | 過濾器名(參數1,參數2)"

4. 示例：

---

上一篇： Vue筆記（一）基本使用、數據檢測
下一篇： vue筆記（三）生命周期、組件（嵌套）、數據傳遞

總結

以上是生活随笔為你收集整理的vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。