vue的指令和插值問題匯總
更新時(shí)間：2022年10月23日 11:57:32 作者：YZL40514131
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
一、安裝vue
直接使用script標(biāo)簽引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
二、Vue模板案例
步驟
1、引入vue框架
2、定義1個(gè)盒子（根節(jié)點(diǎn)）
3、定義1個(gè)script標(biāo)簽3.1、定義js對象（根組件）
3.2、通過vue創(chuàng)建1個(gè)應(yīng)用
3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
data()：存放頁面中顯示數(shù)據(jù)的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--2、定義1個(gè)盒子（根節(jié)點(diǎn)）-->
<div id='app'>
<h1>{{title}}</h1>
<h1>{{name}}</h1>
</div>
<!--3、定義一個(gè)script標(biāo)簽-->
<script>
//3.1、定義js對象(根組件)
const obj={
//data():存放頁面中存放數(shù)據(jù)的地方
data(){
return{
title:'kobe',
name:'cc'
}
}
}
//3.2、通過vue創(chuàng)建1個(gè)應(yīng)用
const app=Vue.createApp(obj)
//3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
app.mount('#app')
</script>
</body>
</html>三、基礎(chǔ)模板（記?。?/h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'></div>
<script>
Vue.createApp({
data(){
return{
}
}
}).mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'></div>
<script>
Vue.createApp({
data(){
return{
}
}
}).mount('#app')
</script>
</body>
</html>
四、vue的指令和插值
1、{{}}：插值表達(dá)式的語法
{{}}：可以在html中引用data中定義的數(shù)據(jù)
<h1>{{name}}</h1>2、v-text：填充純文本內(nèi)容（data中的值）
效果和innerText一樣
<h1 v-text='name'></h1>
3、v-html：填充html（data中的值）
效果和innerHtml一樣
<div v-html='desc'></div>
4、v-pre：填充原始數(shù)據(jù)
防止vue對標(biāo)簽進(jìn)行渲染（標(biāo)簽中寫的什么，就顯示什么）
<div v-pre>顯示兩個(gè)花括號，中間為js：{{}}</div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{sex}}</h1>
<h2>info中的a1:{info.a1}</h2>
<h2>info中的a2:{info.a2}</h2>
<hr>
<h1 v-text='name'></h1>
<h1 v-text='arr[0]'></h1>
<div v-html='desc'></div>
<div v-pre>顯示兩個(gè)花括號，中間為js：{{}}</div>
</div>
<script>
//obj是vue的組件對象
const obj={
//data方法（返回的是vue組件對象的屬性）——》頁面上要顯示的數(shù)據(jù)全部放到這里
data(){
return{
name:'2022',
age:18,
sex:'男',
info:{
a1:'66',
a2:'88'
},
desc:'<h1>js</h1>',
arr:[8,24,23,24,25,66]
}
}
}
//3.2、通過vue創(chuàng)建1個(gè)應(yīng)用
const app=Vue.createApp(obj)
//3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
app.mount('#app')
</script>
</body>
</html>
效果展示：
5、v-bind：屬性綁定
語法：
v-bind:屬性=‘值’
簡寫 :屬性=‘值’
<a v-bind:href="aInfo.addr" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a>簡寫
<a :href="aInfo.addr" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<a v-bind:href="aInfo.addr" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a>
<!--簡寫-->
<a :href="aInfo.addr" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{aInfo.title}}</a>
</div>
<script>
Vue.createApp({
data(){
return{
aInfo:{
title:'百度',
addr:'http://www.baidu.com'
}
}
}
}).mount('#app')
</script>
</body>
</html>
樣式綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.js{
width:200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<div id='app'>
<!--樣式綁定：class屬性綁定-->
<div :class='{js:isjs}'>js</div>
</div>
<hr />
<!--樣式綁定 style屬性-->
<div :style="s1">py</div>
<script>
Vue.createApp({
data(){
return{
isjs:false,
s1:{
width:'300px',
height:'200px',
background:'red',
}
}
}
}).mount('#app')
</script>
</body>
</html>
6、v-on：事件綁定
語法：v-on：事件名稱=‘執(zhí)行的方法’
簡寫
@事件名=‘執(zhí)行的方法’
<button v-on:click='switchShow'>切換顯示</button>
簡寫<button @click='switchShow'>切換顯示</button>
7、v-show：控制元素顯示和隱藏的指令
控制元素顯示隱藏的指令：
v-show 值為True則顯示，值為false為隱藏
<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>methods：定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
例如
switchShow()
定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<button v-on:click='switchShow'>切換顯示</button>
<!--<button @click='switchShow'>切換顯示</button>-->
<!--控制元素顯示隱藏的指令：v-show
值為True則顯示，值為false為隱藏
-->
<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
</div>
<script>
Vue.createApp({
//定義頁面上顯示數(shù)據(jù)的（組件的屬性）
data(){
return{
status:true
}
},
//定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法）
//注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
methods:{
switchShow(){
//在方法中可以通過this獲取組件中的數(shù)據(jù)
//方法中的this代表組件中的對象
this.status=!this.status
}
}
}).mount('#app')
</script>
</body>
</html>
8、v-model：數(shù)據(jù)的雙向綁定
雙向綁定只用于表單和組件
頁面修改數(shù)據(jù)會(huì)變，數(shù)據(jù)改變，頁面也會(huì)改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--屬性綁定是單向的-->
<!--<div id='app'>
<div>賬號:<input type="text" :value='user'></div>
<div>密碼:<input type="password" :value='pwd'></div>
</div>-->
<!--雙向綁定-->
<div id='app'>
<div>賬號:<input type="text" v-model='user'></div>
<div>密碼:<input type="password" v-model='pwd'></div>
<button @click='login'>登錄</button>
</div>
<script>
Vue.createApp({
data(){
return{
user:"root",
pwd:123456
}
},
methods:{
login(){
//發(fā)送請求到后端，
console.log('提交了登錄')
console.log(this.user,this.pwd)
}
}
}).mount('#app')
</script>
</body>
</html>
9、v-if、v-else-if、v-else：條件渲染
通過條件來控制元素是否渲染到頁面
v-if
v-else-if
v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<h1 v-if='item.result==="success"' style="color: green;">{{item}}</h1>
<h1 v-else-if='item.result===fail' style="color: red;">{{item}}</h1>
<h1 v-else>{{item}}</h1>
</div>
<script>
Vue.createApp({
data(){
return{
item:{
case_id:1,
title:'用例1',
result:"success"
},
}
}
}).mount('#app')
</script>
</body>
</html>
10、v-for：遍歷對象、數(shù)組
案例：根據(jù)不同的結(jié)果，展示不同文字顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1、引入vue框架-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id='app'>
<table border='1'>
<!--表頭-->
<tr>
<th>id</th>
<th>title</th>
<th>result</th>
<th>操作</th>
</tr>
<!--表格-->
<tr v-for='item in cases'>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<!--條件渲染-->
<td v-if='item.result==="success"' style="color: green;">{{item.result}}</td>
<td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td>
<td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td>
<td v-else>{{item.result}}</td>
<td></td>
</tr>
</table>
</div>
<script>
Vue.createApp({
data(){
return{
cases:[
{
case_id:1,
title:'用例1',
result:"success"
},
{
case_id:2,
title:'用例2',
result:"fail"
},
{
case_id:3,
title:'用例3',
result:"error"
},
{
case_id:4,
title:'用例4',
result:"success"
},
]
}
}
}).mount('#app')
</script>
</body>
</html>
到此這篇關(guān)于vue的指令和插值總結(jié)的文章就介紹到這了,更多相關(guān)vue指令和插值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法
這篇文章主要介紹了Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue引入ueditor及node后臺配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-10-10
這篇文章主要給大家分享了 v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞 v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼 需要的小伙伴可以參考一下，希望對大家有所幫助2022-10-10
vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了vue之computed的緩存特性,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11