解讀Vue實(shí)例的屬性及模板渲染
1 概述
Vue.js是通過new Vue({...})來聲明一個(gè)實(shí)例的，在這個(gè)實(shí)例中包含了當(dāng)前頁面的HTML結(jié)構(gòu)、數(shù)據(jù)和事件。
Vue實(shí)例是MVVM模式中的ViewModel，實(shí)現(xiàn)了數(shù)據(jù)和視圖的雙向綁定。
在實(shí)例化時(shí)可以傳入一個(gè)選項(xiàng)對象，它包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子函數(shù)等選項(xiàng)。
2 el：與DOM元素綁定
el是element的簡寫，用來和DOM元素進(jìn)行綁定，對應(yīng)的是DOM元素的id屬性值（類似id選擇器）。
用法如下：
<div id="xxx"></div>
<script>
var vm = new Vue({
el: "#xxx" // xxx為id名
})
</script>3 data：定義雙向綁定的數(shù)據(jù)
在Vue實(shí)例中初始化的data中的所有數(shù)據(jù)會(huì)自動(dòng)進(jìn)行監(jiān)聽綁定，可以使用兩個(gè)大括號(hào) {{}} 來綁定data中的數(shù)據(jù)。
用法如下：
<div id="xxx"></div>
<script>
var vm = new Vue({
el: "#xxx",
data: {
健: 值
}
})
</script>健為屬性的名稱，值為初始值。
示例代碼：
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model="message">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "橘貓吃不胖"
}
})
</script>
如果在輸入框中輸入其他內(nèi)容，h2標(biāo)簽也會(huì)顯示該內(nèi)容，vue與h2標(biāo)簽的綁定是單向的，與input標(biāo)簽的綁定是雙向的。
注：data中的數(shù)據(jù)都是淺拷貝。這意味著，如果修改原來的對象也會(huì)改變data，從而觸發(fā)更新事件。
4 computed：計(jì)算屬性
computed是計(jì)算屬性，當(dāng)我們要用到的屬性不存在，需要通過已有屬性計(jì)算得來，這時(shí)使用計(jì)算屬性。computed底層借助了Object.defineproperty方法提供的getter和setter來實(shí)現(xiàn)。
使用方法可以跟data中的屬性一樣使用，注意用的時(shí)候不要加“()”。
它是data屬性的補(bǔ)充。在進(jìn)行數(shù)據(jù)綁定的時(shí)候，對數(shù)據(jù)要進(jìn)行一定的處理才能展示到HTML頁面上。
雖然Vue提供了非常好的表達(dá)式綁定方法，但是只能應(yīng)對低強(qiáng)度的需求。
用法如下：
<div id="xxx"></div>
<script>
var vm = new Vue({
el: "#xxx",
computed: {
方法名: function () {}
}
})
</script>例如，把一個(gè)日期按照規(guī)定格式進(jìn)行輸出，可能就需要對日期對象做一些格式化。
Vue提供的計(jì)算屬性（computed）允許開發(fā)者編寫一些方法，協(xié)助進(jìn)行綁定數(shù)據(jù)的操作。
<div id="app">
<table>
<tr>
<td>姓名：</td>
<td>{{name}}</td>
</tr>
<tr>
<td>生日：</td>
<td>{{getBirthday}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "橘貓吃不胖",
birthday: 1014228510514 // 傳了一個(gè)毫秒數(shù)
},
computed: { // 計(jì)算屬性，對data中的數(shù)據(jù)進(jìn)行處理
getBirthday: function () { // getBirthday就是表格中的{{getBirthday}}，其本質(zhì)是一個(gè)屬性
let date = new Date(this.birthday);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
}
}
})
</script>
每一個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter。
上面的示例是計(jì)算屬性的默認(rèn)用法， 只是利用了getter來讀取。在需要時(shí)，也可以提供一個(gè)setter函數(shù)， 當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作。
getter函數(shù)執(zhí)行的時(shí)機(jī)：
（1）初次讀取時(shí)會(huì)執(zhí)行一次
（2）當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用
計(jì)算屬性computed優(yōu)勢：與methods實(shí)現(xiàn)相比，它的內(nèi)部有緩存機(jī)制，計(jì)算屬性只有在它相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值，效率更高，調(diào)試方便。
注意：
（1）計(jì)算屬性最終會(huì)出現(xiàn)在Vue實(shí)例vm上，直接讀取使用即可
（2）如果計(jì)算屬性要被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變
示例：在輸入框中分別輸入姓和名，最后將全名顯示在頁面上，感受getter方法；在控制臺(tái)中修改全名，感受setter方法。
<div id="app">
姓：<input type="text" v-model="xing"><br><br>
名：<input type="text" v-model="ming"><br><br>
你的姓名是：{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
xing: "", // 初始值為空
ming: ""
},
computed: {
fullName: {
get() {
return this.xing + "-" + this.ming; // 返回值為全名
},
set(value) {
let arr = value.split("-");
this.xing = arr[0];
this.ming = arr[1];
}
}
}
})
</script>如下所示，在輸入框中輸入姓和名，會(huì)將全名顯示在下方。
如果在控制臺(tái)中修改全名，會(huì)修改掉輸入框中的值。
5 methods：定義Vue實(shí)例的方法
methods需要搭配v-on指令來監(jiān)聽DOM事件，我們在methods對象中定義方法，最終會(huì)在Vue實(shí)例上，其中的this會(huì)指向Vue的實(shí)例vm，因此其中配置的函數(shù)不可以使用箭頭函數(shù)，否則會(huì)改變this的指向。
用法如下：
<div id="xxx"></div>
<script>
var vm = new Vue({
el: '#xxx',
methods: {
方法名: function () { }
}
})
</script>示例代碼：
<div id="app">
<p>原始字符串："{{ message }}"</p>
<p>反向字符串："{{ reversedMessage()}}"</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '橘貓吃不胖'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
6 Vue中的三種模板
6.1 html模板
- html模板：基于DOM的模板，模板都是可解析的有效的HTML插值
- 文本：使用{{ }}語法，作用：替換實(shí)例上的屬性值，當(dāng)值改變時(shí)，插值內(nèi)容處會(huì)自動(dòng)更新
- 原生的html：雙大括號(hào)輸出的是文本，不會(huì)解析html（想要解析html，可以使用指令v-html）
- 屬性：使用v-bind進(jìn)行綁定，可以響應(yīng)變化
<div id="wrap">
<p>你的名字是{{list.name}}</p>
</div>
<script>
var list = {
name: "donna",
age: 20
}
var vm = new Vue({
el: "#wrap",
data: { list }
});
</script>
6.2 字符串模板
先定義字符串模板，然后在vue 的選項(xiàng)對象里面利用template綁定。字符串模板的優(yōu)先級會(huì)比html模板高，如果html和字符串模板中都有內(nèi)容，會(huì)用字符串模板里的內(nèi)容替換html模板。需要注意的是定義的字符串模板中根節(jié)點(diǎn)只能有一個(gè)。還有字符串用 ` 引起來是可以換行的。
示例代碼：
<div id="app"></div>
<script>
let obj = {
content: "橘貓吃不胖"
}
let str = `<div>Hello {{content}}</div>`;
new Vue({
el: "#app",
data: obj,
template: str
})
</script>
除了用變量定義模板字符串，還可以用script標(biāo)簽，給script 標(biāo)簽定義id，根節(jié)點(diǎn)只能有一個(gè)，將html結(jié)構(gòu)寫在一對script標(biāo)簽中，設(shè)置type=“x-template”，模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略。Vue實(shí)例的template屬性設(shè)置為給定的script標(biāo)簽
示例代碼：
<div id="app"></div>
<script type="x-template" id="test">
<div>
<p>姓名：{{obj.name}}</p>
</div>
</script>
<script>
let obj = {
name: "張三"
}
new Vue({
el: "#app",
data: { obj },
template: "#test"
})
</script>
6.3 render函數(shù)模板
render(createElement){
createElement(標(biāo)簽名,[數(shù)據(jù)對象],子元素)//子元素為數(shù)組或?qū)ο?
}數(shù)據(jù)對象的屬性：
class:{ }, //綁定class
style:{ }, //綁定樣式，
attrs:{ }, //添加行間屬性
domProps:{ }, //DOM元素屬性
on:{ }, //綁定事件示例代碼：
<div id="app"></div>
<style>
.bg {
background-color: pink;
}
</style>
<script>
new Vue({
el: "#app",
render(createElement) {
return createElement(
"ul",
{
class: { bg: true },
style: { listStyle: "none" },
attrs: {
name: "tt"
}
},
[
createElement("li", "蘋果"),
createElement("li", "香蕉"),
createElement("li", "橘子")
]
)
}
})
</script>
7 watch屬性
watch屬性用來觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)，watch屬性是一個(gè)配置對象，它有兩個(gè)屬性：一個(gè)是鍵，一個(gè)是值。
鍵是需要觀察的表達(dá)式，值可以為以下形式：
- 對應(yīng)的回調(diào)函數(shù)，回調(diào)函數(shù)得到的參數(shù)為新值和舊值。
- 方法名稱的字符串（通過
methods聲明） - 包含額外選項(xiàng)的對象。當(dāng)使用對象語法時(shí)，回調(diào)函數(shù)應(yīng)被聲明在
handler中。額外的選項(xiàng)包含：
| 選項(xiàng) | 說明 |
|---|---|
| immediate | 在初始化時(shí)立即調(diào)用回調(diào)函數(shù)handler。第一次調(diào)用時(shí)，舊值將為undefined |
| deep | 如果源是對象或數(shù)組，則強(qiáng)制深度遍歷源，以便在深度變更時(shí)觸發(fā)回調(diào) |
| flush | 調(diào)整回調(diào)的刷新時(shí)機(jī) |
| onTrack / onTrigger | 調(diào)試偵聽器的依賴關(guān)系 |
new Vue({
...
watch: {
// 值為回調(diào)函數(shù)形式，newVal表示新的值，oldVal表示舊的值
要監(jiān)視的數(shù)據(jù): function (newVal, oldVal) { }
// 值為方法名形式：
要監(jiān)視的數(shù)據(jù): "methods中聲明的方法名"
// 值為包含額外選項(xiàng)的對象：
要監(jiān)視的數(shù)據(jù): {
immediate: xxx,
handler(newVal, oldVal) {},
deep: xxx,
}
}
})示例：點(diǎn)擊按鈕給屬性a做減法，監(jiān)聽新值與舊值。
<div id="app">
<button @click="a--">減1</button>
<p>{{message}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
a: 10,
message: " ",
},
watch: {
a: function (val, oldVal) {
this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
}
}
})
</script>
或者使用Vue實(shí)例中的$watch()，也可以達(dá)到監(jiān)視效果，該方法的返回值是一個(gè)取消觀察函數(shù)，用來停止觸發(fā)回調(diào)，用法如下：
// 完整形式
const vm = new Vue({ })
// unwatch：取消觀察函數(shù)
let unwatch = vm.$watch("要監(jiān)視的對象", {
immediate: true, // 配置一些屬性
...
handler(newVal, oldVal) { // 回調(diào)函數(shù)
unwatch(); // 停止監(jiān)聽對象
}
})
// 簡寫形式
const vm = new Vue({ })
// unwatch：取消觀察函數(shù)
let unwatch = vm.$watch("要監(jiān)視的對象", function (newVal, oldVal) {}
})
示例：點(diǎn)擊按鈕給屬性a做減法，監(jiān)聽新值與舊值。當(dāng)值為5時(shí)，停止監(jiān)聽。
<div id="app">
<button @click="a--">減1</button>
<p>{{message}}</p>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
a: 10,
message: " ",
}
})
let unwatch = vm.$watch("a", {
handler(val, oldVal) {
if (val === 5) {
unwatch();
}
this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
}
})
</script>
computed與watch的區(qū)別
- computed能完成的功能，watch都可以完成；watch能完成的功能，computed不一定能完成。
- 例如：watch可以進(jìn)行異步操作（使用setTimeout函數(shù)）。
8 模板渲染
8.1 條件渲染
條件渲染分為兩種方式，一種是v-if，另一種是v-show。v-if又分為單路分支、雙路分支和多路分支。只有if后面的值為true時(shí)才會(huì)有DOM元素，為false時(shí)不會(huì)有DOM元素
1、v-if方式渲染：在<template>中配合v-if渲染，在使用v-if控制元素的時(shí)候，需要將它添加到這個(gè)元素上。然而，如果需要切換很多元素時(shí)，一個(gè)一個(gè)添加比較麻煩。這時(shí)，可以使用<template></template>將一組元素進(jìn)行包裹
<div id="app">
<template v-if="yes">
<h2>vue</h2>
</template>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
yes: true
}
})
</script>
2、v-show方式渲染：用法與v-if大致相同
8.2 列表渲染
列表渲染用v-for指令根據(jù)一組數(shù)據(jù)的選項(xiàng)列表進(jìn)行渲染。v-for指令需要采用item in items 形式的特殊語法，其中items是源數(shù)據(jù)
<div class="app">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
<script>
new Vue({
el: '.app',
data: {
items: [
{ text: 'Name'},
{ text: 'Age'},
{ text: 'Like'}
]
}
})
</script>
可以使用v-for迭代對象的屬性
<div class="app">
<ul>
<li v-for="item in obj">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '.app',
data: {
obj: {
firstname: '歐陽',
lastname: '靜靜',
age:18
}
}
})
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3對比Vue2的優(yōu)點(diǎn)總結(jié)
vue3解決了vue2的一些缺陷與弊端，學(xué)習(xí)新的技術(shù)是很有必要的，本文總結(jié)了一些vue3的優(yōu)點(diǎn)，希望各位能盡快轉(zhuǎn)入vue3的使用中2021-06-06
這篇文章主要介紹了vue 中slot 的具體用法,包括子組件父組件的代碼介紹，需要的朋友可以參考下2018-04-04
element-plus日歷(Calendar)動(dòng)態(tài)渲染以及避坑指南
這篇文章主要給大家介紹了關(guān)于element-plus日歷(Calendar)動(dòng)態(tài)渲染以及避坑指南的相關(guān)資料,這是最近幫一個(gè)后端朋友處理一個(gè)前端問題,elementUI中calendar日歷組件內(nèi)容進(jìn)行自定義顯示,實(shí)現(xiàn)類似通知事項(xiàng)的日歷效果,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue?iview封裝模態(tài)框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue?element-ui?Radio單選框默認(rèn)值選不中的原因:混用字符和數(shù)字問題
這篇文章主要介紹了vue?element-ui?Radio單選框默認(rèn)值選不中的原因:混用字符和數(shù)字問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue3中ref動(dòng)態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下2024-01-01
這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法詳解
這篇文章主要介紹了vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法,結(jié)合實(shí)例形式詳細(xì)描述了中文亂碼問題的原因、解決方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-06-06