Vue中常用指令使用方法

指令

• v-html和v-text
• v-bind
• v-model
• v-on
• v-show和v-if
• v-for

v-html

<div id="app">
    <p v-html="msg"></p>
</div>

<script src="./js/vue.global.js"></script>
<script>
    let vm =Vue.createApp({
        data(){
            return {
                msg:'<h1>hello,Vue</h1>'
            }
        }
    }).mount("#app");

</script>

运行结果 ↓

注意：v-html相当于标签value，指定了该元素中的值是什么，所以使用了v-html后元素内即可不用写内容 在⻚⾯上动态渲染 HTML 是⾮常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使⽤ HTML 插值，绝不要将⽤户提供的内容作为插值内容。

v-text

v-text指令类型与插值表达式，都会把数据中的HTML标签原封不动输出，你可以把上例中的v-html替 换成v-text。

<div id="app">
    <p v-text="msg"></p>
</div>

<script src="./js/vue.global.js"></script>
<script>
    let vm =Vue.createApp({
        data(){
            return {
                msg:'<h1>hello,Vue</h1>'
            }
        }
    }).mount("#app");

</script>

运行结果 ↓

关于v-text、插值表达式、v-html之间的区别总结如下：

• v-text （对应 DOM 中的 textContent/innerText）
  • v-text 和插值表达式的区别
    • v-text 标签的指令更新整个标签中的内容
    • 插值表达式，可以更新标签中局部的内容
  • v-html （对应 DOM 中的 innerHTML）
    • 可以渲染内容中的 HTML 标签
    • 尽量避免使⽤，否则会带来危险(XSS攻击)

 v-bind

v-bind可以绑定标签的任意属性，甚⾄标签的⾃定义属性，可以写为v-bind：绑定的属性=""，也可以写为：绑定的属性=""，属性值可以写为模板字符串或者表达式

<div id="app">
    <img :src="img[0]" alt="...">
</div>

<script src="./js/vue.global.js"></script>
<script>
    let vm=Vue.createApp({
        data(){
            return {
                img:["images/img1.jpg","images/img2.jpg","images/img3.jpg"]
            }
        },
    }).mount("#app");
</script>

Vue.js中的v-bind在绑定class和style的时候做了增强，除了可以绑定字符串以外，还可以绑定对象和数组

v-bind绑定对象

我们可以传给 :class (v-bind:class 的简写) ⼀个对象，以动态地切换 class：

<div :class="{ active: isActive }"></div>

上⾯的语法表示 active 这个 class 存在与否将取决于data中的数据 isActive 的值，这个值是布尔类型。 你可以在对象中传⼊更多字段来动态切换多个 class。此外，:class 指令也可以与普通的类样式共存。

当有如下模板：

<div class="static" :class="{ active: isActive, 'text-danger': hasError }" >

</div>

data() { 
  return { 
    isActive: true, 
    hasError: false 
   } 
}

如果你想根据条件切换列表中的 class，可以使⽤三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

v-bind绑定数组

:style 的数组语法可以将多个样式对象应⽤到同⼀个元素上，和绑定class的时候使⽤数组⼀样，都相当于绑定了多个data中的数据，最终会把多个数据的值渲染，例如下⾯的演示代码：

<div :style="[redColor, bigFont]">Hello Vue.js</div>

data () { 
  return { 
    redColor: { 
      color: 'red' 
    },
    bigFont: { 
      'font-Size': '28px' 
    } 
  } 
}

v-model

• 双向数据绑定
  • 数据可以更新到视图
  • 通过视图可以更改数据

<input type="text" class="form-control" v-model="模板数据"/>

他的作用相当于我们写的@input绑定一个方法进行操作

注意：多行文本框内不能使用{{name}}进行绑定

v-on

监听DOM元素的一些事件，如：点击等，v-on：事件名称="方法名称"，或使用快捷方式@事件名称="方法名称"

<div id="app">
   <p v-on:click="hu">{{msg}}}</p>
   <p @click="hu">{{msg}}}</p>
</div>

<script src="./js/vue.global.js"></script>
<script>
   let vm =Vue.createApp({
       data(){
           return {
               msg:'<h1>hello,Vue</h1>'
           }
       },
       methods:{
           hu(){
               alert("hu")
           }
       }
   }).mount("#app");

</script>

同理，经过事件可以写为：v-on：mouseover="事件名称"或者@mouseover="事件名称"，键盘事件可以写为：v-on：keydown="事件名称"或@keydown="事件名称"

注意：此方法和js内的方法不同，在使用vue的写事件时不需要写括号，并且虽然绑定事件处可以写方法具体实现，但不推荐，很少会那样去写

补充

