Vue.js

本章內容：

指令
- v-bind
- v-bind行內樣式設定
- v-bing類名(class)設定
- v-on
- v-for
- v-model
- v-show
- v-if/v-else-if/v-else
- v-html
- v-text
- v-once
- v-pre
- v-clock
- v-slot
自定義指令
- 定義局部指令
- 定義全局指令

指令

指令前綴帶有 v- ，表示他們是 Vue 提供的特殊特性，通過與數據配合使用, 完成特定的功能。

v-bind

綁定屬性，用來綁定data中的某一個數據，或者是動態數據。

<div id="app">
    <!-- 傳統語法 -->
    <p v-bind:title="message">快用光標懸浮我！~ ~ </p>
	<!-- 簡寫語法 -->
    <p :title="message">快用光標懸浮我！~ ~ </p>
</div>

new Vue({
    el: "#app",
    data: {
        message: "誰TM買小米？"
    }
})

v-bind行內樣式設定

<div id="app">
    <!-- Object -->
    <p :style="{color: 'red', fontSize: '40px'}">v-bind行內樣式設定</p>
    <!-- Array.Object -->
    <p :style="[{color: 'skyblue'}, {fontSize: '40px'}]">v-bind行內樣式設定</p>
    <!-- Array.data.Object 數組存放data中的對象數據-->
    <p :style="[color, fontSize]">v-bind行內樣式設定</p>
</div>

new Vue({
    el: "#app",
    data: {
        color: {color: 'pink'},
        fontSize: {fontSize: '50px'}
    }
})

v-bind類名`（class）`設定

<style>
    .box.red {
        color: red;
    }
    .box.shadow {
        text-shadow: 0 0 4px #f60;
    }
    .box.size {
        font-size: 30px;
    }
</style>

<div id="app">
    <!-- 添加多個類名語法 -->
    <p class="box" :class="['red', 'shadow']">v-bind類名(class)設定 - 1</p>
    <!-- 爲true就添加這個類名，也可以應用表達式。 -->
    <p class="box" :class="{size: true, shadow: false, red: n > 0}">v-bind類名(class)設定 - 2</p>
</div>

new Vue({
    el: "#app",
    data: {
        n: 10
    }
})

v-on

綁定事件，也可以是簡寫 @。

<div id="app">
    <!-- 傳統語法 -->
    <button v-on:click="clickFn()">v-on</button>
    <!-- 簡寫語法，建議簡寫。 -->
    <button @click="clickFn()">@</button>
</div>

new Vue({
    el: "#app",
    methods: {
        clickFn() {
            alert("Vue - 指令 - v-on");
        }
    }
})

v-for

用於綁定數據，來渲染視圖。

<div id="app">
    <ul>
        <!-- 
            item：當前下標對應的數據。
            index：當前循環的下標。
        -->
        <li v-for="item,index in list" :key="index">
            {{item.name}} - {{item.age}} - {{item.sex}}
        </li>
    </ul>
</div>

new Vue({
    el: "#app",
    data: {
        list: [
            {
                name: "張三",
                age: 18,
                sex: "男"
            },
            {
                name: "小美",
                age: 16,
                sex: "女"
            },
            {
                name: "大明",
                age: 28,
                sex: "男"
            }
        ]
    }
})

注意事項

v-for和v-if永遠不要一起使用，可以使用計算屬性來返回需要展示的數據，其餘的斬掉，避免浪費性能。
:key的取值必須是唯一的，就像我們的身份證，加入:key的作用是提高Vue的性能。

v-model

實現表單輸入和數據狀態之間的雙向綁定，通常作用在表單元素上面。

<div id="app">
    <h4>message：{{message}}</h4>
    <input type="text" name="" v-model="message">
</div>

new Vue({
    el: "#app",
    data: {
        message: "Hello Vue.js"
    }
})

雙向數據綁定原理

