欢迎光临，流星雨博客！！！

全部标签 流程控制 基础语法 API 钩子函数

  • 104 v-if 判断

  • 105 v-else 否则

  • 106 v-else-if 再判断

    v-else-if="type === 'B'"
    [2.1.0 新增]

  • 107 v-show 是否显示

  • 108 v-for 循环

    v-for="value in object"
    v-for="(value, key) in object"

  • 109 v-once 显示原始数据，不进行vue渲染

    span v-once这个将不会改变: {{ msg }} span

  • 110 v-html 渲染html语法

  • 111 v-text 渲染文本

  • 112 v-on 绑定事件

    v-on:click="函数"
    v-on:click.native="原生函数"
    v-on:keyup.enter="函数"
    v-on:keyup.13="函数"
    @click="函数" [简写]
    @click="add($event)" 原生DOM

  • 113 v-model 数据绑定在表单元素上

    input type="text" v-model="message"

    input type="text" v-model.lazy="message" change改变执行[失去焦点]

    input type="text" v-model.number="message" 只能为数字

    input type="text" v-model.trim="message" 去掉首尾空格

  • 114 v-bind 绑定属性

    v-bind:href="url"
    :href="url"[简写]

  • 115 v-pre 跳过vue渲染

    div v-pre {{message}} div

  • 116 v-cloak DOM渲染结束后显示

    与css配合
    [v-cloak] {
    display: none;
    }

  • 117 Vue.directive 自定义指令

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
    })

  • 119 Vue.set() 修改对象属性

    Vue.set(outData,'count',4);

  • 120 beforeCreate 1-beforeCreate 初始化之后

  • 121 created 2-created 创建完成

  • 122 beforeMount 3-beforeMount 挂载之前

  • 123 mounted 4-mounted 被创建

  • 124 beforeUpdate 5-beforeUpdate 数据更新前

  • 125 deactivated 8-deactivated

  • 126 destroyed 10-destroyed 销毁之后

  • 127 updated 6-updated 被更新后

  • 128 activated 7-activated

  • 129 beforeDestroy 9-beforeDestroy 销毁之前

  • 130 template 模板标签

    var app=new Vue({
    el:'#app',
    data:{
    message:'hello Vue!'
    },
    template:'#demo3'
    })

  • 131 Vue.component 注册全局组件

    Vue.component('lxy-body',{
    template:` div style="color:red;" 全局化注册的lxy-body标签 div `
    })

  • 132 components 局部组件

    components:{
    "panda":{
    template:`div style="color:red;" 局部注册的panda标签 div`
    }
    }

  • 133 props 接收父组件传的数据

    type: String, 类型
    required: true 必转
    default: 100 默认
    validator:() => {} 验证

  • 134 computed 计算选项

    computed:{
    newPrice:function(){
    return this.price='￥' + this.price + '元';
    }
    }

  • 135 propsData 扩展传参

    new header_a({propsData:{a:1}}).$mount('header');

    需要在props里面接收这个参数

  • 136 methods 方法选项

    methods:{
    add:function(){}
    }

  • 137 watch 监控数据

    watch:{
    a:function(){} //监控a数据
    }

  • 138 mixins 混入

    mixins: [mixin] 混入mixin实例

    混入对象的钩子将在组件自身钩子之前调用

  • 139 extends 扩展

    var CompB = {
    extends: CompA, 扩展CompA实例
    ...
    }

  • 140 delimiters 修改vue解析标签

    delimiters:['${','}']

  • 141 vm.$destroy() 卸载

  • 142 vm.$nextTick() 更新数据

  • 143 vm.$forceUpdate() Vue 实例重新渲染

  • 144 slot 内容接收扩展

  • 145 $once 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器

    app.$once('lxy',() => {})

  • 146 $off 移除自定义事件监听器

    app.$off('lxy')