Vue2常用指令总结-EW帮帮网

1. v-cloak

作用：防止页面加载时出现闪烁问题。
应用场景：在页面初始化时，避免表达式被用户看到。

代码演示：

<style>
  /* 数据没加载前，隐藏{} */
  [v-cloak] {
    display: none;
  }
</style>
<body>
  <div id="app" v-cloak>
    {{name}}<br />
    <!-- 普通加法运算 -->
    {{a+b}}<br />
    <!-- 三目运算符 -->
    成绩是否及格？？{{score>=80 ? "及格":"不及格"}}<br />
    {{1234}}<br />
    <!-- 字符串 -->
    {{'悟空'}}<br />
    <!-- 字符串加上data中的数据属性 -->
    {{"进化悟空" + name}}<br />
  </div>
  <script src="js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '黑神话悟空',
      }
    });
  </script>

详细解释：在页面渲染前，所有带有 v-cloak 属性的元素都会隐藏，这可以防止包含未编译的 Vue 标签的时间点被用户看见。

2. v-text

作用：用于将数据填充到标签中，与插值表达式类似，但没有闪动问题；如果数据中有HTML标签会将HTML标签一并输出，此处为单向绑定。
应用场景：当需要将数据展示在标签内，且不需要解析模板语法时使用。

代码演示：

<div id="app">
  <div>{{ message }}</div>
  <div v-text="message"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
  });
</script>

详细解释：v-text 会替换掉元素内的已有内容，将数据直接渲染为文本，不会像 v-html 那样解析 HTML 标签。

3. v-html

作用：用法和 v-text 相似，但可以将 HTML 片段填充到标签中；可能有安全问题，一般只在可信任内容上使用。
应用场景：需要解析并显示 HTML 内容时使用。

代码演示：

<div id="app">
  <div v-html="content"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      content: '<strong>Rendered HTML</strong>'
    }
  });
</script>

详细解释：v-html 会将数据识别为 HTML 代码进行解析，并能将 HTML 标签一起渲染出结果。

4. v-model

作用：实现双向数据绑定，用于表单输入和应用状态同步。
应用场景：在表单元素如 <input>、<select>、<textarea> 等元素上同步显示和更新数据。

代码演示：

<div id="app">
  <input v-model="message" />
  <p>v-model: {{ message }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

详细解释：v-model 会在数据变化时更新视图，视图变化时同步更新数据，常用于实时响应用户输入的场景。

5. v-for

作用：用于循环数组或对象，支持自定义键值。
应用场景：需要遍历并渲染列表数据时使用。

代码演示：

<div id="app">
  <ul>
    <li v-for="item in items" v-bind:key="item.id">{{ item.text }}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  });
</script>

详细解释：v-for 能够基于源数据多次渲染元素或模板块，key 属性有助于维护内部组件及其子树的状态。

6. v-on

作用：绑定事件监听，可简写为 @。
应用场景：需要对用户交互作出响应时使用。

代码演示：

<div id="app">
  <button v-on:click="alert('Clicked!')">Click me</button>
</div>
<script>
  new Vue({ el: '#app' });
</script>
简写：
<div id="app">
  <button @click="alert('Clicked!')">Click me</button>
</div>
<script>
  new Vue({ el: '#app' });
</script>

详细解释：v-on 用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码，可以用于执行方法或渲染动态数据。

7. v-if & v-else

作用：根据条件判断展示或者隐藏某个元素，v-if 是动态地向 DOM 树内添加或者删除 DOM 元素。
应用场景：根据条件展示不同内容时使用。

代码演示：

<div id="app">
  <button @click="awesome = !awesome">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no &#128546;</h1>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
      el:'#app',
      data:{
        awesome:true 
      }
    })
</script>

详细解释：v-if 指令用于条件性地渲染一块内容，如果其表达式返回 false 则什么也不渲染，还可以与 v-else 结合使用。

8. v-show

作用：条件渲染（动态控制 DOM 是否存在），本质是通过设置 CSS display 属性来控制隐藏。
应用场景：当元素经常切换显示状态时使用。

代码演示：

<div id="app">
  <button @click="isVisible = !isVisible">Toggle show</button>
  <h1 v-show="isVisible">Hi there</h1>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

详细解释：与 v-if 不同的是，v-show 只是简单地切换 CSS 的 display 属性，不管条件是什么，元素总是会被渲染并保留在 DOM 中。

综上所述，Vue2中的内置指令为开发者提供了强大的工具，用于控制和应用中的数据渲染以及与用户界面的交云。通过合理的应用这些指令，可以优化应用性能和用户体验。

Vue2常用指令总结

1. v-cloak

2. v-text

3. v-html

4. v-model

5. v-for

6. v-on

7. v-if & v-else

8. v-show

网站公告

今日签到

热门文章

最新发布