vue 指令

v-text 只能渲染文本，不解析HTML，会原样输出HTML
v-html 可以渲染文本，也可以解析HTML

v-once 只渲染元素和组件一次

<template>
  <div class="index-container">
    <div v-once>{{ message }}</div>
    <div>{{ message }}</div>
    <button @click="changeMessage">修改信息</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 'jdfjdl'
    }
  },
  methods: {
    changeMessage () {
      this.message = 'aaaaa'
    }
  }
}
</script>

点击按钮时，有v-once 的值不会改变

v-bind绑定一个值给HTML的属性

<a v-bind:href="url">地址</a>
<a :href="url">地址</a>

可以绑定一个值，对象，数组..
<div v-bind="{id: 'divId'}">dfdfd</div> 等价于
<div id="divId">dfdfd</div>

v-model 双向绑定
修饰符：

.lazy 取代input 监听change事件
.number 输入字符串转为有效数字
.trim 输入首尾空格过滤

v-show
显示和隐藏元素，相当于display: none;
v-show 不支持<template>元素，也没有v-else
<template v-show="message">dfdfdfd</template>
并没有什么卵用，直接显示内容了
v-if
可以使用在<template>元素上，需要key值管理可复用的元素，而且可以高效的渲染

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if也是惰性的，如果在初始渲染时条件为false时，则什么也不做，直到条件第一次为true时，才会开始渲染条件块
v-show相对要简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的display属性进行切换
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-for
<div v-for="(item, index) in items" :key="index"></div>

v-on 监听事件
<button v-on:click="doThis"></button>
v-on用在普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的 自定义事件。

v-pre
可以跳过这个元素和他的子元素的编译过程，可以用来显示原始插值，跳过大量没有指令的节点可以加快编译

<div v-pre>{{ message }}</div> // 显示在页面是 {{ message }}

v-clock
保持在元素上直接到关联实例结束编译，和css 规则如 [v-cloak] {display: none}一起用时，这个指令可以隐藏未编译的插值标签，直到实例准备完毕。

<div v-cloak>{{ message }}</div>
[v-cloak] { 
  display: none
}

v-slot
单个插槽，具名插槽，作用域插槽

slotDemo.vue

<template>
  <div class="slot-container">
    <slot/>
  </div>
</template>
<script>
export default {
  name: 'SlotDemo'
}
</script>

引用该组件

<slot-demo>
  <div class="box">
    <h1>slot demo</h1>
    <p>this is slot demo!</p>
  </div>
</slot-demo>

引用时组件内部书写的代码会被写入slot标签的位置

slot 还可以为其设置一个默认内容，在没有提供内容的时候被渲染，如果提供了内容则被替代。
具名插槽
<slot name="header">header 具名插槽</slot>
默认显示slot内的内容

<slot-demo>
  <div class="box">
    <h1>slot demo</h1>
    <p>this is slot demo!</p>
  </div>
  <div slot="header">放到具名插槽内的内容</div>
</slot-demo>

引用时添加属性slot对一个的值与组件内部slot中的那么一致就会被匹配
此时引用的这个内容会覆盖默认的文本
并且没有slot属性的会写到slot没有名字的插槽中有对应值的才会写到对应的具名插槽中

作用于插槽

<slot-demo :items="colors" title="Colors">
  <template scope="color">
    <div :style="{background:color.hex}">{{ color.name }}</div>
  </template>
</slot-demo>
<script>
import SlotDemo from '../components/slot-demo'
export default {
  components: {
    SlotDemo
  },
  data () {
    return {
      colors: [
        { name: 'Yellow', hex: '#F4D03F'},
        { name: 'Green', hex: '#229954' },
        { name: 'Purple', hex: '#9B59B6' }
      ]
    }
  }
}
</script>

<div class="color-list">
  <h2>{{ title }}</h2>
  <div class="list">
    <div class="list-item" v-for="(item, index) in items" :key="index">
      <slot v-bind="item"></slot>
    </div>
  </div>
</div>
<script>
export default {
  name: 'SlotDemo',
  props: {
    title: {
      type: String,
      default: 'Colors'
    },
    items: {
      type: Array
    }
  }
}
</script>

v-slot 简写 #名字
引用的时候简写，并且只能在template标签中使用

<div slot="header">放到具名插槽内的内容</div>
等同于
<template #header>简写</template>

自定义指令
全局指令：
一般在项目的main.js文件中使用Vue.directive()来注册

Vue.directive('name', {
  // 自定义指令要做到事情
})

局部注册自定义指令：

import MyCustomDirective from './directives/my-custom-directive.js' export default {
    name: 'App',
    directives: { 'my-custom-directive': MyCustomDirective }
}