基本結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
//1：初始化Vue實(shí)例
var app = new Vue({
// 2：指定實(shí)例控制范圍（及上面id=app的div）
el: '#app',
// 3：實(shí)例擁有的屬性
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
常用指令：
v-model: 用于表單控件(input/textare/select)的雙向綁定。
<input v-model="message" placeholder="edit me">
v-once:只渲染一次，適用于靜態(tài)內(nèi)容的渲染。
v-cloak:防止用戶看到未綁定之前的內(nèi)容。
// v-cloak 需要添加這個(gè)選擇器
[v-cloak] {
display: none;
}
v-text:覆蓋原有插值的內(nèi)容，不會(huì)解析HTML。（innerText）
v-html:覆蓋原有插值的內(nèi)容，并解析HTML。（innerHTML）
v-if:不滿足條件及不創(chuàng)建控件。
v-show:不滿足條件也會(huì)創(chuàng)建控件，display：none。
控件頻繁顯示隱藏的話，推薦使用v-show。
v-for:可以遍歷數(shù)組、字符串、數(shù)值、對(duì)象。
//***這里要注意，key的值不要使用index，不然復(fù)用的時(shí)候會(huì)存在問題。（列表存在選中狀態(tài)，在列表上方添加數(shù)據(jù)）
<div v-for="(item, index) in items" :key="item.key">
<div>{{item.name}}</div>
<div>{{index}}</div>
</div>
v-bind:給元素的屬性綁定數(shù)據(jù)。
綁定類名：
注意點(diǎn)：
1.放在數(shù)組中，并且添加引號(hào)，這樣才會(huì)去style中尋找響應(yīng)的樣式。（默認(rèn)會(huì)到data中尋找）
<div :class="['color','font']">babbabaab</div>
2.可以用三目運(yùn)算符
<div :class="[flag?'color':'']">babbabaab</div>
3.可以用對(duì)象
<div :class="[{'color':true}]">babbabaab</div>
4.在model中實(shí)現(xiàn)相關(guān)對(duì)象
<div :class="obj">babbabaab</div>
data() {
return {
obj:{
'color':true
}
};
},
綁定樣式：
1、放在對(duì)象中，value要用引號(hào)括起來，帶 - 的key，也要用引號(hào)括起來。
<div :style="{color:'red','font-size':'100px'}">babbabaab</div>
2、在model中實(shí)現(xiàn)相關(guān)對(duì)象。
<div :style="[obj1,obj2]">aaaaaaaaaaaaaaaa</div>
data() {
return {
obj1:{
'color':'red'
},
obj2:{
'background-color':'green'
}
};
},
v-on:綁定事件用的。
常見修飾符
.once 事件只觸發(fā)一次。
<div v-on:click.once="click">aaaa</div>
.prevent 阻止元素的默認(rèn)行為。
<a @click.prevent="click">aaaa</a>
.stop 阻止事件冒泡(執(zhí)行到當(dāng)前元素，不再向父元素傳遞)
.self 只有點(diǎn)擊到當(dāng)前元素才會(huì)觸發(fā)事件。
.capture 事件冒泡改為事件捕獲（事件執(zhí)行順序從父視圖到子視圖）
//傳遞事件對(duì)象。
<div @click="click($event)"></div>
自定義指令：
全局指令：
// 定義指令的時(shí)候不需要寫 v-
// 指令的生命周期
// bind: 被綁定到元素上時(shí)執(zhí)行。
// inserted: 被添加到元素上時(shí)執(zhí)行 (輸入框的聚焦)
Vue.directive('color',{
// el 被綁定元素的元素
// obj 傳遞的參數(shù)
bind:function(el, obj){
// el.style.color = 'blue'
el.style.color = obj.value
}
})
局部指令：
在Vue對(duì)象中添加響應(yīng)屬性就OK。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
directives: {
'color': {
bind: function (el, obj) {
el.style.color = obj.value
}
}
}
})
計(jì)算屬性：
插值語法中可以編寫js表達(dá)式，但是有明顯的缺陷，表達(dá)式太長(zhǎng)不利于閱讀與書寫。
Vue實(shí)例中添加下面的key：
// 計(jì)算屬性key
computed:{
msg2:function(){
let res = 'abcdefg'.split('').reverse().join('')
return res
}
}
div>{{msg2}}</div>
計(jì)算屬性: 返回的結(jié)果沒有變化時(shí)就不會(huì)被調(diào)用。
函數(shù): 會(huì)被多次調(diào)用。
過濾器：
全局過濾器
// 只有在插值語法和v-bind中使用
// 可以連續(xù)使用
Vue.filter('formatStr', function (value){
value = value.replace(/王/g,'李')
return value
})
局部過濾器
Vue實(shí)例中添加下面的key：
// 過濾器屬性key
filters: {
format: function (value) {
value = value.replace(/王/g, "李");
return value;
}
},
過度動(dòng)畫：
類選擇器實(shí)現(xiàn)
<!-- 存在狀態(tài)變化才會(huì)執(zhí)行動(dòng)畫，每個(gè) transition 中只能有一個(gè)標(biāo)簽 -->
<transition>
<div v-show="flag">123</div>
</transition>
<!-- 剛進(jìn)來就需要?jiǎng)赢?添加 appear -->
<transition appear>
<div v-show="flag">123</div>
</transition>
<!-- 指定動(dòng)畫樣式，添加name屬性 .v-enter 替換為 .one-enter 即可 -->
<transition appear name="one">
<div v-show="flag">123</div>
</transition>
// 進(jìn)來之前
.v-enter{
opacity: 0;
}
// 進(jìn)來之后
.v-enter-to{
opacity: 1;
}
// 進(jìn)來過程中
.v-enter-active{
transition: all 3s;
}
// 離開之前
.v-leave{
opacity: 1;
}
// 離開之后
.v-leave-to{
opacity: 0;
}
// 離開過程中
.v-leave-active{
transition: all 3s;
}
鉤子函數(shù)實(shí)現(xiàn)
默認(rèn)還是會(huì)找響應(yīng)的類名。
給 transition 添加 v-bind:css='false'，實(shí)現(xiàn)不去查找類名。
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 進(jìn)入中
// --------
beforeEnter: function (el) {
// ...
},
// 當(dāng)與 CSS 結(jié)合使用時(shí)
// 回調(diào)函數(shù) done 是可選的
enter: function (el, done) {
// ...
// 鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫，必須在這里寫上
// el.offsetWidth / el.offsetHeight
// 想要一進(jìn)來就有動(dòng)畫，需要在這里添加延遲。
setTimeout(function(){
done()
}, 0)
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時(shí)
// --------
beforeLeave: function (el) {
// ...
},
// 當(dāng)與 CSS 結(jié)合使用時(shí)
// 回調(diào)函數(shù) done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
使用三方動(dòng)畫庫
Velocity
在下面鉤子函數(shù)添加代碼就OK。
enter(el, done){
Velocity(el, {opacity:1, marginLeft:'500px'},3000);
done()
}
animate.css
在 enter-active-class 指定響應(yīng)的動(dòng)畫就OK了，動(dòng)畫名稱可以從官網(wǎng)（https://animate.style）中查看。
<transition
appear
enter-class
enter-to-class
enter-active-class="animate__animated animate__bounceIn"
>
<div v-show="flag">123</div>
</transition>
列表動(dòng)畫
列表動(dòng)畫，只需用 transition-group 標(biāo)簽包裹就OK了，其他和 transition 一致。
<transition-group>
<div v-for="(item, index) in items" :key="item.key">
<div>{{item.name}}</div>
<div>{{index}}</div>
</div>
</transition-group>
