悄咪咪的說講課的老師說話聲音好難聽啊
復(fù)習(xí)
- v-model(單選時只有一個數(shù)，多選的時候是數(shù)組毫目，提供一個value)
- 修飾符 .number .lazy
- 按鍵修飾符 .enter .ctrl .keyCode
- v-cloak
- axios
- create(){}鉤子函數(shù)复颈，在數(shù)據(jù)初始化后調(diào)用
- axios.get().then
- promise
- filter()過濾器
- computed:{}計算屬性，不是方法，方法沒有緩存，computed會根據(jù)依賴的屬性進(jìn)行緩存惨撇，必須是響應(yīng)式變化，像get中return date.now()并不是響應(yīng)式變化
- get()府寒，引入時調(diào)用魁衙，返回什么值，賦予什么屬性值
- set()株搔，賦值時調(diào)用
- 事件
- stopPropgation 阻止冒泡剖淀，冒泡事件的意思就是一個按鈕綁定一個click事件，click事件會依次在父級元素中觸發(fā)纤房，stopProgation()組織目標(biāo)元素的事件冒泡到父級元素纵隔。
- cancelBabble=true和stopProgation效果相同
- preventDefault，returnValue=false帆卓，阻止元素的默認(rèn)行為
- xxx.addEventListener('click',fn)
- jQuery once flag&&a()
- e.srcElement&&e.target 判斷事件源綁定事件,捕獲當(dāng)前事件作用的對象
-v-if以及v-show
- v-else必須和v-if連用巨朦，中間不能有其他標(biāo)簽
事件修飾符
阻止事件傳播
冒泡和捕獲都會被阻止
@click.stop=""
事件捕獲
事件捕獲是從上到下米丘，指不太具體的節(jié)點(diǎn)剑令，比如window先接收到事件，最具體的節(jié)點(diǎn)最后接收到事件拄查，在JS中將addEventListener的第二個參數(shù)改為true就會由捕獲的方式獲得最終的節(jié)點(diǎn)
vue中實現(xiàn)在父級加一個
@click.capture=""
<body>
<div id="app">
<div @click.capture="parent">parent
<div @click="child">child
<div @click="grandson">grandson
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
methods:{
parent(){
alert("parent")
},
child(){
alert("child")
},
grandson(){
alert("grandson")
}
},
data:{
}
})
</script>
</body>
對于這段程序的執(zhí)行結(jié)果應(yīng)該是
alert(parent)
alert(grandson)
alert(child)
這是因為吁津，點(diǎn)擊grandson，parent開始捕獲堕扶，但是child沒有捕獲碍脏，所以直接獲得grandson，然后開始冒泡
阻止默認(rèn)行為
@click.pervent=""
事件只綁定一次
@click.once=""
判斷事件源綁定
@click.self=""
Vue構(gòu)造函數(shù)
希望所有的實例都能使用過濾器稍算，使用全局過濾器
要放在頁面的頂部典尾，不可以new完后再定義
Vue.filter('my',(data)=>{return data+'111'}
watch
computed不支持異步
好的是時候重溫異步了
每次異步一定要拿出來說的東西就是setTimeout(),看以下的程序
for(var i=0; i<3; i++){
setTimeout(function(){
i+=i;
console.log(i);
},1000)
}
var i = 1;
console.log(i);
輸出的結(jié)果是 1 2 4 8
原因是整個程序的運(yùn)行順序是，for先執(zhí)行糊探，setTimeout也進(jìn)入隊列三次钾埂，i到達(dá)3，然后執(zhí)行var i=1,i被賦予值1科平，console.log(1)褥紫，然后時間到了，三次setTimeout被執(zhí)行
watch,computed以及methods的區(qū)別
- computed VS methods 計算屬性是基于依賴進(jìn)行緩存瞪慧，依賴發(fā)生變化髓考，才會重新計算，但是調(diào)用方法是在每次觸發(fā)渲染時都會再次執(zhí)行
- computed VS watch
當(dāng)有一些數(shù)據(jù)需要隨著其他數(shù)據(jù)的變動而變動弃酌，使用computed
當(dāng)需要異步或者開銷較大的操作的時候使用watch
watch可以監(jiān)控值的變化氨菇，在data中定義屬性進(jìn)行監(jiān)控儡炼，watch中的屬性名要和監(jiān)控的屬性名相同
watch:{
a(newVal,oldVal):{}
}
只有值變化才會變化，假如兩次輸入的值相同查蓉，并不會觸發(fā)
watch另一種調(diào)用方法
vm.$watch('a',function(){})
動態(tài)綁定樣式
v-bind
動態(tài)綁定“屬性”
動態(tài)綁定class和style
第一種方法 對象
首先動態(tài)綁定的方式是:class, :class和class綁定的屬性不沖突
綁定：{className:isActive}
多個類用逗號隔開
<body>
<div id="app">
<!--{className:isActive}-->
<div id="a" class="x" :class="{z:flag,y:!flag}">大白熊
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
第二種數(shù)組
在data定義需要用的類射赛，:class后用數(shù)組綁定
:class="[class1,class2,'z']"
或者:class="[class1,class2,{z:flag]"
<body>
<div id="app">
<!--{className:isActive}-->
<div id="a" :class="[class1,class2,'z']">大白熊
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
class1:"x",
class2:"y",
flag:true
}
})
</script>
</body>
template
template標(biāo)簽，是vue提供的沒有任何實際意義的標(biāo)簽奶是，可以用來包裹元素楣责，并且使用v-if，v-show并不支持
<template v-if="false">
<div>企鵝</div>
<div>企鵝</div>
<div>企鵝</div>
<div>企鵝</div>
</template>
<div v-else>大白熊
</div>
利用這個簡單弄了一個注冊登錄界面切換
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.ui{
width:500px;
height:20px;
list-style: none;
margin:0;
padding:0;
}
.ui li{
width:70px;
height:20px;
margin-left:10px;
float:left;
text-align:center;
background-color:lightblue;
border:1px solid black;
border-radius:5px 5px 0 0;
}
.ui li:hover
{
cursor:pointer
}
.content
{
width:500px;
height:300px;
margin-top:0;
border:1px solid black;
}
</style>
</head>
<body>
<div id="app">
<ul class="ui">
<li @click="flag=true">注冊</li>
<li @click="flag=false">登錄</li>
</ul>
<div class="content">
<template v-if="flag">
<br>
<label>用戶名:</label>
<input type="text" key="1">
<br>
<label>密碼:</label>
<input type="text" key="2">
<br>
<label>確認(rèn)密碼:</label>
<input type="text">
</template>
<template v-else>
<br>
<label>用戶名:</label>
<input type="text" key="3">
<br>
<label>密碼:</label>
<input type="text" key="4">
</template>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue(
{
el:"#app",
data:{
flag:true
}
}
)
</script>
</body>
</html>
相同結(jié)構(gòu)復(fù)用
默認(rèn)情況下切換dom時相同的結(jié)構(gòu)會被復(fù)用聂沙，如果不需要復(fù)用秆麸，加上key屬性
