vue常用指令

  1. v-bind

    v-bind指令可以用来绑定元素的属性，v-bind 将 imageSrc 变量的值绑定到 img 标签的 src 属性上。例如：

      <div id="app">
     <img v-bind:src="imageSrc" alt="Vue.js">
  </div>

  <script>
     new Vue({
            el: '#app',
            data: {
               imageSrc: 'logo.png'
           }
         });
  </script>

    也可以简写为：

    <img :src="imageSrc" alt="Vue.js">

    也可以绑定一个对象，例如：

    <div id="app">
   <img v-bind="{ src: imageSrc, alt: 'Vue.js' }">
</div>

<script>
   new Vue({
        el: '#app',
        data: {
           imageSrc: 'logo.png'
       }
    });
 </script>

    也可以简写为：

    <img :="{ src: imageSrc, alt: 'Vue.js' }">

    也可以绑定一个表达式，例如：

    <img :src="imageSrc + '?size=200'" alt="Vue.js">

  2. v-model

    v-model指令可以用来绑定表单元素的值，是用于创建双向数据绑定的指令，通常用于表单输入控件。例如：

    <div id="app">
   <input v-model="message">
   <p>Message: {{ message }}</p>
</div>

<script>
   new Vue({
         el: '#app',
         data: {
            message: 'Hello Vue!'
           }
          });
 </script>

    v-model绑定输入框的值到 Vue 实例中的message` 数据，并实现双向绑定。

  3. v-if / v-else

    v-if 用于条件渲染，可以根据条件动态地添加或删除 DOM 元素。

      <div id="app">
      <p v-if="isVisible">显示文字</p>
      <p v-else>隐藏文字</p>
  </div>

  <script>
  new Vue({
       el: '#app',
       data: {
          isVisible: true
        }
     });
 </script>

    v-else 用于 v-if 的条件渲染，必须紧跟在 v-if 元素之后。

  4. v-for

    v-for 用于循环渲染，可以遍历数组、对象或整数、渲染列表数据。

    <div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
    new Vue({
         el: '#app',
         data: {
           items: [
            { id: 1, text: 'Item 1' },
            { id: 2, text: 'Item 2' },
            { id: 3, text: 'Item 3' }
           ]
         }
    });
</script>

    在这个例子中，v-for 遍历 items 数组中的每个元素，并为每个元素生成一个<li> 标签。:key 是一个特殊的属性，用于帮助 Vue 识别每个节点的身份，从而优化渲染性能。

  5. v-show
    v-show 用于条件渲染，可以根据条件动态地显示或隐藏 DOM 元素,区别于 v-if，v-show 只是通过 CSS 来控制 display 样式，而不会移除 DOM 元素。。

      <div id="app">
    <p v-show="isVisible">显示文字</p>
  </div>
  <script>
    new Vue({
         el: '#app',
         data: {
           isVisible: true
         }
    });
  </script>

  6. v-on
    v-on 用于绑定事件监听器，可以监听 DOM 元素的事件，例如点击、鼠标移动、键盘输入等。

    <div id="app">
  <button v-on:click="handleClick">点击我</button>
</div>
<script>
  new Vue({
      el: '#app',
      methods: {
        handleClick() {
          alert('按钮被点击了！');
        }
      }
    });
</script>

    在这个例子中，v-on 绑定了一个 click 事件监听器，当按钮被点击时，会触发 handleClick 方法，弹出一个提示框。

  7. v-text
    v-text 用于设置元素的文本内容，会替换元素的所有子节点。

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

    在这个例子中，v-text 指令将 message 变量的值设置为<p> 元素的文本内容。

  8. v-html
    v-html 用于设置元素的 HTML 内容，会替换元素的所有子节点。

    <div id="app">
  <p v-html="htmlContent"></p>
</div>
<script>
  new Vue({
      el: '#app',
      data: {
        htmlContent: '<span style="color: red;">Hello Vue!</span>'
      }
    });
</script>

    在这个例子中，v-html 指令将 htmlContent 变量的值设置为<p> 元素的 HTML 内容。

  9. v-once
    v-once 用于只渲染元素和组件一次，当数据发生变化时，元素和组件不会重新渲染。

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

    在这个例子中，v-once 指令将 message 变量的值设置为<p> 元素的文本内容，但是当 message 变量的值发生变化时，<p> 元素不会重新渲染。

  10. v-pre
    v-pre 用于跳过这个元素和它的子元素的编译过程，输出原始 Mustache 标签。

    <div id="app">
  <span v-pre>{{ this will not be compiled }}</span>
</div>

    在这个例子中，v-pre 指令将<span> 元素的内容原样输出，不会进行编译。

  11. v-cloak
    v-cloak 用于隐藏未编译的 Mustache 标签，直到实例准备完毕。

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

    在这个例子中，v-cloak 指令将<div> 元素的内容隐藏，直到 Vue 实例准备完毕。

  12. 自定义指令
    Vue 允许自定义指令，通过 Vue.directive() 方法可以注册一个全局指令。

    Vue.directive('my-directive', {
  bind: function(el, binding, vnode) {
    // 指令绑定到元素时触发
  },
  inserted: function(el, binding, vnode) {
    // 元素插入到 DOM 时触发
  },
  update: function(el, binding, vnode, oldVnode) {
    // 元素更新时触发
  },
  componentUpdated: function(el, binding, vnode, oldVnode) {
    // 组件更新时触发
  },
  unbind: function(el, binding, vnode) {
    // 指令解绑时触发
  }
});

    Vue 允许创建自定义指令来处理特定的 DOM 操作。创建了一个名为 v-color 的自定义指令，作用是设置元素的颜色。

     <div id="app">
    <p v-color="'blue'">This text will be blue.</p>
 </div>

 <script>
    Vue.directive('color', function(el, binding) {
        el.style.color = binding.value;
    });

   new Vue({
          el: '#app'
      });
</script>