vue2的指令和自定义指令

1. vue内置指令
内置指令指的就是Vue.js自带的指令，开箱即用，一共有14个：

内容渲染指令
v-text
v-html
v-pre
v-cloak
v-once
条件渲染指令
v-for
v-if
v-else
v-else-if
v-show
属性绑定指令
v-model
v-bind
v-on
插槽指令
v-slot

<template>
  <div>
    <span v-text="msg"></span>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      msg: '我是一个文本信息'
    }
  }
}
</script>

1-2. v-html
该指令的作用是更新DOM元素的innerHTML，内容按普通HTML插入，用处挺多的，比如渲染字符串html，动态插入元素等。（滥用可能会引起XSS攻击，比如用户提交"<a href="https://有害网站">xxx</a>"，会被渲染成html标签）

语法如下：

<template>
  <div>
    <div v-html="span"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      span: '<div><span>我是span</span></div>'
    }
  }
}
</script>