Vue.js(一)
1、Vue.js是什么？
1）一位华裔前Google工程师(尤雨溪)开发的前端js库
2）作用：动态构建用户界面
3）特点：
遵循MVVM模式
编码简洁，体积小，运行效率高，移动/PC端开发
它本身只关注UI，可以轻松引入vue插件和其他第三方库开发项目
4）与其他框架的关联
借鉴angular的模板和数据绑定技术
借鉴react的组件化和虚拟DOM技术
5）vue包含一系列的扩展插件(库)
vue-cli：vue脚手架
vue-resource(axios)：ajax请求
vue-router：路由
vuex：状态管理
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于vue的组件库(移动端)
element-ui：基于vue的组件库(PC端)
2、基本使用
1）引入vue.js
2）创建Vue实例对象(vm)，指定选项(配置)对象
el:指定dom标签容器的选择器
data:指定初始化状态数据的对象/函数(返回一个对象)
3）在页面模板中使用{{}}或vue指令
3、Vue对象的选项
1）el
指定dom标签容器的选择器，Vue就会管理对应的标签及其子标签
2）data
对象或函数类型
指定初始化状态属性数据的对象，vm也会自动拥有data中的属性，页面中可以直接访问
数据代理：由vm对象来代理对data中所有属性的操作(读/写)
3）methods
包含多个方法的对象
供页面中的事件指令来绑定回调，回调函数默认有event参数，但也可以指令自己的参数
所有的方法由vue对象来调用，访问data中属性直接使用this.xxx
4）computed
包含多个方法的对象
对状态属性进行计算返回一个新的数据，供页面获取显示
一般情况下是相当于是一个只读的属性
利用set/get方法来实现属性数据的计算读取，同时监视属性数据的变化
如何给对象定义get/set属性
在创建对象时指定：getName(){return xxx}/setName(value){}
对象创建之后指令：Object.defineProperty(obj,age,{get(){},set(value){}})
5）watch
包含多个属性监视的对象，分为一般监视和深度监视
xxx:function(value){
xxx:{
deep:true,
handler:fun(value)
}
}
另一种添加监视方式:vm.$watch('xxx',function(value){})
4、过渡动画
利用vue去操控css的transition/animation动画
模板: 使用<transition name='xxx'>包含带动画的标签
css样式
.fade-enter-active: 进入过程, 指定进入的transition
.fade-leave-active: 离开过程, 指定离开的transition
.xxx-enter, .xxx-leave-to: 指定隐藏的样式
编码案例
.xxx-enter-active, .xxx-leave-active { transition: opacity .5s } .xxx-enter, .xxx-leave-to { opacity: 0 } <transition name="xxx"> <p v-if="show">hello</p> </transition>
5、生命周期
vm/组件对象
主要的生命周期函数:
created()/mounted()：启动异步任务(启动定时器，发送ajax请求，绑定监听)
beforeDestory()：做一些收尾工作
6、自定义过滤器
1）理解
对需要显示的数据进行格式化后再显示
2）编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
7、Vue内置指令
v-text/v-html：指定标签体;v-html会将value作为html标签来解析
v-if v-else v-show：显示/隐藏元素
v-if：如果value为true，当前标签会输出在页面中
v-else：与v-if一起使用，如果value为false，将当前标签输出到页面中
v-show：就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for：遍历
*遍历数组：v-for="(persons,index) in persons"
*遍历对象：v-for="value in person"
v-on：绑定事件监听
*v-on:事件名，可以缩写为：@事件名
*监听具体的按键：@keyup.keyCode @keyup.enter
*停止时间的冒泡和阻止时间的默认行为：@click.stop @click.prevent
*隐含对象：$event
v-bind：强制绑定解析表达式
*html标签属性是不支持表达式的，就可以使用v-bind
*可以缩写为： :id='name'
*代码
:class="a"
:class="{classA:isA,classB:isB}"
:class="[classA,classB]"
:style="{color:color}"
v-model：双向数据绑定，自动收集用户输入数据
ref：标识某个标签
ref='xxx'
读取得到标签对象：this.$refs.xxx
8、自定义指令
1）注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toUpperCase()
})
2）注册局部指令
directives : {
'my-directive' : function(el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
}
3）使用指令
<div v-my-directive='xxx'>