在DOM中绑定事件的时候，我们有可能会使⽤到事件参数，例如：阻⽌a标签或者表单的默认⾏为。

methods: { 
   handleDel (e) { 
       console.log(e.target) 
       // 阻⽌a标签的默认⾏为(a标签不再跳转) 
       //原生的javascript方法，所以我们在vue内不常用
       e.preventDefault() 
   } 
}

vue.js事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻⽌单击事件继续传播 --> 
<a @click.stop="doThis"></a> 
<!-- 提交事件不再重载⻚⾯ --> 
<form @submit.prevent="onSubmit"></form> 
<!-- 修饰符可以串联 --> 
<a @click.stop.prevent="doThat"></a> 
<!-- 只有修饰符 --> 
<form @submit.prevent></form> 
<!-- 添加事件时使⽤事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进⾏处理 -->
<div @click.capture="doThis">...</div> 
<!-- 只当在 event.target 是当前元素⾃身时触发处理函数 --> 
<!-- 即事件不是从内部元素触发的 --> 
<div @click.self="doThat">...</div>
<!-- 点击事件将只会触发⼀次 --> 
<a @click.once="doThis"></a>
<!-- 滚动事件的默认⾏为 (即滚动⾏为) 将会⽴即触发 --> 
<!-- ⽽不会等待 `onScroll` 完成 --> 
<!-- 这其中包含 `event.preventDefault()` 的情况 --> 
<div @scroll.passive="onScroll">...</div>

内联处理器中的⽅法

内联处理器中的⽅法可以接收参数，还可以使⽤特殊变量 $event 传递事件对象

<!-- 内联处理器中的⽅法 --> 
<a href="del.jsp?id=4" @click="handleDel(10, $event)">删除</a>
<!--这样声明的方法的时候就需要接受两个参数，比如下面的方法-->

methods:{
      handle(a,e){
          alert(a)
          console.log(e.target);
          alert(e.target.innerHTML);
          e.preventDefault();
   }
}

v-show

虽然v-show的值也是boolean类型，但是和v-if并不同，v-show在判断为false的时候DOM元素会添加样式：display：none，而不是直接消失

<div id="app">
       <!--v-show判断，默认为true，点击事件改变-->
        <p v-show="flag" @click="chage">显示</p>
    </div>
    <script src="js/vue.global.js"></script>
    <script>
        let vm = Vue.createApp({
            data(){
                return{
                    flag:true
                }
            },
            methods:{
                //点击事件，改变状态
                chage(){
                    this.flag=false
                }
            }
        }).mount("#app");
    </script>

使用场合：隐藏是添加样式，显示是改变样式，如果频繁切换显示隐藏状态使用v-show

运行结果 ↓ 可以看到自动添加了一个样式为display：none

v-if

虽然v-if的值也是boolean类型，但是和v-show并不同，v-if在判断为false的时候DOM元素会直接消失，而v-show会添加样式进行隐藏，而且v-if还可以配合v-else进行使用，这是v-show所做不到的

    <div id="app">
        <!--v-if判断，默认为true，点击事件改变-->
        <p v-if="flag" @click="chage">显示</p>
        <!--可以配合v-else进行使用-->
        <p v-else="flag">隐藏了</p>
    </div>
    <script src="js/vue.global.js"></script>
    <script>
        let vm = Vue.createApp({
            data(){
                return{
                    flag:true
                }
            },
            methods:{
                //点击事件，改变状态
                chage(){
                    this.flag=false
                }
            }
        }).mount("#app");
    </script>

**使用场合：**隐藏是直接删除DOM元素，显示是动态创建元素，如果只显示一次则使用v-if

运行结果 ↓ 可以看到我们自己写的标签已经消失

v-for

我们可以⽤ v-for 指令基于⼀个数组来渲染⼀个列表。v-for 指令需要使⽤ item in items 形式的特殊语法，其中 items 是源数据数组，⽽ item 则是被迭代的数组元素的别名

<ul id="list"> 
  <li v-for="todo in todos">
    {{ todo }}
  </li> 
</ul>

const app = Vue.createApp({ 
    data () { 
        return { 
            todos: ['吃饭', '睡觉', '打⾖⾖'] 
        } 
    } 
})
const vm = app.mount('#list')

v-for 还⽀持⼀个可选的第⼆个参数，即当前项的索引，可以在遍历的过程中获取当前项索引。

<ul id="list"> 
  <li v-for="(todo,index) in todos">
    {{index}} - {{ todo }}
  </li> 
</ul>

v-for和v-if⼀起使⽤的时候，v-if 的优先级⽐ v-for 更⾼，这意味着 v-if 将没有权限访问 v-for ⾥的变量

注意：我们不推荐把v-for和v-if使⽤在同⼀个元素上。