當綁定的控件value改變時會自動同步到當前綁定的數據，從而引起視圖更新。

<input v-model="message" />
//  等同於
<input :value="message" @input="message = $event.target.value" />

v-model作用在不同的控件上會拋出不同的監聽事件

text 和 textarea 元素使用 value 屬性和 input 事件。
checkbox 和 radio 使用 checked 屬性和 change 事件。
select 字段將 value 作爲 prop 並將 change 作爲事件。

v-show

通過Boolean控制元素的顯示或隱藏，原理是通過display來控制顯示或隱藏。

<div id="app">
    <p v-show="isShow">我會被隱藏掉嗎？</p>
</div>

new Vue({
    el: "#app",
    data: {
        isShow: true
    }
})

v-if / v-else-if / v-else

可以通過Boolean控制，也可以通過條件判斷來控制添加或刪除，原理是通過appendChild()和removeChild()來控制。

<div id="app">
    <p v-if="isShow">我會被隱藏掉嗎？</p>
    <p v-if="n == 1">v-if</p>
    <p v-else-if="n == 2">v-else-if</p>
    <p v-else>v-else</p>
</div>

new Vue({
    el: "#app",
    data: {
        isShow: false,
        n: 2
    }
})

v-html

綁定當前特性的標籤會進行更新元素的內容textContent，能夠解析標籤，類似原生innerHTML。

<div id="app">
    <p v-html="message">我會被更新掉</p>
</div>

new Vue({
    el: "#app",
    data: {
        message: "Heelo<strong>加粗標籤會被解析嗎？</strong>"
    }
})

v-text

綁定當前特性的標籤會進行更新元素的內容textContent，但是不解析標籤，類似原生innerText。

<div id="app">
    <p v-text="message">我會被更新掉</p>
</div>

new Vue({
    el: "#app",
    data: {
        message: "Heelo<strong>加粗標籤會被解析嗎？</strong>"
    }
})

v-once

只渲染元素和組件一次，隨後的改變將不會在重新渲染。這可以用於優化性能。

<div id="app">
		<p v-once>{{n}}</p> <!-- 綁定該特性標籤，只會渲染一次。 -->
		<p>{{n}}</p>
		<button @click="change()">change</button>
	</div>

new Vue({
    el: "#app",
    data: {
        n: 1
    },
    methods: {
        change() {
            this.n ++;
        }
    }
})

v-pre

綁定該特性的標籤會跳過這個元素和它的子元素的編譯過程，會顯示原始的標籤內容，不會渲染data中的數據。

<div id="app">
    <p v-pre>{{我不會被渲染了。}}</p>
</div>

new Vue({
    el: "#app",
    data: {
        pre: "v-pre"
    }
})

v-clock

隱藏插值符號，用於網絡阻塞，網絡緩慢時，防止頁面中的插值符號會暴露給用戶。

<style>
    [v-cloak] { /* CSS3 屬性選擇器 ，需要配合樣式在完成。*/
        display: none;
    }
</style>

<div id="app">
    <p v-cloak>{{message}}</p>
</div>

new Vue({
    el: "#app",
    data: {
        message: "Hello"
    }
})

v-slot

在指定的位置輸出我們的內容。

<div id="app">
    <!-- 在組件內部聲明瞭`template`標籤模板，與`<slot/>`組件進行綁定，從而實現`template`內的內容會插入到`child`組件中去。 -->
    <child>
        <template v-slot:child>
            <h3>aaa</h3>
        </template>
    </child>
</div>

new Vue({
    el: "#app",
    components: {
        child: {
            template: `
                <div>
                    <slot name="child"></slot>
                </div>
            `
        }
    }
})

自定義指令

除了Vue內置的一些指令，Vue是允許註冊自定義指令的。

鉤子函數

