常见的vue指令

v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 防止加载太慢页面上出现插值语法的源代码，挂载之前先隐藏与css配合: <h3 v-cloak>{{name}}</h3> [v-cloak] { display: none }
v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML

v-show和v-if

v-show通过display:none控制元素的显示隐藏

v-if通过判断表达式来确定是否渲染该元素

v-show适用于频繁操作dom的显示隐藏情况

v-if适用于不频繁操作dom的情况但如果是首次渲染时要进行判断建议用v-if 因为v-show首次一定会渲染

v-for和v-if

v-for和v-if不同时使用 v-for优先级高先循环再判断开销较大可以把v-if放到子标签里

v-model语法糖

<input v-model="content">

<input :value ="content" @input="content=$event.target.value">

www.runoob.com/jsref/dom-o…

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

事件对象和事件修饰符

事件对象

$event是默认传入的如果调用方法的时候没有传参 methods里第一个参数声明就可以接受到$event 如果要传参又要使用$event 可以传参的时候传$event占位

事件修饰符

.prevent 阻止默认事件如a向href的跳转
.stop 阻止事件冒泡
.once 只在第一次触发事件的时候触发事件侦听器
.capture 使用捕获模式
.self 只监听元素自身而不是它的子元素上触发的事件
.native 原生事件比如router-link的click事件使用方法：@click.prevent="showInfo"

keep-alive

keep-alive包含的组件会被缓存避免多次初始化

生命周期钩子

activated 当 keep-alive 包含的组件激活的时候触发
deactivated 当 keep-alive 包含的组件失活的时候触发

mounted -activated -deactivated -activated...

两个属性

include包含的组件缓存生效可以是数组字符串正则表达式
exclude排除的组件不缓存优先级大于include)

配合动态组件

// 只缓存组件name为a或者b的组件 
<keep-alive include="a,b"> 
    <component :is="currentComponent" /> 
</keep-alive>

配合vue-router使用

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>

mixin

抽离组件公共部分到一个mixin.js中然后再组件文件中导入mixin并在配置中添加mixins:[mixin]即可可抽离多个mixin mixin.js

export default {
  data() {
    return {
      commonData: '公共的数据'
    }
  },
  methods: {
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('common mounted')
  }
}

import mixin from './mixin'
import mixin2 from './mixin2'

export default {
  mixins: [ mixin, mixin2 ]
}

Vue基础知识