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

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

  • 107 v-show 是否显示

  • 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;
    }

  • 130 template 模板标签

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

  • 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:['${','}']

  • 144 slot 内容接收扩展