<div id="app">
    <div v-width="width" v-show="show" v-if="append">{{width}}</div>
    <!-- 觸發 update 和 componentUpdated 鉤子函數 -->
    <button @click="width += 10">width +</button>
    <!-- 觸發 update 和 componentUpdated 鉤子函數 -->
    <button @click="show = !show">isShow？</button>
    <!-- 指令綁定的元素刪除時觸發 unbind，添加時觸發 bind 和 inserted 鉤子函數 -->
    <button @click="append = !append">isAppend？</button>
</div>

new Vue({
    el: "#app",
    data: {
        width: 500,
        show: true,
        append: true
    },
    directives: {
        width: {
            // 指令第一次綁定到元素時調用，值調用一次。
            bind(el, binding) { 
                console.log(el, binding, "bind");
            },
            // 被綁定元素插入父節點時調用，(在這裏父元素是 div#app).但不保證,父元素已經插入了 DOM 文檔。
            inserted(el, binding) { 
                console.log(el, binding, "inserted");
            },
            // 所在組件的`VNode`更新時調用。
            update(el, binding) { 
                console.log(el, binding, "update");
            },
            // 指令所在組件的 VNode 及其子 VNode 全部更新後調用。
            componentUpdated(el, binding) { 
                console.log(el, binding, "componentUpdated");
            },
            // 指令與元素解綁時調用.只調用一次。
            unbind(el, binding) {
                console.log(el, binding, "unbind");
            }
        }
    }
})

兩個參數的返回結果
1. el：指令綁定的DOM元素。
2. arg：指令的信息。
  - name：指令的簡稱
  - rawName：指令的全名
  - modifiers：指令的修飾符
  - def：指令觸發的鉤子函數
  - expression：綁定指令的表達式
  - value：指令綁定的數據

定義局部指令

<div id="app">
	<div v-width="wh" v-height="wh" v-background=" 'pink' ">{{wh}} * {{wh}}</div>
	<button @click="wh += 10">width +</button>
</div>

new Vue({
    el: "#app",
    data: {
        wh: 100
    },
    directives: {
        width(el, binding) {
            el.style.width = binding.value + "px";
        },
        height(el, binding) {
            el.style.height = binding.value + "px";
        },
        background(el, binding) {
            el.style.background = binding.value;
        }
    }
})

定義全局指令

<!DOCTYPE html>
<html>
<head>
	<title>Vue - 指令 - 全局指令</title>
</head>
<body>
	<div id="app">
		<p v-color=" 'pink' ">自定義指令,改變字體顏色</p>
	</div>
	<script src="../vue.js"></script>
	<script>
		// 完整語法
		Vue.directive("color", {
			bind(el, binding) {
				el.style.color = binding.value;
			},
			inserted() {

			},
			update() {

			},
			componentUpdated() {

			},
			unbind() {
				
			}
		})
		// 簡寫語法
		Vue.directive("color", (el, binding) => {
			el.style.color = binding.value;
		})
		new Vue({
			el: "#app"
		})
	</script>
</body>
</html>

vue - 指令及自定義指令

Vue.js

指令

v-bind

v-bind行內樣式設定

v-bind類名`（class）`設定

v-on

v-for

注意事項

v-model

雙向數據綁定原理

v-model作用在不同的控件上會拋出不同的監聽事件

v-show

v-if / v-else-if / v-else

v-html

v-text

v-once

v-pre

v-clock

v-slot

自定義指令

定義局部指令

定義全局指令

vue - 路由（vue-router）

stylus - 選擇器

stylus - 安裝

stylus - 函數與插值符號

vue - 初識

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

vue - 指令及自定義指令

Vue.js

指令

v-bind

v-bind行內樣式設定

v-bind類名（class）設定

v-on

v-for

注意事項

v-model

雙向數據綁定原理

v-model作用在不同的控件上會拋出不同的監聽事件

v-show

v-if / v-else-if / v-else

v-html

v-text

v-once

v-pre

v-clock

v-slot

自定義指令

定義局部指令

定義全局指令

v-bind類名`（class）`設定