語法基礎
-
v-cloak:
1 差值表達式存在問題：閃動（性能較差時才會出現(xiàn)）
2 利用v-cloak指令先隱藏，賦值好后再顯示最終結(jié)果v-cloak指令的用法： 1.提供樣式 [v-cloak]{ display:none; } 2 在插值表達式所在的標簽中添加v-cloak 數(shù)據(jù)綁定指令
1 v-text:填充純文本，比插值表達式更簡潔
2 v-html:填充html片段，存在安全問題，內(nèi)部網(wǎng)站可以用
3 v-pre：顯示原始信息，跳過編譯過程
v-text:
<div>{{msg}}</div>
<div v-text='msg'></div>
下面與上面是一樣的效果
v-html:
<div v-html='msg1'></div>
...
data:{
msg1 = '<h2>Hello</h2>'
}
作用:可以動態(tài)的生成html標簽.缺點,容易遭到XSS攻擊
- 數(shù)據(jù)響應式
就是指修改數(shù)據(jù)不用刷新瀏覽器,頁面上的數(shù)據(jù)也會自動刷新
v-once:阻止再次編譯,如果某個數(shù)據(jù)不需要響應式,可以使用v-once,提高性能
雙向數(shù)據(jù)綁定
v-model事件綁定
v-on:click(簡寫： @click)
1
<button @click='add'>add</button>
2
<button @click='add()'>add</button>
注：add是methosd里提供的方法
一個小坑：
箭頭函數(shù)是不綁定this的，他會捕獲上下文中的this，最為自己的this，所以，在Vue的methods中的函數(shù)，如果用的箭頭函數(shù)，那可就會出現(xiàn)不能用this拿到Vue實例的情況。
- 事件函數(shù)傳參
參數(shù)可以是某個普通值，也可以是事件對象
傳遞事件對象的寫法：
$event，固定寫法
示例代碼：
<button @click='params(123,$event)'>hhh</button>
params:function(data,event){
console.log(data);
console.log(event);//接收到的事件
}
注：
如果事件直接綁定函數(shù)名稱，那么默認會傳遞事件對象作為事件函數(shù)的第一個參數(shù)。
如果事件綁定函數(shù)調(diào)用，那么事件對象必須作為最后一個參數(shù)傳遞，并且事件對象的名稱必須是$event
- 事件修飾符
.stop:組織事件冒泡
冒泡：
舉個例子：
<div @click='num++'> <button @click='num=1'>+</button> </div>
結(jié)果：num變成了2.我們明明是點擊了button，num應該被賦值為了1，但是因為事件冒泡到了上層的div，觸發(fā)了上層div的click事件，num被再次加了1，就成了2，有些時候，這并不是我們想要的結(jié)果，因此需要一個方法來阻止事件冒泡
傳統(tǒng)的方式來阻止事件冒泡：
1 在click事件觸發(fā)的函數(shù)中獲取到事件對象event
2 為事件對象添加event.stopPropagation()
Vue阻止事件冒泡：
v-on:click.stop = 'fnName'
.prevent :阻止默認行為，比如a標簽在點擊的時候會默認發(fā)生跳轉(zhuǎn)，可以用這個來阻止
- 按鍵事件
除了像是click這類似的鼠標事件之外呢,還是一些鍵盤事件,比如
keyup,就是當按鍵被按下時觸發(fā) - 按鍵事件修飾符
eg:
<input @keyup.enter='enter' />
這個的意思是就是,當焦點在input里的時候,如果按下了enter鍵,就會觸發(fā)enter函數(shù)
有些按鍵不在Vue提供的范圍內(nèi),我們可以自己給他添加按鍵事件修飾符
Vue屬性綁定
eg :
v-bind:href='url'
就把該標簽綁定來href屬性，屬性為data里的url的值
簡寫：:href='url'Vue樣式綁定
1 class樣式處理
（1）對象形式
<div v-bind:class='{active:isActive,danger:isDanger}'></div>
然后我們需要去data里設置isDanger和isActive屬性，布爾值類型
而active和danger則是具體的css類名
也可以直接:
<div v-bind:class='objClassName'></div>
objClassName:{
active:true,
danger:false
}
（2）數(shù)組形式
<div v-bind:class='[activeClass,dangerClass]'></div>
data里：
activeClass:'active',
dangerClass:'danger'
- 分支結(jié)構(gòu)
v-if:控制元素是否被渲染到頁面
v-show：控制元素是否顯示（已經(jīng)渲染）
如果一個元素需要頻繁的顯示和隱藏，則推薦用v-show，否則用v-if - 循環(huán)結(jié)構(gòu)
v-for：
<li v-for = '(item,index) in list'>{{item + '---' + index}}</li>
list是data中的一個數(shù)組
為了能有更好的性能，我們最高在遍歷時為元素加上key
<li v-bind:key='item.index' v-for = '(item,index) in list'>{{item + '---' + index}}</li>
- 自定義指令
eg:
1 如果我們需要設置一個v-focus，讓被綁定該指令的元素獲得焦點
2 設置一個指令v-color，來改變當前元素顏色
<input type="text" v-focus v-model='msg' v-color='{color:"blue"}'>
Vue.directive('focus',{
inserted:function(el){//el表示指令所綁定的元素
el.focus()
}
})
//自定義屬性2:改變當前元素的顏色 帶參數(shù)
Vue.directive('color',{
inserted:function(el,binding){
el.style['background-color'] = binding.value.color;
}
})
以上兩種指令的定義都是全局的，我們還可以定義局部指令:
這樣的局部指令應該定義在組件內(nèi)部（Vue實例也是一個組件），只能在本組件中使用
- 計算屬性
實際場景：
<!-- 反轉(zhuǎn)msg -->
{{msg.split("").reverse().join('')}}
我們需要把msg先反轉(zhuǎn)，再展示到頁面中，直接再{{}}內(nèi)寫相關(guān)邏輯，會導致代碼不便于閱讀。因此要用到計算屬性.使用方法：
{{reverseMethod}}
computed:{
reverseMethod:function(){
return this.msg.split('').reverse().join('');
}
}
計算屬性就是基于data中的數(shù)據(jù)來做處理的，data里的數(shù)據(jù)變了，計算屬性的結(jié)果也會自動改變。
- methods和computed的區(qū)別
緩存上的差異。方法不存在緩存，計算屬性是有緩存的
舉個例子：
{{reverseMethod}}
{{reverseMethod}}
computed:{
reverseMethod:function(){
console.log('happy')
return this.msg.split('').reverse().join('');
}
}
這個例子中，happy只會被打印一次，如果使用方法來完成相應功能，happy會被打印兩次。
緩存好處：節(jié)省性能
-
偵聽器
image.png
應用場景：
數(shù)據(jù)變化時執(zhí)行異步或開銷大的操作
一個模擬：
<div id="box">
<span>請輸入用戶名：</span>
<input type="text" v-model.lazy='uname'>
<span>{{tips}}</span>
</div>
<script>
var vim = new Vue({
el:'#box',
data:{
uname:'',
tips:''
},
methods:{
checkName:function(uname){
var _this = this
setTimeout(function(){
if(uname === 'hah'){
_this.tips = '已經(jīng)存在該用戶名，請重新輸入'
}else{
_this.tips = '該用戶名可用'
}
},2000)
}
},
watch:{
uname:function(val){
this.checkName(val);
this.tips = 'waitting...'
}
}
})
</script>
-
過濾器
作用：格式化數(shù)據(jù)，如：將字符串格式轉(zhuǎn)換成首字母大寫，或是指定日期格式等自定義過濾器：
Vue.filter('過濾器名稱',function(value){
//業(yè)務邏輯代碼
})
eg：
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div> //Vue過濾器的使用方法1 （插值表達式）
<div v-bind:id="msg | upper">hhh</div> //使用方法2 （屬性綁定）
Vue.filter('upper',function(value){
//將語句轉(zhuǎn)化為每個單詞首字母大寫的辦法.
var result = []
value = value.split(' ');
for(var i=0;i<value.length;i++){
var tool = ''
var tools = value[i].toUpperCase()
tool += tools[0]
tools = tools.toLowerCase();
for(var j = 1; j < tools.length;j++){
tool += tools[j];
}
result.push(tool)
}
result = result.join(' ')
return result
})
注：也可以定義局部過濾器
- 帶參數(shù)的過濾器
在filter定義時，回調(diào)函數(shù)中的第一個參數(shù)時默認的，時傳入的數(shù)據(jù)，而我們認為進行傳參的話，傳入的參數(shù)是第二個參數(shù)
<div>{{date | format('yyyy-MM-dd')}}</div>
Vue.filter('test',function(val,params){
//邏輯代碼
})
- Vue生命周期
主要階段：（8個鉤子函數(shù)）
1 掛載(初始化相關(guān)屬性)
1)beforeCreate
2)created
3)beforeMount
4)mounted
2 更新（元素或組件的變更操作）
1)beforeUpdate
2)updated
3 銷毀（銷毀相關(guān)屬性）
1)beforedestory
2)destoryed
比如，我們向頁面中填充數(shù)據(jù)，需要保證頁面中已經(jīng)有模板內(nèi)容了，就需要用到mounted鉤子函數(shù)
-
Vue數(shù)組操作
image.png
變異方法直接使用，替換數(shù)組不會自動更新數(shù)據(jù)，要把結(jié)果傳遞給自己
數(shù)組的響應化：（不用v-model卻可以自動更新數(shù)據(jù)）
Vue.set(vm.items,indexOfItem,newValue);
vm.$set(vm.items,indexOfItem,newValue);
參數(shù)一：要處理的數(shù)組名稱
參數(shù)二：要處理的數(shù)組索引
參數(shù)三：要處理的數(shù)組的值
注：Vue中，直接操作對象是不能響應化的，同樣可以用操作數(shù)組的方法來操作對象。只是在索引那里，不再是數(shù)字，而是key字符串。
