Vue2-内置指令

1# 内置指令

指令	描述
v-bind	动态绑定DOM元素属性，可简写为 :xx
v-model	用于表单控件中，实现数据的双向绑定
v-for	模板渲染，循环遍历数组或对象并输出相应的元素或属性
v-on	事件绑定，为 DOM 元素绑定相应的事件处理函数
v-if / v-else	条件渲染，控制 DOM 节点的存在与否来控制元素的显隐
v-show	条件渲染，调整 CSS 的 display 属性来控制元素的显隐
v-text	渲染文本，不可解析 html 标签
v-html	渲染文本，可解析 html 标签，存在安全隐患
v-cloak	特殊属性，与 CSS 配合使用，可阻止页面显示未被渲染的元素
v-once	仅动态渲染一次，且不再重复渲染
v-pre	跳过编译这个元素和子元素，显示原始的标签以减少编译的时间

2# 示例

<template>
  <div>
    <!-- 绑定数据：v-bind / v-model -->
    <a v-bind:href="url">哔哩哔哩</a>
    <a :href="url">哔哩哔哩</a>
    <input type="text" v-model="inputStr" />

    <!-- 遍历数据：v-for -->
    <ul>
      <!-- 遍历对象 -->
      <li v-for="(value, key) of obj" :key="key">{{ key }}-{{ value }}</li>
    </ul>

    <!-- 绑定事件：v-on -->
    <button v-on:click="n++">点我n+1</button> <br />
    <button @click="n++">点我n+1</button> <br />

    <!-- 条件渲染：v-if / v-else-if / v-else / v-show -->
    <div v-if="n % 3 === 0">IF-1</div>
    <div v-else-if="n % 3 === 1">IF-2</div>
    <div v-else>IF-3</div>

    <div v-show="isShow">hello, {{ name }}</div>

    <!-- 特定渲染：v-text / v-html / v-cloak / v-once / v-pre -->
    无渲染 str: <span>{{ str }}</span> <br />
    v-text 渲染 str: <span v-text="str"></span> <br />
    v-html 渲染 str: <span v-html="str"></span> <br />
    <!-- [v-cloak]{ display: none;} 当页面刷新较慢时，不显示未被渲染的元素 -->
    v-cloak 渲染 str: <span v-cloak>{{ str }}</span> <br />
    v-once 渲染 n: <span v-once>{{ n }}</span> <br />
    v-pre 渲染 n: <span v-pre>{{ n }}</span> <br />
  </div>
</template>

<script>
export default {
  data: {
    name: "leaf",
    url: "https://bilibili.com/",
    inputStr: "",
    str: "<span>带有span的字符串</span>",
  },
};
</script>