vue语法精简（方便开发查阅）

时间 2019-11-08

标签 vue 语法精简方便开发查阅繁體版

原文原文链接

vue语法精简（方便开发查阅）

vue语法精简（方便开发查阅）

本文只是方便开发的时候快速查阅到相关语法，想看详细内容请看官网（时间久了写法都忘了，~~哭）css

指令

vue create app                                      建立项目
{{msg}}                                             文本插值
v-once                                              一次性渲染插值
v-html                                              输出html
v-if                                                是否显示，（1.多个同级标签，使用template包裹 2.使用key区分不一样元素）
v-else
v-else-if
v-show                                              是否显示，css层面的
v-on:click                                          监听点击事件
v-on:click.prevent                                  阻止默认行为
v-bind:class="{ active: isActive }"                 绑定class
v-bind:style="{ color: activeColor}"                绑定style
v-for="(item, index) in items"                      遍历数据，（1.in可使用of代替 2.绑定key区分不一样的元素）
v-for="(value, key, index) in object"               便利对象
v-on:keyup.enter="submit"                           按键修饰符（v-on:keyup.13="submit"）
v-model="message"                                   表单双向绑定

特殊的标签和属性

<slot></slot>                                                   插槽，代指组件标签嵌套的内容
<component v-bind:is="currentTabComponent"></component>         动态组件

<keep-alive>                                                    缓存组件状态
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

this.$root                                                      访问根组件
this.$parent                                                    访问父组件

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput                                        访问组件元素

props验证（String Number Boolean Array Object Date Function Symbol）
    props: {
        // 基础的类型检查 (`null` 匹配任何类型)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
            type: String,
            required: true
        },
        // 带有默认值的数字
        propD: {
            type: Number,
            default: 100
        },
        // 带有默认值的对象
        propE: {
            type: Object,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
                return { message: 'hello' }
            }
        },
        // 自定义验证函数
        propF: {
            validator: function (value) {
                // 这个值必须匹配下列字符串中的一个
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }

变异方法

直接调用下面这些方法，vue会自动更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

使用下面方法，修改指定的键值
Vue.set(object, key, value)
使用下面方法，为对象添加属性
Object.assign({}, this.obj, {key: ..., value: ...})

事件修饰符

.stop                   阻止冒泡
.prevent                阻止默认行为
.capture                使用捕获
.self                   当前元素触发事件
.once                   事件触发一次
.passive                滚动行为优化（<div v-on:scroll.passive="onScroll">...</div>）
.native                 原生事件

按键修饰符

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

自定义keycode
    Vue.config.keyCodes.f1 = 112
    // v-on:keyup.f1

表单修饰符

v-model.lazy="msg"              // 在“change”时而非“input”时更新
v-model.number="msg"            // 将用户的输入值转为数值类型
v-model.trim="msg"              // 自动过滤用户输入的首尾空白字符

生命周期函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
beforeDestroy
destroyed

计算属性

基本语法html

<span>{{filterMsg}}</span>

data: function() {
    return {
        message: '我是原始的属性'
    }
},
computed: {
    filterMsg: function() {
        return "|||||" + this.message + "||||"
    }
}

setvue

<input type="text" v-model="filterMsg">
<span>{{filterMsg}}</span>

data: function() {
    return {
        message: "我是原始的属性"
    };
},
computed: {
    filterMsg: {
        get: function() {
            return "|||||" + this.message + "||||";
        },

        set: function(val) {
            this.message = val.substring(5).slice(0,-4);
        }
    }
}

监听属性

<input type="text" v-model="message">
<span>{{filterMsg}}</span>

data: function() {
    return {
        message: "",
        filterMsg: ""
    }
},
watch: {
    message: function(val) {
        this.filterMsg = "|||||" + val + "||||"
    }
}

子组件经过事件向父组件传递信息

父组件
    <template>
        <div>
            <Test @parentFn="fn" />
        </div>
    </template>

    <script>
        import Test from "./Test";
        export default {
            components: {Test},
            methods: {
                fn: function(val) {
                    console.log(val);
                }
            }
        };
    </script>

子组件
    <template>
        <button @click="$emit('parentFn', '子组件传递的参数')">点击</button>
    </template>

在组件上使用v-model

父组件
    <template>
        <div>
            <Test :value="searchText" @input="searchText = $event"/>
        </div>
    </template>

    <script>
        import Test from "./Test";
        export default {
            components: { Test },
            data: function() {
                return {
                    searchText: ""
                }
            },
            watch: {
                searchText: function(val) {
                    console.log(val);
                }
            }
        };
    </script>

子组件
    <template>
        <input :value="value" @input="$emit('input', $event.target.value)">
    </template>

    <script>
        export default {
            props: ['value']
        }
    </script>

动画

动画示例1
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }


动画示例2
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(10px);
        opacity: 0;
    }

动画示例3
    <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>

    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }