當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

vue基础 —— 单网页版的Vue学习基础

發布時間：2023/12/4 综合教程 33 生活家

生活随笔收集整理的這篇文章主要介紹了 vue基础 —— 单网页版的Vue学习基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1、vue-cli
- - 1.1、什么是vue-cli
  - 1.2、vue-cli 安裝
- 2.、vue 項目結構和運行
- - 2.1、vue 項目目錄結構
  - 2.2、vue 項目的運行流程
  - 2.3、運行命令
- 3、Vue組件（components）
- - 3.1、私有子組件
  - 3.2、全局組件
  - 3.3、單行（一行）方法的簡寫
  - - 3.3.1、共用組件，在引用時，初始化不同的值
  - 3.4、組件的 props（自定義屬性）
  - - 3.4.1、`:propName="9"` 與 `propName="9"` 數字與字符串的傳遞
    - 3.4.2、props 的默認值
  - 3.5、樣式（CSS）沖突
  - 3.6、Vue的生命周期
  - 3.7、組件之間的數據共享
  - - 1）父向子傳數據
    - 2）子向父傳數據
    - 3）兄弟組件之間的數據共享
  - 3.8、ref 引用
  - - 使用 `ref` 引用 DOM 元素
    - 使用 `ref` 引用組件
    - `this.$nextTick(cb)` 方法
  - 3.9、動態組件
  - - 什么是動態組件
    - 動態組件渲染
    - keep-alive 保持組件的狀態
    - keep-alive 對應的生命周期函數
    - keep-alive 的 include 、exclude 屬性
- 4、插槽
- - 4.1、什么是插槽
  - 4.2、默認插槽
  - - 4.2.1、默認插槽的格式
    - 4.2.2、**示例：**
  - 4.3、具名插槽
  - - 4.3.1、具名插槽的使用
    - 4.3.2、為具名插槽提供數據內容（具名插槽的數據模板）
    - 4.3.3、具名插槽的數據模板的簡寫
  - 4.4、作用域`插槽`
  - - 4.4.1、 `作用域插槽 `的定義格式
    - 4.4.2、使用 `作用域插槽`
    - 4.4.3、解構作用域插槽的數據對象
- 5、自定義指令（directive）
- - 5.1、私有指令
  - - 5.1.1、私有指令的語法
    - 5.1.2、入門使用1：最簡單的使用
    - 5.1.3、入門使用2： `動態綁定參數`
    - 5.1.4、update 函數
    - 5.1.5、指令函數的簡寫
  - 5.2、全局指令

1、vue-cli

1.1、什么是vue-cli

vue-cli 是 Vue.js 開發的標準工具。它簡化了程序員基于 webpack 創建工程化的 Vue 項目的過程。

1.2、vue-cli 安裝

vue-cli 是 npm 上的一個全局包。

使用 npm install 命令，即可方便的把它安裝到自己的電腦上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 項目：

vue create 項目的名稱

示例：

vue create demo-first

2.、vue 項目結構和運行

2.1、vue 項目目錄結構

assets 目錄：存放項目的靜態資源文件，例如：css 、圖片資源
components 目錄： 程序員封裝的、可復用的組件，都要放到components目錄下
main.js ： 是項目的入口文件，整個項目的運行，要先執行 main.js
App.vue ：是項目的根組件

2.2、vue 項目的運行流程

在工程化的項目中，vue 要做的事情很單純：通過 main.js 把 App.vue 渲染（內容替換）到 index.html 的 指定區域（id=“app”） 。

其中：

App.vue 用來編寫待渲染的 模板結構 。
index.html 中需要預留一個 el區域 。
main.js 把 App.vue 渲染到 index.html 所指定區域（id=“app”）。

new Vue({//el: "#app",render: h => h(App),
}).$mount('#app') // 把 render 函數的內容渲染到 index.html的 id="app" 的區域中

.$mount('#app') 等價于 el: "#app"

vue 組件由三部分組成

每個.vue組件都由他其個部分構成，分別是

template ：組件的模板結構
script ：組件的Javascript
style ：組件的樣式

一般來部，最上面是 template、中間是script、最下面是style。

.vue 注意事項

template 下只允許有一個根節點。
script 中，export default()， data 必須是函數。
style 默認只支持css ，若要寫 less ，則增加 lang="less" 屬性。

