* Vue.js是什么?
*一位华裔前Google工程师开发的前端js库
*一个MVVM框架
*核心概念
*数据绑定
*组件
*借鉴angular的模板和数据绑定技术
*借鉴react的组件化和虚拟DOM技术
*体积下,运行效率高,编码
简洁, PC/移动端开发都合适
*它本身只关注UI,可以轻松引入vue插件和其它第三库开发项目
*基本使用
*引入vue.js
*创建Vue对象(vm),指定选项(配置)对象
* el :指定dom标签容器的选择器
* data :指定初始化状态属性数据的对象
对象/函数(返回一个对象)
*页面中
*使用v-model:实现双向数据绑定
*使用{{}}:显示数据
* Vue对象的选项
* el
*指定dom标签容器的选择器
* Vue就会管理对应的标签及其子标签
* data
*对象或函数类型
*指定初始化状态属性数据的对象
* vue对象可以直接访问其属性
*页面中可以直接访问使用
*数据代理:由vm对象来代理对data中所有属性的操作(读/写)
* methods
*包含多个方法的对象
*供页面中的事件指令来绑定回调
*回调函数默认有event参数,但也可以指定自己的参数
*所有的方法由vue对象来调用,访问data中的属性直接使用this.xxx
* computed
*包含多个方法的对象
*对状态属性进行计算返回一个新的数据,供页面获取显示
*一般情况下是相当于是一个只读的属性
*利用set/get方法来实现属性数据的计算读取,同时监视属性数据的变化
*如何给对象定义get/set属性
*在创建对象时指定: get name () {return xxx} / set name (value) {}
*对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
* watch
* Vue.$watch()
*包含多个属性监视的对象
*分为一般监视和深度监视
```
'xxx' : {
deep : true,
handler : fun(value)
}
```
*过渡动画
*利用vue去操控css的transition/animation动画
*模板:使用包含带动画的标签
* css样式
* .fade-enter:进入的开始状态(不可见),在此指定进入前不可见的样式
* .fade-enter-active:进入的结束状态(可见),在此指定显示的transition
* .fade-leave-active:离开的结束状态(不可见),在此指定隐藏的transition和消失后不可见的样式
* .fade-leave:离开的开始状态(可见) ---一般不用
*编码例子
```
.xxx-enter-active, .xxx-leave-active {
transition: opacity .5s
}
.xxx-enter, .xxx-leave-active {
opacity: 0
}
hello
```
*生命周期
* vm/组件对象
*生命周期图
*主要的生命周期函数(钩子)
* created():启动异步任务(发送ajax请求,启动定时器)
* beforeDestroy():做一些收尾的工作
*页面指令
* v-text/v-html:指定标签体
* v-text :当作纯文本
* v-html :将value作为html标签来解析
* v-if v-else v-show
* v-if :如果vlaue为true,当前标签会输出在页面中
* v-else :与v-if一起使用,如果value为false,将当前标签输出到页面中
* v-show:就会在标签中添加display样式,如果vlaue为true, display=block,否则是none
* v-for :遍历
*遍历数组 : v-for="(person, index) in persons"
*遍历对象 : v-for="value in person" $key
* v-on :绑定事件监听
* v-on:事件名,可以缩写为: @事件名
*监视具体的按键: @keyup.keyCode @keyup.enter
*阻止事件的冒泡和事件默认行为: @click.stop @click.prevent
*隐含对象: $event
* v-bind :强制绑定解析表达式
*很多属性值是不支持表达式的,就可以使用v-bind
*可以缩写为: :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
* v-model
*双向数据绑定
* ref :标识某个标签
* ref='xxx'
*读取得到标签对象: this.$refs.xxx
*自定义指令
*注册全局指令
```
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toUpperCase()
})
```
*注册局部指令
```
directives : {
'my-directive' : {
bind: function(el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
}
}
```
*使用指令:
```
v-my-directive='xxx'
```
