Vue总结#

渐进式js框架

组成

模板

指令：将控制和·html联系在一起
html内容

样式

控制

data:数据
el：指定模板
methods 方法

指令

文本渲染指令

    {{js 表达式}}
    v-text
    v-html //可以渲染数据中的html标签

条件渲染指令

    v-if="表达式值"//通过移除dom元素来隐藏
    v-else
    v-show//通过css display：none方法来隐藏

属性绑定

    v-bind:属性名="值"
    :属性名="值"

特别强调

所有 指令只能在指定的模板标签内有用
v-指令 = "值"
“值”不能看着是字符串，而应该理解为js的表达式运算结果，或者data里面的值

事件绑定

v-on:事件名=""
@事件名=""

v-on:click = "num=1"

1.@click = "表达式"

@click = "num++"

2.@click="methods 中的方法名"

    @click = "say"
        会默认自动传递一个时间参数
    @click="say(参数1,参数2)"
        $event 是一个特殊写法，代表事件参数

vue方法中心

Methods
say(){ }

列表渲染

v-for="(item,index) in list"

    item是自定义的 代表每一项数据
    index代表数据的渲染下标

:key="index"

key的值要是唯一的
方便vue识别，排序动画等操作

复习数组方法

添加

    push0从后面添加
    unshift( )从前面添加

删除

    pop0从后面删除
    shif()从最前面删除
    splice(从第几个，删除数量，新添加内容)

查找

    indexOf()//查找元素所在的下标,找不到返回-1

表单绑定 v-model=""

text

checkbox

单一

        选中值为true | 反之为false

多选

        1.绑定的数据是数组类型
        2.每个多选项绑定的是同一个数组
        3.默认值可以填入数据组

radio

select

表单修饰符

    .lazy当change事件触发视图更新
    默认是input事件就会触发视图更新
    .number把表单的值转换为数据数值

vue

在vue中不用去操作dom元素节点
通过操作数据来改变视图（dom节点）

事件修饰

事件修饰符

    .stop停止事件冒泡
    .prevent 阻止默认事件
    .once只执行一次

按键修饰符

    @keyup.enter  回车键被按下

其他常用按键

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

watch 监听一个数据的变化

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

computed 从现有的数据，计算出行的数据

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

单词

deep  深的
handler  处理器
watch  监听
computed  计算

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

filters：{
  fix(val,arg1,arg2){
    return xxx
  }
}
{{12345 | fix}}
{{12345 | fix(2)}

vue参数

el 指令模板
data 指定数据
methods 指定方法
watch 监听
computed 计算
filters 过滤

vue模板指令

联系模板与数据+方法的

1.v开头

v-text
v-on

2.参数

v-on：click
v-bind: title

3.修饰符

v-model.number
v-bind:keyup.enter

directives

vue 自定义指令

作用

    1.要操作dom时候
    2.使用集成第二方插件时

定义

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

使用

<div v-img="xxxxx">

单词：

directives 指令
inserted 已插入
binding 绑定

class绑定

属性绑定

：class="red blue"

动态绑定

:class="{'red':flag}"
:class="{'active':index==current}"

数组绑定

:class="['red','em','small']"

style 绑定

对象

:style="{fontSize:'16px',color:'blur'}"

:style="obj"

data:{
obj:{"fontSize":"100px",fontStyle:'italic',color:'blue'}
}    

vue动画

1.vue动画他不能直接实现动画，他提供动画各阶段需要的class

2.<transition> 组件提供class

3.在xue中，动画是在元素显示与隐藏过程中，添加class实现

    v-if
    v-else
    v-shw

4.transition 组件提供

v-enter-active 元素整个进入过程

        v-enter//元素进入的初始状态
        v-enter-to//元素进入的结束状态

v-leave-active 元素整个离开的过程

        v-leave//元素的离开初始状态
        v-leave-to//元素的离开结束状态

自定义动画

    enter-active-class="xxx"
    leave-active-class="xxx"
    要引入第二方css animated

动画模式 mode

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

5.transition-group组件

tag 指定标签
move-class给正在移动中的元素添加class
name 动画名称

enter-active-class
leave-active-class
指定进入离开class

组件

定义

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

全局

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

局部

1.定义

var counter = {
    template:`<div>只能有一个根节点</div>`,
    data:function(){return {num:1, }},
    methods:{ }
}

2.注册组件

new Vue({
  components:{counter,...}
})

3.使用组件

<counter></counter>