一文聊聊vue中的指令和插值
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。（學習視訊分享：）
一、安裝vue
直接使用script標籤引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
登入後複製二、Vue模板案例
步驟
1、引入vue框架
2、定義1個盒子（根節點）
3、定義1個script標籤3.1、定義js物件（根元件）
3.2、通過vue建立1個應用
3.3、將應用掛載到根節點（第二步中建立的盒子）
data()：存放頁面中顯示資料的地方
<!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個盒子（根節點）-->
<div id='app'>
<h1>{{title}}</h1>
<h1>{{name}}</h1>
</div>
<!--3、定義一個script標籤-->
<script>
//3.1、定義js物件(根元件)
const obj={
//data():存放頁面中存放資料的地方
data(){
return{
title:'kobe',
name:'cc'
}
}
}
//3.2、通過vue建立1個應用
const app=Vue.createApp(obj)
//3.3、將應用掛載到根節點（第二步中建立的盒子）
app.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、{{}}：插值表示式的語法
{{}}：可以在html中參照data中定義的資料<h1>{{name}}</h1>
2、v-text：填充純文字內容（data中的值）
效果和innerText一樣<h1 v-text='name'></h1>
3、v-html：填充html（data中的值）
效果和innerHtml一樣<div v-html='desc'></div>
4、v-pre：填充原始資料
防止vue對標籤進行渲染（標籤中寫的什麼，就顯示什麼）<div v-pre>顯示兩個花括號，中間為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>顯示兩個花括號，中間為js：{{}}</div>
</div>
<script>
//obj是vue的元件物件
const obj={
//data方法（返回的是vue元件物件的屬性）——》頁面上要顯示的資料全部放到這裡
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建立1個應用
const app=Vue.createApp(obj)
//3.3、將應用掛載到根節點（第二步中建立的盒子）
app.mount('#app')
</script>
</body>
</html>登入後複製效果展示：
5、v-bind：屬性繫結
語法：
v-bind:屬性=‘值’
簡寫 :屬性=‘值’
<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
簡寫<a :href="aInfo.addr">{{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">{{aInfo.title}}</a>
<!--簡寫-->
<a :href="aInfo.addr">{{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：事件名稱=‘執行的方法’
簡寫
@事件名=‘執行的方法’
<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：定義頁面操作過程中呼叫的函數（vue元件的方法）
注意點：不要直接把方法定義為箭頭函數
例如
switchShow()
定義頁面操作過程中呼叫的函數（vue元件的方法）
注意點：不要直接把方法定義為箭頭函數
<!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({
//定義頁面上顯示資料的（元件的屬性）
data(){
return{
status:true
}
},
//定義頁面操作過程中呼叫的函數（vue元件的方法）
//注意點：不要直接把方法定義為箭頭函數
methods:{
switchShow(){
//在方法中可以通過this獲取元件中的資料
//方法中的this代表元件中的物件
this.status=!this.status
}
}
}).mount('#app')
</script>
</body>
</html>登入後複製8、v-model：資料的雙向繫結
雙向繫結只用於表單和元件
頁面修改資料會變，資料改變，頁面也會改
<!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(){
//傳送請求到後端，
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：遍歷物件、陣列
案例：根據不同的結果，展示不同文字顏色
<!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>登入後複製
（學習視訊分享：、）
以上就是一文聊聊vue中的指令和插值的詳細內容，更多請關注TW511.COM其它相關文章！
