Vue

Vue：渐进式js框架

this在Vue中指向的是当前Vue的实例
组成部分：
1.模板：包括指令(将控制和html联系在一起)和html内容
2.样式
3.控制： 包括 data数据，el指定模板和 methods方法

指令

1.文本渲染指令
{{js表达式}} v-text v-html：可以渲染数据中的html标签

条件渲染指令
v-if=“表达式值”：通过移除dom元素进行隐藏
v-else
v-show ：通过css的display=none的方法进行隐藏

属性绑定
v-bind:属性名=“值” 可缩写为 :属性名=“值”
注：所有的指令都只能在el指定的html标签内才管用
v-指令=“值”
在vue 指令里的值 不要当字符串来看，要当成js表达式运算结果，或者数据data里面的值

事件绑定
v-on:事件名 可缩写为 @事件名=""

.列表渲染
v-for="(item,index) in list"
//item是自定义的，代表每一项数据
//index代表数据的渲染下标

表单绑定
v-model=""

表单修饰符
.lazy 当change事件触发视图更新
.number把表单的值转换为数据数值

事件修饰
时间修饰符
.stop 停止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
案件修饰符
例：@keyup.enter 回车键被按下

watch：监听一个数据的变化

  watch:{
                'obj':{
                    handler:function(val){
                       //当obj发生任何变化时，都会触发handler函数
                    },
                    deep:true //深层次监听(obj的属性发生变化也会触发handler函数)
                }
            }

computed： 从现有数据计算出新的数据

computed:{
	rmsg:function(){
	return this.msg.split('').reverse().join('')
}
}

filters过滤:更改现有数据的显示格式

filters:{
	fix(val,arg1,arg2){
		return xx
}
}

调用：{{123|fix}} {{123|fix(2)}}

direcctives：vue自定义指令

//定义
directives：{
	img:{
	inserted(el,binding){
	//el  当前指令所在的html节点
	//binding.value   指令的值
}
}
}

使用：

class绑定

属性绑定
:class="’red blue‘"

动态绑定
:class="{‘red’:flag}"
:class="{‘active’}:index==ind"

数组绑定
:class="[‘red’,‘blue’]"

style绑定

1.对象
:style="{fontSize:‘21px’,color:’#800080’}"

2.data数据

:style="obj"

data:{
	obj:{
		fontSize:"21px",
		color:"#cceeea"
}
}

vue动画

1. vue不能直接实现动画，它提供动画各阶段需要的class
2. 组件提供class
3. 在vue中，动画是在元素显示与隐藏的过程中，添加class实现的
4. transition组件提供
   （1）v-enter-active{} ：元素进入的整个过程。 包括：
   v-enter ：元素进入的初始状态
   v-enter-to:元素进入的最终状态
   （2）v-fade-leave-active ：元素离开的整个过程。 包括：
   v-leave ：元素离开的初始状态
   v-leave-to：元素离开的最终状态

动画模式 mode

in-out
先执行进入动画，再执行离开动画

out-in
先执行离开动画，再执行进入动画

5. transition-group组件
   tag ： 指定标签
   move-calss：给正在移动当中的元素添加class
   name ：动画名称
   enter-active-class：元素进入的整个过程
   leave-active-class ：元素离开的整个过程

组件

定义
1.组件就是扩展自定义的html标签
2.组件是要给功能的集合，可以重复的使用
3. 组件能使一个复杂的系统分割为一些简单的组件
4. 组件使前端分工协作更加方便
5. 组件再小项目中会显得复杂，项目越大，优势就越大
全局：<组件名></组件名>

局部
1.定义组件

Vue.component(组件名,{
	template:`<div>组件的模板里只能有一个根节点</div>`
})

2. 注册组件

new Vue({
	components:{counter}
})

3. 使用组件

<counter></counter>