目錄
vue框架 v-*的指令
"""
1、簡述vue框架的作用和優勢
作用：開發前后台分離項目
優勢：前后台分離(開發效率)、輕量級(開發效率)、中文API(學習成本)
框架的特點：數據驅動、虛擬DOM、單頁面應用(很好適配移動端項目)、數據的雙向綁定(監聽機制)
2、列舉出三個vue的指令，並簡述每個指令的用法
v-text: v-text="變量"，類似{{ 變量|基本類型|簡單表達式 }} => 設置文本
v-html: 可以解析有html語法的文本 => 設置html文本
v-on: v-on:事件名="方法名" | v-on:事件名="方法名($event, ...)" => 設置事件
<div v-*=""> </div>
3、列舉出至少三個vue實例成員，並簡述每個實例成員的用法
el: id選擇器，body html不能作為掛載點，只匹配一個
data：提供渲染的數據
methods：提供綁定的方法
delimiters：插值表達式標識符， ['{{', '}}']
filters：提供自定義過濾器，過濾器可以同時過濾多個參數，還可以串聯過濾器
let data = {}
new Vue({
'el': '#app',
data,
...
})
4、js補充
對象
類：class function
類屬性：Vue.prototype.類屬性
函數：let fn = () => {}
"""
大綱
"""
1）指令
屬性指令：v-bind
表達指令：v-model
條件指令：v-show v-if
循環指令：v-for
斗篷指令：v-cloak
2）實例成員
計算：computed
監聽：watch
3）vue項目環境
"""
斗篷指令（了解）
v-cloak：避免屏幕閃爍
"""
v-cloak：避免屏幕閃爍
1）屬性選擇器，會將v-cloak屬性所在的標簽隱藏
2）當vue環境加載后，會將v-cloak屬性解析移除，所以內容{{ num }}就會顯示出來
3）而現在vue已經准備完畢，所以用戶會直接看到數值10，而不會看到 頁面從{{ num }}閃爍成數值10 """
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<p>{{ num }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
})
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
1）屬性選擇器，會將v-cloak屬性所在的標簽隱藏
2）當vue環境加載后，會將v-cloak屬性解析移除，所以內容{{ num }}就會顯示出來
3）而現在vue已經准備完畢，所以用戶會直接看到數值10，而不會看到 頁面從{{ num }}閃爍成數值10
*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p v-on:click="fn">{{ num }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// v-cloak：避免屏幕閃爍
new Vue({
el: '#app',
data: {
num: 10
},
methods: {
fn () {
if (this.num <= 0) {
return false;
}
this.num -= 2
}
}
})
</script>
</html>
結果：
屬性指令
屬性指令：v-bind:屬性名="變量"
"""
/** 屬性指令
* 1）語法：v-bind:屬性名="變量"
* 2）針對不同屬性，使用方式稍微有一丟丟區別
* i）自定義屬性以及title這些，直接賦值的，使用方式如下（t是變量，'o'是常量）
* <p v-bind:title="t" v-bind:owen="'o'">段落</p>
* ii）class屬性(重點):
* 綁定的變量：值可以為一個類名 "p1"，也可以為多個類名 "p1 p2"
* 綁定的數組：數組的每一個成員都是一個變量
* 綁定的字典：key就是類名，value是絕對該類名是否起作用
* iii）style屬性(了解)：
* 綁定的變量：值是一個字典
*/
"""
<p v-bind:title="t" v-bind:owen="'o'">段落</p>
<script>
new Vue({
el: '#app',
data: {
t: '懸浮提示',
},
})
</script>
<!--
a是變量，值就是類名
b就是類名，不是變量
c是變量，值為布爾，決定b類是否起作用
d是變量，值可以為一個類名 'p1' 也可以為多個類名 "p1 p2 ..."
calss="p1 b p2 p3"
-->
<p v-bind:class="[a, {b: c}]" v-bind:class="d"></p>
<script>
let app = new Vue({
el: '#app',
data: {
a: 'p1',
c: true,
d: 'p2 p3',
},
})
</script>
<p v-bind:style="myStyle"></p>
<script>
let app = new Vue({
el: '#app',
data: {
myStyle: {
width: '50px',
height: '50px',
backgroundColor: 'pink',
borderRadius: '50%'
}
},
})
</script>
案例
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
<button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">2</button>
<button v-bind:class="{live: isLive == 3}" v-on:click="changeLive(3)">3</button>
<script>
let app = new Vue({
el: '#app',
data: {
isLive: 1,
},
methods: {
changeLive (index) {
// this就代表當前vue對象，和app變量等價
// app.isLive = index;
this.isLive = index;
}
}
})
</script>
重點：事件指令與屬性指令都可以簡寫
<!--
1）v-bind: 可以簡寫為 :
2）v-on: 可以簡寫為 @
-->
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
<button :class="{live: isLive == 2}" @click="changeLive(2)">2</button>
<button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>
事件補充
<style>
body {
/* 不允許文本選中 */
user-select: none;
}
.d1:hover {
color: orange;
/* 鼠標樣式 */
cursor: pointer;
}
/* 只有按下采用樣式，抬起就沒了 */
.d1:active {
color: red;
}
/* div標簽壓根不支持 :visited 偽類 */
.d1:visited {
color: pink;
}
.d2.c1 {
color: orange;
}
.d2.c2 {
color: red;
}
.d2.c3 {
color: pink;
}
</style>
<div id="app">
<div class="d1">偽類操作</div>
<br><br><br>
<!--
click: 單擊
dblclick：雙擊
mouseover：懸浮
mouseout：離開
mousedown：按下
mouseup：抬起
-->
<div :class="['d2', c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件處理</div>
</div>
<script>
new Vue({
el: '#app',
data: {
c: '',
},
methods: {
hFn (c) {
this.c = c
}
}
})
</script>
表單指令
v-model="變量"
"""
1）語法：v-model="變量"
2）v-model綁定的變量控制的其實就是value屬性值
3）v-model要比v-bind:value要對一個監聽機制
4）數據的雙向綁定：
v-model可以將綁定的變量值映射給表單元素的value
v-model還可以將表單元素的新value映射給報道的變量
"""
<!-- 兩個輸入框內容會同時變化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
new Vue({
el: '#app',
data: {
v1: ''
}
})
</script>
代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表單指令</title>
</head>
<body>
<div id="app">
<form action="" method="">
<!-- <input name="n1" type="text" :value="v1">-->
<!-- <input name="n2" type="text" :value="v1">-->
<!--
1）語法：v-model="變量"
2）v-model綁定的變量控制的其實就是value屬性值
3）v-model要比v-bind:value要對一個監聽機制
4）數據的雙向綁定：
v-model可以將綁定的變量值映射給表單元素的value
v-model還可以將表單元素的新value映射給報道的變量
-->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<p @click="v1 = '點擊了'">{{ v1 }}</p>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '123'
}
})
</script>
</html>
結果：
條件指令
v-show="變量" | v-if="變量"
"""
/**
* 1）語法：v-show="變量" | v-if="變量"
* 2）兩者的區別：
* v-show在隱藏標簽時，采用display:none渲染標簽，標簽通過css隱藏
* v-if在隱藏標簽時，不會渲染在頁面上
*
* 3）v-if有家族：v-if | v-else-if | v-else
* v-if是必須的，必須設置條件
* v-else-if可以為0~n個，必須設置條件
* v-else可以為0~1個
* 上方分支成立會屏蔽下方所有分支，從上至下依次類推
*/
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<p v-show="isShow">show控制顯隱</p>
<p v-if="isShow">if控制顯隱</p>
</div>
<div>
<p v-if="0">你是第1個p</p>
<p v-else-if="0">你是第2個p</p>
<p v-else>你是第3個p</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/**
* 1）語法：v-show="變量" | v-if="變量"
* 2）兩者的區別：
* v-show在隱藏標簽時，采用display:none渲染標簽，標簽通過css隱藏
* v-if在隱藏標簽時，不會渲染在頁面上
*
* 3）v-if有家族：v-if | v-else-if | v-else
* v-if是必須的，必須設置條件
* v-else-if可以為0~n個，必須設置條件
* v-else可以為0~1個
* 上方分支成立會屏蔽下方所有分支，從上至下依次類推
*/
new Vue({
el: '#app',
data: {
isShow: false,
}
})
</script>
</html>
結果：
案例
<style>
body {
margin: 0
}
button {
width: 60px;
line-height: 40px;
float: right;
}
.bGroup:after {
display: block;
content: '';
clear: both;
}
.box {
/* vw: view width vh: view height*/
width: 100vw;
height: 200px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
button.active {
background-color: cyan;
}
</style>
<div id="app">
<div class="bGroup">
<button :class="{active: isShow === 'red'}" @click="isShow = 'red'">紅</button>
<button :class="{active: isShow === 'green'}" @click="isShow = 'green'">綠</button>
<button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">藍</button>
</div>
<div>
<div v-if="isShow === 'red'" class="box red"></div>
<div v-else-if="isShow === 'green'" class="box green"></div>
<div v-else class="box blue"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: 'red'
}
})
</script>
結果：
循環指令
v-for="ele in obj" 循環指令
"""
/**
* 1）語法：v-for="ele in obj" obj是被遍歷的對象，ele是遍歷得到的每一次結果
* 2）遍歷可迭代對象的首要結果，都是可迭代對象容器中的值，其次還可以遍歷得到索引及鍵等數據
* 字符串：v-for="v in str" | v-for="(v, i) in str"
* 數組：v-for="v in arr" | v-for="(v, i) in arr"
* 對象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
* 注：v-for遍歷要依賴於一個所屬標簽，該標簽及內部所有內容會被遍歷復用
*/
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環指令</title>
</head>
<body>
<div id="app">
<!-- 遍歷數字
5
【1】【2】【3】【4】【5】
-->
<p>{{ d1 }}</p>
<i v-for="e in d1">【{{ e }}】</i>
<hr>
<!-- 遍歷字符串
abc
【a】【b】【c】
【0a】【1b】【2c】
-->
<p>{{ d2 }}</p>
<i v-for="e in d2">【{{ e }}】</i>
<i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
<hr>
<!-- 遍歷數組
[ 1, 3, 5 ]
【1】【3】【5】
【01】【13】【25】
-->
<p>{{ d3 }}</p>
<i v-for="e in d3">【{{ e }}】</i>
<i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
<hr>
<!-- 遍歷對象
{ "name": "Bob", "age": 17.5, "gender": "男" }
【Bob】【17.5】【男】
【name-Bob】【age-17.5】【gender-男】
【name-Bob-0】【age-17.5-1】【gender-男-2】
-->
<p>{{ d4 }}</p>
<i v-for="e in d4">【{{ e }}】</i>
<i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
<i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
<hr>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
</script>
結果：
商品循環案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環案例</title>
<style>
.box {
width: 280px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden; /* 隱藏超出父級顯示范圍外的內容 */
text-align: center; /* 文本相關的屬性大多默認值是inherit */
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 前台先制作假數據進行測試
let goods = [
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
}
];
new Vue({
el: '#app',
data: {
goods,
}
})
</script>
</html>
結果：
面試題：todolist
js的Array操作
"""
尾增：arr.push(ele)
首增：arr.unshift(ele)
尾刪：arr.pop()
首刪：arr.shift()
增刪改插：arr.splice(begin_index, count, args)
"""
前台數據庫
"""
// 存
// 持久化化存儲，永遠保存
localStorage.name = "Bob";
// 持久化化存儲，生命周期同所屬標簽(頁面)，頁面關閉，重新打開就會丟失
sessionStorage.name = "Tom";
// 取
console.log(localStorage.name);
console.log(sessionStorage.name);
// 清空
localStorage.clear();
sessionStorage.clear();
// 短板：只能存儲字符串，所有對象和數組需要轉換為json類型字符串，再進行存儲
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""
案例：留言板
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="sendInfo">留言</button>
</form>
<ul>
<li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '',
// 三目運算符： 條件 ? 結果1 : 結果2
info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
},
methods: {
sendInfo () {
// 完成留言：將info添加到info_arr
// 增 push unshift | 刪 pop shift
if (this.info) {
// 留言
this.info_arr.push(this.info);
// 清空輸入框
this.info = '';
// 前台數據持久化(緩存)
localStorage.info_arr = JSON.stringify(this.info_arr);
}
},
deleteInfo(index) {
// 刪
this.info_arr.splice(index, 1);
// 同步給數據庫
localStorage.info_arr = JSON.stringify(this.info_arr);
}
}
})
</script>
結果：
小結
"""
1、v-cloak斗篷指令
2、屬性指令
v-bind:title="變量"
:class="變量" | :class="[變量1, ..., 變量n]" | :class="{類名: 布爾變量}"
:style="字典變量"
3、事件：@click @dblclick @mouseover|out|down|up
鼠標單擊、雙擊、懸浮、移開、按下、抬起
4、表單指令：
v-model綁定變量控制value屬性，可以實現雙向綁定
5、條件指令：
v-show | v-if
v-if | v-else-if | v-else
6、循環指令：
字符串：v-for="v in str" | v-for="(v, i) in str"
數組：v-for="v in arr" | v-for="(v, i) in arr"
對象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
7、Array操作
arr.push(ele) arr.unshift(ele)
arr.pop() arr.shift()
arr.splice(begin_index, count, args)
8、前台數據庫
localStorage | sessionStorage
1）操作就類似於obj，直接 .key 語法訪問 value
2）localStorage永久存儲
3）sessionStorage生命周期同所屬頁面標簽
"""