vue - lim

数据绑定

v-bind单向，v-model(表单元素)双向

el、data的其他写法

vm.$mount('#root')

data(){ return {msg:'1'} }

事件处理

@click="demo($event,1)"

事件修饰符

prevent：阻止默认事件（a标签跳转）
stop：阻止事件冒泡（外层div事件）
once：事件只触发一次

键盘事件

按键别名：enter、delete、esc、space、tab；keydown：ctrl、alt、shift、meta

计算属性

不能异步

computed：fullName:{get(){}}，简写fullName(){}

监视属性

watch：isHot(newVal,oldVal){}

1
2
3
4
5
isHot:{ 
    immediate:true, //初始化时调用
    deep:true, //深度监视
    handler(newVal,oldVal){}
}

vm.$watch('isHot',function(newVal,oldVal){})

绑定class

单个：‘class1’、多个不确定：arr[‘class1’,‘class2’]、动态开启：obj:{class1:false,class2:true}

条件渲染

v-if：切换频率低的场景，移除；v-show：切换频率高的场景，隐藏，不能搭配template

列表渲染

v-for="(item,index) in xxx" :key="唯一标识id"

列表过滤

computed、watch

数据监视

对象、数组：Vue.set(target,propertyName/index,value)、vm.$set(target,propertyName/index,value)

数组：push、pop、shift、unshift、splice、sort、reverse

v-model

radio：需要配置value
checkbox：不配置value，则为checked（布尔）；初始值是[]，则为value数组

三个修饰符：lazy（失焦再收集数据）、number（转数字）、trim（去空格）

v-cloak

使用css[v-cloak]{display:none;}配合v-cloak解决{{xxx}}问题

v-once

初次渲染后视为静态内容

v-pre

跳过编译过程

自定义指令

局部：new Vue({ directives:{指令名:配置对象/回调函数} })
全局：Vue.directives(指令名,配置对象/回调函数)

配置对象常用的回调

bind：指令与元素绑定时
inserted：元素被插入时
update：模板结构被重新解析时

生命周期

mounted：发送ajax、启动定时器、绑定自定义事件、订阅消息
beforeDestroy：清除定时器、解绑自定义事件、取消订阅

组件

Vue.extend(options)，el不写，data必须写成函数。局部注册components，全局Vue.component(‘组件名’,组件)

每次调用，返回一个全新的VueComponent
this在组件中是vc（VueComponent）对象，在new Vue中是vm（Vue）对象
VueComponent.prototype.proto === Vue.prototype

ref

给元素（dom）或子组件（vc）注册引用信息，this.$refs.xxx

nextTick

在下一次dom更新后执行回调

路由

query参数

1
2
3
4
5
6
7
8
9
<router-link 
    :to="{
        path:'/home/msg/detail',
        query:{
            id:1,
            title:'标题1'
        }
    }"
>跳转</router-link>

接收：$route.query.id

文章目录