Vue
表單指令
v-model="變量"
普通的標簽:變量就代表了value值
單選標簽(radio):變量為多個單選框中某一個的value值
單個多選標簽:變量為布爾值,代表是否選中
多個多選標簽(checkbox):變量為數組,存放選中的選項的value
<div id="app">
<form action="">
<input type="text" name="nomal" v-model="v1">
{{ v1 }}
<hr>
男:<input type="radio" name="sex" value="male" v-model="v2">
女:<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
<hr>
是否同意:<input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
籃球 <input type="checkbox" name="hobbies" value="basketball" v-model="v4">
足球 <input type="checkbox" name="hobbies" value="soccer" v-model="v4">
{{ v4 }}
<hr>
<button>提交</button>
</form>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '111',
v2: '',
v3: false,
v4: []
}
})
</script>
條件指令
v-show="布爾變量"
隱藏時,采用display:none進行渲染
v-if="布爾變量"
隱藏時,不在頁面中渲染(保證不渲染的數據不泄露)
v-if | v-else-if | v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
[v-cloak] { display: none; }
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app">
<div class="box r" v-show="is_show"></div>
<!--前端完全看不到數據-->
<div class="box b" v-if="is_show"></div>
<div class="wrap">
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">紅</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">藍</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">綠</button>
</div>
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else="page === 'g_page'"></div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_show: false,
page: 'r_page'
}
})
</script>
</body>
</html>
循環指令
v-for="ele in string|array|obj"
<div id="app">
<span>{{ info }}</span>
<div>
<span v-for="i in info">{{ i }} </span>
</div>
<div v-for="(i, index) in info">
{{ index }}:{{ i }}
</div>
<div v-for="(i, index) in stus">
{{ index }}:{{ i }}
</div>
<div v-for="(v, k, i) in people">
{{ i }} {{ v }}:{{ k }}
</div>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }} </span>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: 'message',
stus: ['Tiny', 'Jim', 'Tom'],
people: {
'name': 'Tiny',
'age': 18,
'gender': 'male'
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
分隔符
dilimiters: ['[{', '}]']
修改插值表達式符號
過濾器
- 在filters成員中定義過濾器方法
- 可以對多個值進行過濾,過濾時還可以額外傳入輔助參數
- 過濾的結果可以再進行下一次過濾(過濾的串聯)
<div id="app">
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 傳入所有要過濾的條件，返回值就是過濾的結果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
計算屬性
- computed計算屬性可以聲明 方法屬性 (方法屬性一定不能在data中重復聲明)
- 方法屬性 必須在頁面中渲染,才會啟用綁定的方法,方法屬性的值就是綁定方法的返回值
- 綁定方法中出現的所有變量都會被監聽,任何一個變化值更新都會重新觸發綁定方法,從而更新方法屬性的值
<div id="app">
<input type="number" min="0" max="100" v-model="v1">
<input type="number" min="0" max="100" v-model="v2">
<!-- <button>{{ +v1 + +v2 }}</button>-->
<button>{{ result }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
},
computed: {
result() {
v1 = +this.v1;
v2 = +this.v2;
return v1 + v2
}
}
})
</script>
監聽屬性
- 監聽的屬性需要在data中聲明,監聽方法不需要返回值
- 監聽的方法就是監聽的屬性名,該屬性值發生更新時就會回調監聽方法
- 監聽方法有兩個回調參數:當前值, 上一次值
<div id="app">
<p>姓名: <input type="text" v-model="full_name"></p>
<p>姓: {{ first_name }}</p>
<p>名: {{ last_name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: 'NaN',
last_name: 'NaN'
},
watch: {
full_name(n, o) {
// console.log(n, o)
arr = n.split('');
this.first_name = arr[0];
this.last_name = arr[1]
}
}
})
</script>