vue常用指令
-
v-bindv-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"> -
v-modelv-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` 数据，并实现双向绑定。
-
v-if / v-elsev-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 元素之后。
-
v-forv-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 识别每个节点的身份，从而优化渲染性能。
-
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> -
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 方法，弹出一个提示框。
-
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> 元素的文本内容。
-
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 内容。
-
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> 元素不会重新渲染。
-
v-pre
v-pre 用于跳过这个元素和它的子元素的编译过程，输出原始 Mustache 标签。<div id="app"> <span v-pre>{{ this will not be compiled }}</span> </div>在这个例子中，v-pre 指令将<span> 元素的内容原样输出，不会进行编译。
-
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 实例准备完毕。
-
自定义指令
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>