<template><div><div class="test-box"><h3>hello vue組件 --- {{ username }}</h3><button @click="changeName">修改用戶名</button></div><div>XXX</div></div></template><script>
export default {data() {return {username: '張三',}},methods: {changeName() {// 在組件中，this表示當前組件的實例對象console.log(this)this.username = 'haha'}}}</script>
<style lang="less" >.test-box{background-color: pink;h3 {color: red;}}
</style>

2.3、運行命令

打開 package.json，內容如下

查看 scripts ，

運行命令即是 npm run serve ，

打包命令是 npm run build 。

3、Vue組件（components）

3.1、私有子組件

步驟1：在 scripts 標簽內，通過導入需要的組件：

import Left from '@/components/Left.vue'

步驟2：在 script 的 components 節點注冊組件

<script>
// 步驟1
import Left from '@/components/Left.vue'// 步驟2
export default{components:{Left}}
</script>

步驟3：在 template 中，以標簽的形式使用剛才注冊的組件。

<template><div><Left></Left></div>
</template>

Left.vue

<template><div class="left"><h3>Left vue</h3></div>
</template><style>.left{background-color: rgba(20, 20, 241, 0.5);height: 200px;}</style><script>export default{components:{}}</script>

App.vue

<template><div class="app-container"><h1>App根組件</h1><hr/><div class="box"><!-- 步驟3： 以標簽形式，使用注冊好的組件  --><Left></Left></div><div class="bottom"><h2>bottom </h2></div></div> </template><script>
// 步驟1：導入.vue組件
import Left from '@/components/Left.vue'// 在 components 節點注冊組件
export default {components:{Left,
} }
</script><style lang="less" >.app-container{background-color: red;}.bottom{background-color: aqua;height: 150px;}</style>

3.2、全局組件

在vue項目的 main.js 入口文件中，通過 Vue.component() 方法，可以注冊全局組件。

步驟1：導入需要全局注冊的組件

示例：import Count from '@/components/Count.vue'
使用 Vue.components('MyCount',Count) 注冊。
- 參數1：字符串格式，表示組件的注冊名稱
- 參數2：需要被注冊的那個組件

3.3、單行（一行）方法的簡寫

<template><div>       <p>count 的值是：{{ count }}</p><button @click="add" > +1 </button></div>
</template><script>
export default {data() {return {          count: 0,}},methods: {add() {this.count+=1}}
}
</script>

add() 只有一行代碼，所以 add() 可以省略，將這一行代碼寫到 @click 中，即 @click="count += 1" 。完整代碼如下：

<template><div>       <p>count 的值是：{{ count }}</p><button @click="count += 1" > +1 </button></div>
</template>

3.3.1、共用組件，在引用時，初始化不同的值

問題描述：Count.vue 是共用組件。其它組件（ Left.vue、Right.vue）在引用 Count.vue 組件時，希望 Count.vue 中的 count 變量在初始化為不同的值。

Count.vue 的代碼：

<template><div><h5>Count 組件</h5><p>count 的值是：{{ count }}</p><button @click="count += 1">+1</button><button @click="show">打印 this</button></div>
</template><script>
export default {  data() {return {// 把 props 中的 init 值，轉存到 count 上count: 0,}},methods: {show() {console.log(this)}}
}
</script>

3.4、組件的 props（自定義屬性）

props 是組件的自定義屬性，通過 this.屬性名 進行屬性值的運算處理。

vue規定：組件中封裝的自定義屬性是只讀的，不允許直接修改。

要修改 props 中屬性的值，可以把 props 的值轉到 data中，因為data中的數據是可讀可寫的。

<script>
export default {   props: ['init'],data() {return {            count: this.init,}},methods: {show() {console.log(this)}}
}
</script>

在 Left.vue 中，:init="9" ，每個組件在引用時，通過這樣的方式進行初始化。

<template><div class="left-container"><h3>Left 組件</h3><hr><MyCount init="9"></MyCount></div>
</template>

3.4.1、`:propName="9"` 與 `propName="9"` 數字與字符串的傳遞

上一步，通過下面的代碼對 count 初始化。

<MyCount init="9"></MyCount>

點擊 +1 按鈕后，發現是不是加1，而是往后面拼接1，如 91、911、9111 … 。

主要原因是通過 init="9 傳值，被默認是字符串，字符串無法直接相加，只是拼接。

如果要將init 的值變為數，則如下：

<MyCount :init="9"></MyCount>

:propName="9" 與 propName="9" 的區別如下：

:propName="9" ，相當于 v-bind:propName="9" ，這個9是數字。
propName="9" ，這個9是字符串。

總結：

如果props的屬值，初始化傳遞時是字符串，則使用 propName="value" 方式。

如果props的屬值，初始化傳遞時是數字，則 :propName="number" 方式。

3.4.2、props 的默認值

數組格式：

props:['init1' , 'init2']

對象格式：

props:{init1:{default: 0,required: true,type: Number,},
}

如果不通過 :init=“9” 傳值時，有一個默認值。配置如下：

<script>
export default {   props: {init:{default:0,}},    data() {return {            count: this.init,}},methods: {show() {console.log(this)}}
}
</script>

3.5、樣式（CSS）沖突

在一個vue 定義的樣式會影響到其它vue中。

3.6、Vue的生命周期

生命周期（Life Cycle）是指一個組件從 創建 -> 運行 -> 銷毀 的整個階段，強調的是一個時間段。

生命周期函數：是由 vue 框架提供的內置函數，會伴隨著組件的生命周期，自動按次序執行。

注意：生命周期強調的是時間段，生命周期函數強調的是時間點。

3.7、組件之間的數據共享

1）父向子傳數據

<template><div><Son :msg="message" :info="info" ></Son></div>	</template><script>
import Left Son "@/components/Son.vue";export default {data() {return {message: "hello parent",info: { name: "zhangsan", age: 25 },            };},   components: {Son,       },    
};
</script>

<template><div>       msg:{{ msg }} ,info:{{ msg }} ,</div>
</template><script>
export default {props: ["msg", "info"],    
};
</script>

2）子向父傳數據

3）兄弟組件之間的數據共享

在 vue2.x 中，兄弟組件之間數據共享的方案是 EventBus 。

EventBus 的使用步驟：

① 創建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象 。

② 在數據 發送方，調用 bus.$emit('事件名稱', 要發送的數據) 方法觸發自定義事件。

③ 在數據 接收方，調用 bus.$on('事件名稱', 事件處理函數) 方法注冊一個自定義事件。

3.8、ref 引用

ref 用來輔助開發者在不依賴于 jQuery 的情況下，獲取 DOM 元素或組件的引用。

每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的 DOM 元素或組件的引用。

默認情況下， 組件的 $refs 指向一個空對象。

使用 `ref` 引用 DOM 元素

<template><div class="app-container">       <h3 ref="myh13"> ref 學習</h3>       <button @click="showThis">showThis</button>        </div>
</template><script>
export default {    methods: {showThis() {console.log(this)this.$refs.myh13.style.color = 'red'}      }
};
</script>

說明：點擊showThis 按鈕，通過 this.$refs.myh13 定位到 h3 dom 對象，然后通過 style.color = 'red' 對其內容進行修改。

效果圖如下：

使用 `ref` 引用組件

App 是父組件，Left 是子組件， Left中有 count 數據，點擊 addCount 按鈕可以自增。父組件中有 Count重置為0 的按鈕，點擊后，可以將 Left中有 count 設置為0。

App.vue 組件：

<template><div class="app-container"><h1>App 根組件</h1><button @click="ReCount">Count 重置為0</button><Left ref="comLeft"></Left></div>
</template>
<script>
import Left from '@/components/Left.vue';export default {    components: {Left,       },methods: {        ReCount() {console.log(this)//方法1，定位到Left組件中 count 元素，重置為0this.$refs.comLeft.count = 0// 方法2，定位到Left組件中resetCount()方法，將count重置為0//this.$refs.comLeft.resetCount()},},
};
</script>

Left.vue 組件：

<template><div class="left-container"><h3>Left 組件</h3><button @click="addCount"> addCount </button> {{ count }}</div>
</template><script>
export default {props: ["msg", "info"],data() {return {count: 0,};},methods: {addCount() {this.count = this.count + 1},resetCount() {this.count = 0;},},
};
</script>

說明：

方法1：

主要是通過父組件中的 this.$refs.comLeft.count = 0 ，將Left組件中的count 重置為 0 。

方法2：

主要是通過父組件中的 this.$refs.comLeft.resetCount() ，調用Left組件中resetCount() 方法，將count 重置為 0 。

`this.$nextTick(cb)` 方法

3.9、動態組件

什么是動態組件

動態組件指的是 動態地切換組件 的顯示與隱藏。

動態組件渲染

如何實現動態組件渲染 vue 提供了一個內置的<component :is="XX"></component> 組件，專門用來實現動態組件的渲染。

<template><div class="app-container"><div class="box"><!-- 這就是動態組件，根據conName 值的變化，動態切換組件 --> <component :is="comName"></component></div></div>
</template><script>
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';
export default {data() {return {comName: 'Right',}},components: {Left,Right,}
}
</script>
</script>

注意：

有一個的前提條件：

所有要切換的組件，要先 import 導入和 components 注冊，之后才能進行組件的各種切換。

沒有提現提前 import 導入和 components 注冊的，無法切換。

keep-alive 保持組件的狀態

默認情況下，組件切換時，隱藏的組件會被銷毀，再次切換顯示時，所有的數據會變成默認的初始值。

vue 內置了 <keep-alive> 組件，保持動態組件的狀態。

示例：

App 組件中增加 <keep-alive>

 <keep-alive><component :is="comName"></component></keep-alive>

keep-alive 對應的生命周期函數

當組件被緩存時，會自動觸發組件的 deactivated 生命周期函數。

當組件被 激活 時，會自動觸發組件的 activated 生命周期函數。

Left 組件中，

<template><div class="left-container"><h3>Left 組件</h3>{{ count }}<br></br><button @click="count += 1"> +1</button></div>
</template><script>
export default {data() {return {count: 0}},created() {console.log("組件被創建 created ")},destroyed() {console.log("組件被 銷毀 destroyed")},activated() {console.log("Left 組件被 激活 activated")},deactivated() {console.log("Left 組件被 緩存 cache")},
}
</script>

效果圖：

keep-alive 的 include 、exclude 屬性

include ：只有 組件名稱 匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔
exclude ：除了指定的組件名稱 的組件不會被緩存外，其它組件都會被緩存。多個組件用逗號分隔。

include 和 exclude 只能二者一，不能同時使用。

注意：

include 和 exclude 的值是組件的名稱，組件名稱可以通過name進行修改的。如 name:'MyLeft' 。
<component :is="XXX"> 的 is 的值是 import 指定的名稱。

如：import Left from '...' 。Left 和 MyLeft 都是同一件組件，但是在不同的地方，值是不同。

示例：

<template><div class="app-container"> <keep-alive include="MyLeft"><component :is="comName"></component></keep-alive></div>
</template>
<script>
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';
export default {data() {return {comName: 'Left',}},components: {Left,Right,},
}
</script>

關于組件名稱的自定義

<template><div class="left-container"><h3>Left 組件</h3>       </div>
</template><script>
export default {name: 'MyLeft', // 指定組件的名稱data() {return {//....}},
}
</script>

4、插槽

4.1、什么是插槽

插槽（Slot）是 vue 為 組件的封裝者 提供的能力。允許開發者在封裝組件時，把 不確定的、希望由用戶指定的部分 定義為插槽。

插槽認為是組件封裝期間，為用戶預留的內容的 占位符 。

4.2、默認插槽

4.2.1、默認插槽的格式

自定義數據的格式

<組件名稱>自定義數據
</組件名稱>

定義插槽：

<slot></slot>

4.2.2、示例：

示例說明：

Left.vue 組件中定義了插槽，將App.vue 中自定義的數據傳入 Left.vue 的插槽中。

Aue.vue 自定義數據

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left><p>體驗插件的基本使用</p></Left></div></div>
</template><script>
import Left from '@/components/Left.vue';
export default {components: {Left,},
}
</script>

Left.vue 插槽：

<template><div class="left-container"><h3>Left 組件</h3><hr /><slot></slot></div>
</template>

效果圖如下：

說明：

如果 Left.vue 中沒有 <slot> ，那么 App.vue 中的 <Left> 內容 </Left> 標簽中自定義內容將會 被丟棄。

上面是沒有指定 name 名稱的插槽（其實也有默認名稱叫做 default ），這種插槽叫做 默認插槽 。

<slot></slot> 與 <slot name="default"></slot> 是完全是一樣的。

4.3、具名插槽

上面的例子中，只有一個插槽，無須指定插槽，就能使用。這是插槽的最簡單的使用。

實際業務要復雜得多，有多個插槽，每個插槽有名字，在定義數據時，要指指定渲染到哪個插槽中。

如果在封裝組件時需要預留多個插槽節點，則需要為每個插槽指定具體的 name 名稱。這種帶有具體名稱的插槽叫做 具名插槽。

格式：

<slot name="插槽名稱"></slot>

成熟組件中的插件案件：

網址: NavBar 導航欄

4.3.1、具名插槽的使用

Left.vue 組件中，定義3個插槽，代碼如下：

<template><div class="left-container"><h3>Left 組件</h3><header><!-- 第1個插槽 --><slot name="header"></slot></header><main><!-- 第2個插槽 --><slot></slot></main><footer><!-- 第3個插槽 --><slot name="footer"></slot></footer></div>
</template>

4.3.2、為具名插槽提供數據內容（具名插槽的數據模板）

具名插槽的數據模板的格式：

<template v-slot:插槽名稱r>
數據內容
</template>

說明：

數據內容必須要 組件的內部定義。比如 <Left> 數據模板</<Left> 標簽里面定義。
數據模板指定插槽名稱時，用v-slot:插槽名稱 。
每個名插槽的數據模板必須使用<template> 。
- <template>是一個虛擬的標簽，只起到包裹的作用，不會在渲染的頁面中出現。
- 不使用 <template> 包裹數據時，會拋出以下錯誤。

App.vue 中自定義數據，代碼如下。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><!--  在Left 組件里面，定義為插槽填充的數據內容  --><Left><template v-slot:header><p>體驗插件 -- header </p></template><template><p>體驗插件的基本使用</p></template><template v-slot:footer><p>體驗插件-- footer </p></template></Left></div></div>
</template>

運行效果如下：

4.3.3、具名插槽的數據模板的簡寫

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，把 v-slot: 替換為字符 #。

例如，v-slot:header 可以被重寫為 #header。

上一步，App.vue 的代碼重寫如下。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><!--  在Left 組件里面，定義為插槽填充的數據內容  --><Left><template #header><p>體驗插件 -- header </p></template><!-- 使用默認名稱時，可直接使用 <template>   --><template #default><p>體驗插件的基本使用</p></template><template #footer><p>體驗插件-- footer </p></template></Left></div></div>
</template>

4.4、作用域`插槽`

在封裝組件時，可以為 <slot> 插槽 綁定數據，就叫做 作用域插槽 。

作用域插槽 對外提供數據。
可綁定 props 和 data 中的所有類型的數據。

4.4.1、 `作用域插槽` 的定義格式

如下：

 <slot name="footer" key1="value1"  key2="value2"   ></slot>

在 Left.vue 中定義的 作用域插槽 的示例：

<template><div class="left-container"><h3>Left 組件</h3><footer><!-- 綁定3組數據，msg、hello、user, msg 是直接定義數據hello、user 是 引用 data中定義的數據--><slot name="footer" msg="Hello msg" :hello="hello" :user="user"></slot></footer></div>
</template><script>
export default {data() {return {hello: "hello world",user: {name: "zhangsan",age: 25}}}
}
</script>

說明：

msg 是直接定義數據。
hello、user 是引用 data中定義的數據。

4.4.2、使用 `作用域插槽`

作用域插槽 的數據會傳到 插槽的數據模板 的組件中，相當于 數據的子傳父。

接收作用域插槽 數據的格式：

<template v-slot:插槽名稱="自定義變量" >
或者簡寫為:
<template #插槽名稱="自定義變量" >

自定義變量是一個對象，默認是{} ，所有傳過來的數據都封裝成對象。

App.vue 組件示例：

App.vue 組件接收 Left.vue 作用域插件傳來的數據。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left><!--  無關的內容省略... -->         	 	<!-- data 就是接收作用域插槽的數據的變量名稱， 變量名稱是自定義，符合命名規則就行。但是，因為官方稱之為 作用域插槽，很多人把此變量名稱 起名為 scope。所有，我們要知道 scope 不是固定的，可以變化的。 --><template #footer="data"><p>體驗插件-- footer </p>{{ data }}<br><br>{{ data.msg }}<br>{{ data.hello }}<br>{{ data.user }}<br></template></Left></div></div>
</template>

4.4.3、解構作用域插槽的數據對象

作用域插槽對外提供的數據對象，可以使用{ } 進行 解構賦值 ，簡化數據的接收過程。

App.vue 組件的代碼優化：

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left>    	 		<!-- 解構作用域插槽的數據對象--><template #footer="{msg,hello,user }"><p>體驗插件-- footer </p>                   {{ msg }}<br>{{ hello }}<br>{{ user }}<br></template></Left></div></div>
</template>

運行效果圖：

5、自定義指令（directive）

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 還允許開發者 自定義指令。

vue 中的自定義指令分為兩類，分別是：

私有（自定義）指令
全局（自定義）指令

5.1、私有指令

5.1.1、私有指令的語法

私有指令的語法，分為兩步：

定義指令
使用指令

1）定義指令：

在 directives 節點下，聲明 定義指令。

<script>
export default {directives: {color: {bind(el) {el.style.color = 'blue';}}}
}
</script>

2）使用指令：

在<template> 中 使用指令。

<template><div v-color> 頁面內容</div>
</template>

5.1.2、入門使用1：最簡單的使用

<template><div class="app-container"><!--  2、使用名稱 color 的指令 --><h1 v-color>App 根組件</h1><hr />       </div>
</template><script>
export default {// 1、定義指令，名稱為color的指令directives: {color: {bind(el) {el.style.color = 'blue';}}}
}
</script>

5.1.3、入門使用2： `動態綁定參數`

動態參數可以在 data 中指定，或者 使用指令時指定（v-clor="'red'"）。
在指令中，可以通過形參中的第二個參數 binding，來取動態變化的參數值。

1）data中定義變量值

directives 中，定義指令；
data 中，定義動態參數；
<template> 中，使用指令；

<template><div class="app-container"><!--  3、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr />       </div>
</template><script>
export default {data() {return {//2、顏色參數colorData: 'blue'}},// 1、定義指令directives: {color: {bind(el, binding) {               el.style.color = binding.value}}}
}
</script>

2）使用v-color 時指定參數值

顏色的參數全部定義在 data，基實并不是太好。可以在使用v-color 時指定值。

directives 中，定義指令；
<template> 中，使用指令，并指定參數值。

注意：v-color="'red'" ，red 外層是雙引號，里面是 單引號，表示字符串，而不是 data 中的變量。

<template><div class="app-container"><!--  1、使用指令，并指定參數值（不同的顏色） -->        <h1 v-color="'red'"> 1111 </h1><h2 v-color="'green'"> 2222</h2><hr />       </div>
</template><script>
export default {// 1、定義指令directives: {color: {bind(el, binding) {               el.style.color = binding.value}}}
}
</script>

5.1.4、update 函數

bind 函數，只調用 1 次，當指令第一次綁定到元素時調用，當 DOM 更新時 bind 函數不會被觸發。

update 函數會在每次 DOM 更新時被調用。

示例1：

通過頁面按鈕，更改動態參數，不會被調用，顏色不會發生變化。

在日志中看出，在頁面渲染時，bind 函數，只調用 1 次。再點擊，沒有反應。

<template><div class="app-container"><!--  1、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button>        </div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color: {bind(el, binding) {console.log(binding)el.style.color = binding.value}}}
}
</script>

示例2：

增加 update 函數后，點擊按鈕，顏色發生變化。

看日志，bind 函數沒有日志，update 函數被調用，使顏色發生變化。

<template><div class="app-container"><!--  1、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button>       </div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color: {bind(el, binding) {console.log('bind')el.style.color = binding.value},update(el, binding) {console.log('update')el.style.color = binding.value}}}
}
</script>

5.1.5、指令函數的簡寫

由于，bing 和 update 函數中的邏輯完全相同，則簡寫成函數格式。

 // 1、定義指令directives: {color(el, binding) {el.style.color = binding.value}}

完整示例代碼：

<template><div class="app-container"><!--  1、使用指令,在data中定義變量值 --><h1 v-color="colorData"> 1111 </h1><!--  2、使用指令，直接指定變量值 --><h2 v-color="'blue'"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button></div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color(el, binding) {el.style.color = binding.value}}
}
</script>

5.2、全局指令

全局指令必須定義在 main.js 中，使手Vue.directive 進行定義。

方式1：

Vue.directive('color', {bind(el, binding) {       el.style.color = binding.value},update(el, binding) {        el.style.color = binding.value}
});

方式2（簡寫版，推薦使用）：

Vue.directive('color', function (el, binding) {el.style.color = binding.value
});

總結

以上是生活随笔為你收集整理的vue基础 —— 单网页版的Vue学习基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： python机器学习、数据分析常用第三方
下一篇：韩国Naver的胜利和Google的失败