vue 指令與過濾器

內容渲染指令

內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容，常用的內容渲染指令有3種，

v-text

示例

<div id="app">
    <!-- 把 username 對應的值，渲染到第一個 p 標簽中 -->
    <p v-text="username"></p>
    <!-- 把 gender 對應的值，渲染到第二個 p 標簽中 -->
    <!-- 注意：第二個 p 標簽中，默認文本會被gender值覆寫 -->
    <p v-text="gender">性別</p>
</div>
<!-- 匯入 vue 的庫檔案 -->
    <script src="https://www.cnblogs.com/LuBingBing/archive/2022/11/23/lib/vue.js v2.7.13.js"></script>

//創建vue 的實體物件
const vm = new Vue({
    //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
    el: '#app',
    // data 物件就是要渲染到頁面上的資料
    data: {
        username: 'zs',
        gender: '男'
    }
});

插值運算式 {{}}雙大括號

在實際開發中應用較多，不會覆寫原有渲染
示例

<div id="app">
    <p>姓名：{{username}}</p>
</div>

const vm = new Vue({
    //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
    el: '#app',
    // data 物件就是要渲染到頁面上的資料
    data: {
        username: 'zs',
        gender: '男',
    }
});

v-html

可以把帶標簽的的字串，渲染成真正的html 內容
示例

<div id="app">
    <div v-html="info"></div>
</div>

const vm = new Vue({
            //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
            el: '#app',
            // data 物件就是要渲染到頁面上的資料
            data: {
                info: '<h4 style="color: red; font-weight: bold;"> 歡迎學習 vuejs</h4>'
            }
        });

屬性系結指令

注意：插值運算式只能用在元素內容節點中，不能用在元素的屬性節點

動態系結屬性值 v-bind

在屬性前加屬性指令 v-bind: 為元素動態系結值，vue 規定 v-bind 可以簡寫成: ,示例

<input type="text" v-bind:placeholder="tips">
<img :src="https://www.cnblogs.com/LuBingBing/archive/2022/11/23/photo" style="width: 150px;">

使用 javascript 運算式

在 vue 提供的模板渲染語法中，除了支持系結簡單的資料值之外，還支持 javascript 運算式的運算，例如

{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};

<div v-bind:id="'list-' + id"></div>

注意在簡寫 v-bind 屬性系結期間，如果系結內容需要進行動態拼接，則字串外應包裹單引號，例如

<div :title="'box' + index">!!!!!</div>

事件系結指令

v-on 系結事件

v-on 系結事件指令，輔助程式員為DOM元素系結監聽事件，格式如下

<p>count的值是: {{count}}</p>
        <!-- 語法格式為 v-on:事件名稱="事件處理函式的名稱" -->
        <button v-on:click="addCount">+1</button>

 const vm = new Vue({
            //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
            el: '#app',
            // data 物件就是要渲染到頁面上的資料
            data:{
                count: 0,
            },
            // 定義事件的處理函式
            methods:{
                add: function () {
                    // console.log(vm);
                    // vm.count += 1; 
		    // this === vm 
                    this.count += 1;
                }
		// 也可簡寫成
                add () {
                    // console.log(vm);
                    this.count += 1;
                }
            }
        });

v-on: 也可以簡寫為 @

<button @click="sub">-1</button>

注意：原生 DOM 物件有 onclick、oninput、onkeydown 等原生事件，替換成 vue 的事件系結形式后，分別為： v-on:click 、v-on:input、v-on:keydown

事件物件

vue 提供了內置固定的變數 $event ，它就是原生 DOM 的事件物件 e

<!-- 如果 count 為偶數，則按鈕背景變為藍色，否則，取消背景 -->
<!-- vue 提供了內置固定的變數 $event ，它就是原生 DOM 的事件物件 e-->
        <button @click="add(1, $event)">+n</button>

const vm = new Vue({
            //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
            el: '#app',
            // data 物件就是要渲染到頁面上的資料
            data:{
                count: 0,
            },
            // 定義事件的處理函式
            methods:{
                add (n, e) {
                    this.count += 1;
                    // 判斷 this.count 的值是否為偶數
                    if (this.count%2 === 0) {
                        //偶數
                        e.target.style.backgroundColor = 'blue';
                        console.log(e);
                    } else {
                        // 奇數
                        e.target.style.backgroundColor = '';
                    }
                }
              
            }
          
        });

事件修飾符

在事件處理函式中呼叫 event.preventDefault() 或 event.stopPROpagation() 是非常常見的需求，因此， vue 提供了事件修飾的概念，輔助程式員更方便的**對事件的觸發進行控制，常用5種修飾符如下：

示例1：

<a href="http://www.baidu.com" @click.prevent="show">跳轉到百度首頁</a>

const vm = new Vue({
            //el 屬性是固定寫法，表示當前 vm 實體要控制的區域，接收的是一個選擇器
            el: '#app',
            // data 物件就是要渲染到頁面上的資料
            data:{},
            // 定義事件的處理函式
            methods:{
                show () {
		    // e.preventDefault();
                    console.log("點擊了 a 鏈接");
                }
            } 
        });

標籤：其他

上一篇：vue3和vue2 的區別，vue3和vu2到底哪個好呢？

下一篇：我的Vue之旅 11 Vuex 實作購物車