vue指令
vue指令
文本指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!-- 一、插值表達式，能完成變量渲染，變量基礎運算，變量方法調用，不能完成複雜運算(一步解決不了的，不能出現；) -->
<p>{{ msg }}</p>
<p>{{ msg + '拼接內容' }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.slice(2, 4) }}</p>
<hr>
<!--二、v-text：將全部內容作文本渲染 -->
<p v-text="msg + '拼接內容'"></p>
<!--三、v-html：能夠解析html語法標籤的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-text="`<b>${msg}</b>`"></p>
<p v-html="`<b>${msg}</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
</script>
</html>
vue過濾器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過濾器</title>
</head>
<body>
<div id="app">
<!-- 默認將msg做爲參數傳給filterFn -->
<p>{{ msg | filterFn }}</p>
<!--過濾器串聯-->
<p>{{ num | f1 | f2 }}</p>
<!--能夠同時對多個變量進行過濾，變量用，分割，過濾器還能夠額外傳入參數輔助過濾-->
<!--過濾器方法接收全部傳入的參數，按傳入的位置進行接收-->
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本內容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
f3(v1, v2, v3, v4) {
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
})
</script>
</html>
事件指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!--事件指令：v-on:事件名="事件函數" -->
<!--簡寫：@事件名="事件函數" -->
<p v-on:click="f1">被點擊了{{ count }}下</p>
<hr>
<p @click="f2">{{ p2 }}</p>
<hr>
<!--綁定的事件函數能夠添加()，添加括號就表明要傳遞參數-->
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
<ul>
<li @click="f4(0)">{{ arr[0] }}</li>
<li @click="f4(1)">{{ arr[1] }}</li>
<li @click="f4(2)">{{ arr[2] }}</li>
</ul>
<hr>
<!--綁定的事件函數若是沒有傳遞參數，默認傳入 事件對象 -->
<div class="box" @click="f5"></div>
<hr>
<!--事件函數一旦添加傳參()，系統就再也不傳遞任何參數，須要事件對象時，能夠手動傳入 $event -->
<div class="box" @click="f6(10, $event)"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
p2: '第二個p',
arr: [1, 2, 3],
},
methods: {
f1() {
this.count ++
},
f2() {
console.log(this.p2)
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(ev, b) {
console.log(ev);
console.log(b);
},
f6(num, ev) {
console.log(num);
console.log(ev);
}
},
})
</script>
</html>
屬性指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>屬性指令</title>
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 150px;
height: 150px;
background-color: darkturquoise;
transition: .3s;
}
.box2 {
width: 300px;
height: 100px;
background-color: darkgoldenrod;
transition: .3s;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--1.下方的class、id、title、abc等是div標籤的屬性，屬性指令就是控制它們的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.屬性指令：v-bind:屬性名="變量"，簡寫方式 :屬性名="變量" -->
<!--3.屬性指令操做 style 屬性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 一般：變量值爲字典 -->
<div :style="mys1"></div>
<!-- 瞭解：{中能夠用多個變量控制多個屬性細節} -->
<div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>
<!--重點：通常vue都是結合原生css來完成樣式控制 -->
<!--<div :class="c1"></div>-->
<!--class能夠寫兩份，一份寫死，一份有vue控制-->
<div class="box1" :class="c2"></div>
<!--{}控制類名，key爲類名，key對應的值爲bool類型，決定該類名是否起做用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多個類名-->
<div :class="[c3, c4]"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
setInterval(function () {
// app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>
</html>
表單指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表單指令</title>
</head>
<body>
<div id="app">
<form action="">
<!--屬性指令：v-model="變量"，v-model綁定的變量控制的是表單元素的value值 -->
<!--普通表單元素，用v-model直接綁定變量控制value值-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
<p>{{ v1 }}</p>
<hr>
<!--單一複選框-->
贊成：
<input type="checkbox" name="agree" v-model="v2">
<hr>
<!--多個複選框-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--單選框-->
中午吃啥：<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
飯飯:<input name="food" type="radio" value="fanfan" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: false, // false
v3: ['male', 'wow'],
v4: 'rourou',
}
})
</script>
</html>
斗篷指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>斗篷指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 12345
}
})
</script>
</html>
條件指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--條件指令：
v-if="true|false"，爲假時，在頁面上不渲染，能夠隱藏標籤中的信息
v-show="true|false"，爲假時，在頁面中用display:none渲染，雖然沒展現，可是任在頁面結構中
-->
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<!-- v-if是一個家族
v-if
v-else-if
v-else
一、上分支成立，下分支會被屏蔽
二、else分支只要在全部上分支都爲假時顯示，且不須要條件
-->
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '2'
}
})
</script>
</html>
條件指令案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>條件指令案例</title>
<style>
.box {
width: 400px;
height: 200px;
}
.r { background-color: red }
.y { background-color: yellow }
.g { background-color: green }
.action {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<p>
<button @click="changeC('red')" :class="{action: c === 'red'}">紅</button>
<!--<button @click="changeC('red')" :class="c === 'red'? 'action': ''">紅</button>-->
<button @click="changeC('yellow')" :class="{action: c === 'yellow'}">黃</button>
<button @click="changeC('green')" :class="{action: c === 'green'}">綠</button>
</p>
<div class="wrap">
<div class="box r" v-if="c === 'red'"></div>
<div class="box y" v-else-if="c === 'yellow'"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// sessionStorage的生命週期與頁面標籤綁定，當標籤頁被關閉，數據庫被清空
// localStorage是前臺永久數據庫
// sessionStorage.name = '123';
// localStorage.name = 'xyz';
// localStorage.clear();
new Vue({
el: '#app',
data: {
// 頁面從新刷新加載，能夠從數據庫中獲取緩存，若是沒有，再取默認值
// c: 'red',
c: localStorage.c ? localStorage.c : 'red',
},
methods: {
changeC(color) {
this.c = color;
// 每一次改變c的值，將值同步到前臺數據庫
localStorage.c = color; // 存
}
}
})
</script>
</html>
循環指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--循環指令：
v-for=""
語法：
v-for="成員 in 容器"
-->
<!--一、字符串循環渲染: 能夠只遍歷值，也能夠遍歷值與索引-->
<p>
<span v-for="v in title">{{ v }}</span>
</p>
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p>
<!--二、數組循環渲染: 能夠只遍歷值，也能夠遍歷值與索引-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
</div>
<!--三、對象循環渲染: 能夠只遍歷值，也能夠遍歷值與鍵，還能夠遍歷值、鍵與索引-->
<div>
<p v-for="v in people">{{ v }}</p>
</div>
<div>
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div>
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '循環指令',
arr: [1, 4, 2, 5, 3],
people: {
name: '兔子',
color: '粉白',
price: 6.66,
},
stus: [
{
name: "Bob",
age: 18
},
{
name: "Tom",
age: 17
},
{
name: "Jerry",
age: 19
}
]
}
})
</script>
</html>
循環指令案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="send_comment">留言</button>
<ul>
<li v-for="(v, i) in comments" @click="deleteMsg(i)">{{ v }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
comments: []
},
methods: {
send_comment() {
// 數組的增
// push pop unshift shift splice
// this.comments.unshift(this.msg);
// this.comments.splice(0,0,0);
if (this.msg) {
this.comments.push(this.msg); // 留言
this.msg = ''; // 留言後清空輸入框
}
},
deleteMsg(index) {
this.comments.splice(index, 1);
}
}
})
</script>
<script>
// 數組操做萬能方法，能夠完成增刪改
let arr = [1, 2, 3];
// 參數：開始索引，操做長度，操做的結果們
arr.splice(2, 0, 100);
arr.splice(1, 1);
console.log(arr);
</script>
</html>
分隔符成員
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>分隔符</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!--<p>{[ num ]}</p>-->
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
// 用來修改插值表達式符號
// delimiters: ['{[', ']}'],
delimiters: ['{', ']}'],
})
</script>
</html>
計算屬性成員
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '結果',
},
// 一、computed中定義的是方法屬性，data中定義的也是屬性，因此不須要重複定義(省略data中的)
// 二、方法屬性的值來源於綁定的方法的返回值
// 三、方法屬性必須在頁面中渲染後，綁定的方法纔會被啓用(調用)
// 四、方法中出現的全部變量都會被監聽，任何變量發生值更新都會調用一次綁定的方法，從新更新一下方法屬性的值
// 五、方法屬性值不能手動設置，必須經過綁定的方法進行設置
computed: {
res () {
console.log('該方法被調用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '結果';
}
}
})
</script>
<script>
console.log(1 + '2');
console.log(1 - '2');
console.log(+'2');
</script>
</html>
屬性的監聽
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>屬性的監聽</title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 一、watch中給已有的屬性設置監聽方法
// 二、監聽的屬性值一旦發生更新，就會調用監聽方法，在方法中完成相應邏輯
// 三、監聽方法不須要返回值(返回值只有主動結束方法的做用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
</html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。