class與style綁定
- class 綁定
對象
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>class綁定</title>
<style>
.coloractive {
color: red;
}
.bgactive {
background-color: green;
}
.box {
width: 150px;
height: 150px;
background-color: #f66;
position: relative;
}
.active {
position: absolute;
top: 3px;
left: 3px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>
<div id="app">
<div class="coloractive bgactive">樣式的寫法</div>
<div class="coloractive" :class="{ bgactive: flag}">class對象的綁定</div>
<div class="box" v-for="item of list">
<div :class="{ active: item.flag }">{{ item.msg }}</div>
</div>
</div></body><script>
// 如果樣式的名稱是后端給你提供的class的名字，前端不能直接寫，此時就可以使用class綁定
// 場景： 產品列表中的 hot 、 秒殺、....，后端會給你傳遞一個標識，前端可以依據這個標識搞事情
// class 綁定有兩種形式
// 對象
new Vue({
el: '#app',
data: {
list: [{
flag: true,
msg: '秒殺'
},
{
flag: false,
msg: ''
},
{
flag: true,
msg: '熱推'
}]
}
})
</script></html>數組
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>class綁定</title>
<style>
.class1 {
font-size: 32px;
color: #f66;
}
.class2 {
background-color: #ccc;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>
<div id="app">
<div class="class1 class2">class數組寫法</div>
<div :class="[classa, classb]">class數組寫法</div>
</div></body><script>
new Vue({
el: '#app',
data: {
classa: 'class1',
classb: 'class2'
}
})
</script></html>- 作業：查看api 熟練使用style綁定對象形式和數組形式
條件判斷
v-if v-else-if v-else
v-show
注意審查元素查看效果
<body>
<div id="app">
<div v-if="flag">如果為真我就顯示</div>
<div v-if="Math.random() < 0.2"> 0.2 </div>
<div v-else-if="Math.random() < 0.8"> 0.8 </div>
<div v-else="Math.random() < 1"> 1 </div>
<div v-show="flag">如過為真我就顯示</div>
</div></body><script>
new Vue({
el: '#app',
data: {
flag: false
}
})
</script>作業： 什么時候使用v-if，什么時候使用v-show
列表渲染
v-for
key ********************************************
key 不可以重復、key可以為 用戶id、產品id，**id，因為id具有唯一性
node項目中使用uuid確保id是不重復的
? 思考， js中 數組可以遍歷，對象能不能遍歷，字符串能不能遍歷
key
<body>
<div id="app">
<ul>
<li v-for="item in arr1">{{ item }}</li>
</ul>
<ul>
<li v-for="(item, index) in arr1" :key="index">{{ item }}</li>
</ul>
<ul>
<li v-for="(item, index) of arr1" :key="item">{{ item }}</li>
</ul>
</div></body><script>
var app = new Vue({
el: '#app',
data: {
arr1: ['a', 'b', 'c']
}
})
</script>多層遍歷
<body>
<div id="app">
<h1>遍歷數組 無key值</h1>
<ul>
<li v-for="item in arr1">{{ item }}</li>
</ul>
<h1>遍歷數組 key值為索引值</h1>
<ul>
<li v-for="(item, index) in arr1" :key="index">{{ item }}</li>
</ul>
<h1>遍歷數組 key值為唯一值</h1>
<ul>
<li v-for="(item, index) of arr1" :key="item">{{ item }}</li>
</ul>
<h1>遍歷對象數組</h1>
<ul>
<li v-for="item of arr2" :key="item.bannerid">
<img :src="item.img" alt="">
</li>
</ul>
<h1>多層遍歷，內層循環換個變量名和索引值是為了區分</h1>
<ul>
<li v-for="(item, index) of arr3" :key="index">
<h1>{{ item.brand }}</h1>
<ol>
<li v-for="(itm, idx) of item.list" :key="idx">
{{ itm }} - {{ item.brand }}
</li>
</ol>
</li>
</ul>
</div></body><script>
var app = new Vue({
el: '#app',
data: {
arr1: ['a', 'b', 'c'],
arr2: [{ bannerid: 'banner_1', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/89951/22/13835/67854/5e64a4b8E84c207d9/7367dad332fe905b.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }, { bannerid: 'banner_2', img: 'https://imgcps.jd.com/ling4/1670651/6Z2i6Iac55yB5b-D55yB5Yqb/5ZOB6LSo5rqQ5LqO5Y2T6LaK/p-5c13869682acdd181deeff08/2d409b2d/cr_1125x445_0_171/s1125x690/q70.jpg', href: '', alt: '' }, { bannerid: 'banner_3', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/88149/40/14147/100076/5e6229a8Ef51e1321/54e2c5dd2c357e1e.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }, { bannerid: 'banner_4', img: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/93827/39/13300/60640/5e561c60Edd0d8e34/73428f511893f63e.jpg!cr_1125x445_0_171!q70.jpg.dpg', href: '', alt: '' }],
arr3: [{
brand: '寶馬',
list: ['X5', 'X6']
},{
brand: '奧迪',
list: ['Q7', 'A8']
}]
}
})
</script>事件處理
- 事件處理-行內
<body>
<div id="app">
<h3>計數器</h3>
<div>
<button v-on:click="count += 1">點擊</button> {{ count }} 次
</div>
<h3>案例 --- 簡單業務邏輯可以考慮使用 行內的事件處理</h3>
<ul>
<li v-for="(item, index) of list" :key="index">
{{ item.name }} -
<button :disabled="item.num === 1" @click="item.num > 1 ? item.num -= 1: item.num = 1">-</button>
{{ item.num }}
<button @click="item.num += 1">+</button>
</li>
</ul>
</div></body><script>
new Vue({
el: '#app',
data: {
count: 0,
list: [
{
name:'aaa',
num:1
},
{
name:'bbb',
num:2
}
]
}
})
</script>總結：這也就是玩一玩而已，項目中一般不要使用，比如上一個案例，如果點擊 加 ，先向服務器發起更新數據庫的操作，得到回應后采取改變視圖
- 事件處理-方法
不傳參可以不寫（），要傳參就傳對象
<body>
<div id="app">
<h3>計數器</h3>
<div>
<button v-on:click="countfn">點擊</button> {{ count }} 次
</div>
<h3>案例 -- 傳對象</h3>
<ul>
<li v-for="(item, index) of list" :key="index">
{{ item.name }} -
<button :disabled="item.num === 1" @click=" reduce(item)">-</button>
{{ item.num }}
<button @click="add(item)">+</button>
</li>
</ul>
</div></body><script>
new Vue({
el: '#app',
data: {
count: 0,
list: [
{
name:'aaa',
num:1
},
{
name:'bbb',
num:2
}
]
},
methods: { // vue自定義的事件
countfn () {
this.count += 1
},
reduce (item) {
// 服務器發起請求 --- 成功
item.num > 1 ? item.num -= 1 : item.num = 1
},
add (item) {
// 服務器發起請求 --- 成功
item.num += 1
}
}
})
</script>- 事件處理 - 事件對象
不傳參，方法默認參數為事件對象
傳遞參數，並且獲取事件對象 - $event
? 思考：一般使用事件對象解決什么問題？ ---- 復習js中的事件對象
阻止默認事件、阻止冒泡、獲取鼠標位置、獲取事件源、獲取DOM節點，傳遞數據，確定按鍵.........
利用事件對象阻止冒泡
雖然可以利用事件對象解決冒泡問題，但是你還使用了 event事件對象
事件修飾符
常用的事件修飾符
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --><form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 --><!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --><!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<!-- 這個 .passive 修飾符尤其能夠提升移動端的性能。 --><div v-on:scroll.passive="onScroll">...</div>不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。
按鍵修飾符
表單的數據綁定
v-model
如果 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。
<body>
<div id="app">
<div>
用戶名：
<input type="text" v-mode="username" /> {{ username }}
</div>
<div>
密碼：
<input type="password" v-model="password" /> {{ password }}
</div>
<div>
性別：
<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女
</div>
<div>
愛好：
<input type="checkbox" value="籃球" v-model="hobby">籃球
<input type="checkbox" value="排球" v-model="hobby">排球
<input type="checkbox" value="足球" v-model="hobby">足球
<input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
</div>
<div>
階段
<select v-model="lesson">
<option disabled value="">請選擇</option>
<option value="一階段">一階段</option>
<option value="二階段">二階段</option>
<option value="三階段">三階段</option>
</select>
</div>
<div>
備注：
<textarea v-model="note"></textarea>
</div>
<div>
<input type="checkbox" v-model='flag'>同意***協議
{{ flag }}
</div>
<button @click="login">登陸</button>
</div></body><script>
var app = new Vue({
el: '#app',
data: { // Vue 實例也代理了 data 對象上所有的屬性
username: '大勛勛',
password: '123456',
sex: '1',
hobby: [], // 多選 --- 初始化數據為 數組
lesson: '',
note: '',
flag: false // 選中還是未選中 - 單選 -- 初始化為boolean
},
methods: {
login () {
this.flag ? console.log({
username: this.username,
password: this.password,
sex: this.sex === '1' ? '男' : '女',
hobby: this.hobby,
lesson: this.lesson,
note: this.note
}) : console.log('請先勾選同意此協議')
}
}
})
console.log(app.username)
console.log(app.$data.username)
</script>追加修飾符 lazy / number / trim
一般使用 trim 為居多
玩表單 不忘 v-model
v-model 有特殊
特殊1 checkbox 數組表多選 bool表單選
特殊2 select 不選第一項
計算屬性
任何復雜的業務邏輯，我們都應當使用計算屬性
計算屬性具有依賴性，只有依賴的那個值發生了改變，計算屬性才會重新計算，原數據不變，計算屬性就不會執行 --- 緩存
所有的計算屬性被包含在computed選項中
計算屬性其實就是一個函數，必須得返回一個值，使用形式形如data中的數據
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單輸入綁定</title>
<style>
.error {
color: #f00
}
.success {
color: #0f0
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>
<div id="app">
<div>
用戶名：
<input type="text" v-model.trim="username" /> {{ username }} - <span v-html="usernametip"></span>
</div>
<div>
密碼：
<input type="password" v-model="password" /> {{ password }}
</div>
<div>
性別：
<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女
</div>
<div>
愛好：
<input type="checkbox" value="籃球" v-model="hobby">籃球
<input type="checkbox" value="排球" v-model="hobby">排球
<input type="checkbox" value="足球" v-model="hobby">足球
<input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
</div>
<div>
階段
<select v-model="lesson">
<option disabled value="">請選擇</option>
<option value="一階段">一階段</option>
<option value="二階段">二階段</option>
<option value="三階段">三階段</option>
</select>
</div>
<div>
備注：
<textarea v-model="note"></textarea>
</div>
<div>
<input type="checkbox" v-model='flag'>同意***協議
{{ flag }}
</div>
<button @click="login">登陸</button>
</div></body><script>
var app = new Vue({
el: '#app',
data: { // Vue 實例也代理了 data 對象上所有的屬性
username: '',
password: '',
sex: '1',
hobby: [], // 多選 --- 初始化數據為 數組
lesson: '',
note: '',
flag: false // 選中還是未選中 - 單選 -- 初始化為boolean
},
computed: { // 計算屬性
usernametip () {
if (this.username === '') {
return '<span>請輸入用戶名</span>'
}
if (this.username.length < 6) {
return '<span class="error">用戶名格式錯誤</span>'
} else {
return '<span class="success">ok</span>'
}
}
},
methods: {
login () {
this.flag ? console.log({
username: this.username,
password: this.password,
sex: this.sex === '1' ? '男' : '女',
hobby: this.hobby,
lesson: this.lesson,
note: this.note
}) : console.log('請先勾選同意此協議')
}
}
})
console.log(app.username)
console.log(app.$data.username)
</script></html>
-------------------------------------------------------文章來自吳大勛（
大勛說）