1.插值運算式
目的: 在dom標簽中, 直接插入內容
又叫: 宣告式渲染/文本插值
語法: {{ 運算式 }}
<template>
<div>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>
<script>
export default {
data() { // 格式固定, 定義vue資料之處
return { // key相當于變數名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
<style>
</style>
2.vue指令-v-bind
目標: 給標簽屬性設定vue變數的值
vue指令, 實質上就是特殊的 html 標簽屬性, 特點: v- 開頭
每個指令, 都有獨立的作用
-
語法：
v-bind:屬性名="vue變數" -
簡寫：
:屬性名="vue變數"
<!-- vue指令-v-bind屬性動態賦值 -->
<a v-bind:href="url">我是a標簽</a>
<img :src="imgSrc">3.1vue指令-v-on
目標: 給標簽系結事件
-
語法
-
v-on:事件名="要執行的==少量代碼=="
-
v-on:事件名="methods中的函式"
-
v-on:事件名="methods中的函式(實參)"
-
-
簡寫: @事件名="methods中的函式"
<!-- vue指令: v-on事件系結-->
<p>你要買商品的數量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1個</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">減少</button>
<script>
export default {
// ...其他省略
methods: {
addFn(){ // this代表export default后面的組件物件(下屬有data里return出來的屬性)
this.count++
},
addCountFn(num){
this.count += num
},
subFn(){
this.count--
}
}
}
</script>3.2vue指令-v-on事件物件
目標: vue事件處理函式中, 拿到事件物件
-
語法:
-
無傳參, 通過形參直接接收
-
傳參, 通過$event指代事件物件傳給事件處理函式
-
<template>
<div>
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>3.3vue指令-v-on修飾符
目的: 在事件后面.修飾符名 - 給事件帶來更強大的功能
-
語法:
-
@事件名.修飾符="methods里函式"
-
.stop - 阻止事件冒泡
-
.prevent - 阻止默認行為
-
.once - 程式運行期間, 只觸發一次事件處理函式
-
-
<template>
<div @click="fatherFn">
<!-- vue對事件進行了修飾符設定, 在事件后面.修飾符名即可使用更多的功能 -->
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默認行為</a>
<button @click.once="btn">.once程式運行期間, 只觸發一次事件處理函式</button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被觸發");
},
btn(){
console.log(1);
}
}
}
</script>3.4vue指令-v-on按鍵修飾符
目標: 給鍵盤事件, 添加修飾符, 增強能力
-
語法:
-
@keyup.enter - 監測回車按鍵
-
@keyup.esc - 監測回傳按鍵
-
更多修飾符
-
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回車按鍵了");
},
escFn(){
console.log("esc按鍵了");
}
}
}
</script>4.1vue指令 v-model
目標: 把value屬性和vue資料變數, 雙向系結到一起
-
語法: v-model="vue資料變數"
-
雙向資料系結
-
資料變化 -> 視圖自動同步
-
視圖變化 -> 資料自動同步
-
<template>
<div>
<!--
v-model:是實作vuejs變數和表單標簽value屬性, 雙向系結的指令
-->
<div>
<span>用戶名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密碼:</span>
<input type="password" v-model="pass" />
</div>
<div>
<span>來自于: </span>
<!-- 下拉選單要系結在select上 -->
<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<!-- (重要)
遇到復選框, v-model的變數值
非陣列 - 關聯的是復選框的checked屬性
陣列 - 關聯的是復選框的value屬性
-->
<span>愛好: </span>
<input type="checkbox" v-model="hobby" value="抽煙">抽煙
<input type="checkbox" v-model="hobby" value="喝酒">喝酒
<input type="checkbox" v-model="hobby" value="寫代碼">寫代碼
</div>
<div>
<span>性別: </span>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
<div>
<span>自我介紹</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
sex: "",
intro: "",
};
// 總結:
// 特別注意: v-model, 在input[checkbox]的多選框狀態
// 變數為非陣列, 則系結的是checked的屬性(true/false) - 常用于: 單個系結使用
// 變數為陣列, 則系結的是他們的value屬性里的值 - 常用于: 收集勾選了哪些值
}
};
</script>
4.2vue指令 v-model修飾符
目標: 讓v-model擁有更強大的功能
-
語法:
-
v-model.修飾符="vue資料變數"
-
.number 以parseFloat轉成數字型別
-
.trim 去除首尾空白字符
-
.lazy 在change時觸發而非inupt時
-
-
<template>
<div>
<div>
<span>年齡:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介紹:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>5.vue指令 v-text和v-html
目的: 更新DOM物件的innerText/innerHTML
-
語法:
-
v-text="vue資料變數"
-
v-html="vue資料變數"
-
-
注意: 會覆寫插值運算式
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一個span標簽</span>"
}
}
}
</script>6.vue指令 v-show和v-if
目標: 控制標簽的隱藏或出現
-
語法:
-
v-show="vue變數"
-
v-if="vue變數"
-
-
原理
-
v-show 用的display:none隱藏 (頻繁切換使用)
-
v-if 直接從DOM樹上移除
-
-
高級
-
v-else使用
-
<template>
<div>
<!--原理： display：none -->
<h1 v-show="isok">v-show的盒子</h1>
<h2 v-if="istrue">v-if的盒子</h2>
<!-- v-if v-else v-else-if -->
<p v-if="age < 18">未成年</p>
<p v-else-if="age > 18 && age < 60">成年</p>
<p v-else>老年</p>
</div>
</template>
<script>
export default {
data() {
return {
isok: false,
istrue: true,
age: 15,
};
},
};
</script>
<style>
</style>7.1vue指令-v-for
目標: 串列渲染, 所在標簽結構, 按照資料數量, 回圈生成
-
語法
-
v-for="(值, 索引) in 目標結構"
-
v-for="值 in 目標結構"
-
-
目標結構:
-
可以遍歷陣列 / 物件 / 數字 / 字串 (可遍歷結構)
-
-
注意:
v-for的臨時變數名不能用到v-for范圍外
<template>
<div id="app">
<div id="app">
<!-- v-for 把一組資料, 渲染成一組DOM -->
<!-- 口訣: 讓誰回圈生成, v-for就寫誰身上 -->
<p>學生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
<p>學生詳細資訊</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- v-for遍歷物件(了解) -->
<p>老師資訊</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for遍歷整數(了解) - 從1開始 -->
<p>序號</p>
<div v-for="i in count" :key="i">{{ i }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小歡歡", "大黃"],
stuArr: [
{
id: 1001,
name: "孫悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "豬八戒",
sex: "男",
hobby: "背媳婦",
},
],
tObj: {
name: "小黑",
age: 18,
class: "1期",
},
count: 10,
};
},
};
</script>7.2v-for更新監測
目標: 當v-for遍歷的目標結構改變, Vue觸發v-for的更新
情況1: 陣列翻轉
情況2: 陣列截取
情況3: 更新值
口訣:
陣列變更方法, 就會導致v-for更新, 頁面更新
陣列非變更方法, 回傳新陣列, 就不會導致v-for更新, 可采用覆寫陣列或this.$set()
<template>
<div>
<ul>
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
</ul>
<button @click="revBtn">陣列翻轉</button>
<button @click="sliceBtn">截取前3個</button>
<button @click="updateBtn">更新第一個元素值</button>
</div>
</template>
<script>
export default {
data(){
return {
arr: [5, 3, 9, 2, 1]
}
},
methods: {
revBtn(){
// 1. 陣列翻轉可以讓v-for更新
this.arr.reverse()
},
sliceBtn(){
// 2. 陣列slice方法不會造成v-for更新
// slice不會改變原始陣列
// this.arr.slice(0, 3)
// 解決v-for更新 - 覆寫原始陣列
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
updateBtn(){
// 3. 更新某個值的時候, v-for是監測不到的
// this.arr[0] = 1000;
// 解決-this.$set()
// 引數1: 更新目標結構
// 引數2: 更新位置
// 引數3: 更新值
this.$set(this.arr, 0, 1000)
}
}
}
</script>
<style>
</style>這些方法會觸發陣列改變, v-for會監測到并更新頁面
-
push() -
pop() -
shift() -
unshift() -
splice() -
sort() -
reverse()
這些方法不會觸發v-for更新
-
slice() -
filter() -
concat() -
map()
注意: vue不能監測到陣列里賦值的動作而更新, 如果需要請使用Vue.set() 或者this.$set(), 或者覆寫整個陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328024.html
標籤：其他