vue的基本使用
vue是一個漸進(jìn)式的js框架（組件插件引進(jìn)式）
由核心庫+插件組成
作用：動態(tài)構(gòu)建前端界面
與其他前端js框架的關(guān)聯(lián)
1).借鑒angular的模版和數(shù)據(jù)綁定技術(shù)
2).借鑒react的組件化和虛擬Dom技術(shù)
理解vue的MVVM模式
M(model)：模型有滑，數(shù)據(jù)對象（data）
V(view)：視圖跃闹，模版頁面
VM(viewModel)：視圖模型（vue的實(shí)例）
//vue 語法
//html
<div id=“app”>
<p>{{msg}}</p>
<div>
//js 先引入vue.js
<script type=“text/javascript>
new Vue({
el:’#app’,
data:{
msg:’hello’
}
})
</script>
1、計算屬性與監(jiān)聽
計算屬性什么時候執(zhí)行？
1).初始化時顯示
2).相關(guān)的data屬性數(shù)據(jù)發(fā)生改變
//計算屬性computed
computed:{
//計算屬性中的一個方法望艺，方法返回值作為屬性值苛秕。在computed里聲明的方法不需要再在data中定義
fullname () {
return this.firstName + ‘ ’ + this.lastName
}
}
//watch監(jiān)聽
watch:{
firstName: function (value) { //firstName 發(fā)生了變化
this.fullname = value + ‘ ’ + this.lastName
}
}
通過getter/setter實(shí)現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)聽
computed : {
fullname : { //值不是一個函數(shù)，是一個對象找默。對象里有兩個方法get和set
//get回調(diào)函數(shù) 當(dāng)需要讀取當(dāng)前屬性值時回調(diào)艇劫，根據(jù)相應(yīng)的屬性計算并返回當(dāng)前屬性的值
get () {
return this.firstName + ‘ ’ + this.lastName
},
//set回調(diào)函數(shù) 監(jiān)視當(dāng)前屬性值的變化，當(dāng)屬性值發(fā)生變化時回調(diào)惩激，更新相關(guān)的屬性數(shù)據(jù)
set (value) { //value就是fullname改變的最新值
let names = value.split(‘ ’)
this.firstName = names[0]
this.lastName = names[1]
}
}
}
2店煞、class和style的綁定
在應(yīng)用界面中，某個（些）元素的樣式是變化的风钻。class/style綁定就是專門用來實(shí)現(xiàn)動態(tài)樣式效果的技術(shù)
動態(tài)class綁定值有三種：
1)顷蟀、:class=“a” //值是一個字符串
2)、:class=“{aClass:isA, bClass:isB}” //值是一個對象骡技，對象的鍵是class的類名鸣个，值是一個布爾值，如果是true類名會留下
3)布朦、:class=“[‘a(chǎn)Class’, ‘bClass]” //值是一個數(shù)組囤萤，很少用
style綁定
:style=“{color: activeColor, fontSize:fontSize+’px’}”
其中activeColor和fontSize是data屬性
3、條件渲染
指令：v-if是趴、v-else涛舍、v-show
比較v-if與v-show
v-if隱藏是直接將標(biāo)簽移除
v-show是通過樣式display:none來將其隱藏，并沒有移除唆途。如果需要頻繁切換用v-show較好
4富雅、自定義過濾器
Vue.filter(‘filterName’, function(value,arg1, arg2...){
//進(jìn)行一定的數(shù)據(jù)處理
return newValue
})
//使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
5、自定義指令
自定義指令分為定義全局指令和局部指令
//自定義一個大小寫轉(zhuǎn)換的指令
<p v-upper-text=‘I Like You’></p>
<p v-lower-text=‘I Like You’></p>
/**
定義全局指令
el：指令屬性所在的標(biāo)簽對象
binding：包含指令相關(guān)信息數(shù)據(jù)的對象
**/
Vue.directive('upper-text', function(el, binding) {
console.log(el, binding)
el.textContent = binding.value.toUpperCase()
})
//定義局部指令窘哈，只在當(dāng)前vue實(shí)例管理范圍內(nèi)有效
directives: {
'lower-text' : function(el, binding) {
el.textContent = binding.value.toLowerCase()
}
}
