vue的基本使用
vue是一个渐进式的js框架（组件插件引进式）
由核心库+插件组成
作用：动态构建前端界面
与其他前端js框架的关联
1).借鉴angular的模版和数据绑定技术
2).借鉴react的组件化和虚拟Dom技术
理解vue的MVVM模式
M(model)：模型，数据对象（data）
V(view)：视图，模版页面
VM(viewModel)：视图模型（vue的实例）
//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、计算属性与监听
计算属性什么时候执行？
1).初始化时显示
2).相关的data属性数据发生改变
//计算属性computed
computed:{
//计算属性中的一个方法，方法返回值作为属性值。在computed里声明的方法不需要再在data中定义
fullname () {
return this.firstName + ‘ ’ + this.lastName
}
}
//watch监听
watch:{
firstName: function (value) { //firstName 发生了变化
this.fullname = value + ‘ ’ + this.lastName
}
}
通过getter/setter实现对属性数据的显示和监听
computed : {
fullname : { //值不是一个函数，是一个对象。对象里有两个方法get和set
//get回调函数 当需要读取当前属性值时回调，根据相应的属性计算并返回当前属性的值
get () {
return this.firstName + ‘ ’ + this.lastName
},
//set回调函数 监视当前属性值的变化，当属性值发生变化时回调，更新相关的属性数据
set (value) { //value就是fullname改变的最新值
let names = value.split(‘ ’)
this.firstName = names[0]
this.lastName = names[1]
}
}
}
2、class和style的绑定
在应用界面中，某个（些）元素的样式是变化的。class/style绑定就是专门用来实现动态样式效果的技术
动态class绑定值有三种：
1)、:class=“a” //值是一个字符串
2)、:class=“{aClass:isA, bClass:isB}” //值是一个对象，对象的键是class的类名，值是一个布尔值，如果是true类名会留下
3)、:class=“[‘aClass’, ‘bClass]” //值是一个数组，很少用
style绑定
:style=“{color: activeColor, fontSize:fontSize+’px’}”
其中activeColor和fontSize是data属性
3、条件渲染
指令：v-if、v-else、v-show
比较v-if与v-show
v-if隐藏是直接将标签移除
v-show是通过样式display:none来将其隐藏，并没有移除。如果需要频繁切换用v-show较好
4、自定义过滤器
Vue.filter(‘filterName’, function(value,arg1, arg2...){
//进行一定的数据处理
return newValue
})
//使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
5、自定义指令
自定义指令分为定义全局指令和局部指令
//自定义一个大小写转换的指令
<p v-upper-text=‘I Like You’></p>
<p v-lower-text=‘I Like You’></p>
/**
定义全局指令
el：指令属性所在的标签对象
binding：包含指令相关信息数据的对象
**/
Vue.directive('upper-text', function(el, binding) {
console.log(el, binding)
el.textContent = binding.value.toUpperCase()
})
//定义局部指令，只在当前vue实例管理范围内有效
directives: {
'lower-text' : function(el, binding) {
el.textContent = binding.value.toLowerCase()
}
}
