vue语法精简（方便开发查阅）
本文只是方便开发的时候快速查阅到相关语法，想看详细内容请看官网（时间久了写法都忘了，~~哭）
指令
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
计算属性
-
基本语法
<span>{{filterMsg}}</span> data: function() { return { message: '我是原始的属性' } }, computed: { filterMsg: function() { return "|||||" + this.message + "||||" } } -
set
<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);
}
}