常用指令

指令一般是用来操作dom的

双括弧

表达式能够把括号内部的内容以字符串的方式渲染到dom上

注意： {}}中不能放js语法，会把放入其中的内容当字符串来渲染展示，无论是json对象还是数组，都只会当成字符串来展示。

v-on

• 缩写：@

• 用法：

  绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

  用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

• 修饰符：

  .stop - 调用 event.stopPropagation()。

  .prevent - 调用 event.preventDefault()。

  .capture - 添加事件侦听器时使用 capture 模式。

  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  .native - 监听组件根元素的原生事件。

  .once - 只触发一次回调。

  .left - (2.2.0) 只当点击鼠标左键时触发。

  .right - (2.2.0) 只当点击鼠标右键时触发。

  .middle - (2.2.0) 只当点击鼠标中键时触发。

  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<input v-model="name" v-on:input="inputValueChange"/>
<input v-model="name" @input="inputValueChange"/>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello world',
            name: '张三'
        }
    },
    methods: {
        inputValueChange(e) {
            console.log(e)
            console.log(this.name)
        }
    },
 })

v-if

v-if 系列包括： v-if v-else-if v-else

根据表达式的值的来有条件地渲染元素。

在切换时元素及它的数据绑定 / 组件都将被销毁并重建

div v-if="number === 1">1</div>
<div v-else-if="number === 2">2</div>
<div v-else> 大于2 </div>

const vm = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello world',
            name: '张三',
            number: 1
        }
    },
    methods: {
        inputValueChange(e) {
            console.log(e)
            console.log(this.name)
        }
    },
 })

v-show

根据表达式之真假值，切换元素的 display CSS property。

<div v-show="number === 1">v-show控制元素是否展示</div>

注意： v-if 与 v-show的区别

• v-if是 '真正' 的条件渲染，因为在切换时元素及它的数据绑定 、 组件、事件绑定都将被适当的销毁与重建

• v-show就要简单的多，无论条件成不成立，元素都将被渲染出来，v-show只是进行css的切换，显示还是隐藏

• 一般来说如果需要频繁的切换显示与不显示就采用v-show，减少元素渲染开销，只渲染一次后续只是控制显示还是隐藏。

• 如果不涉及频繁切换，可以使用v-if，只有等条件成立的时候才会进行渲染,还可以阻止后续逻辑的产生

v-for

循环，可以循环字符串、对象、数组、数字（最常用的就是数组）

一定要写上一个唯一的，不重复的key, 尽量不要用索引，如果单存只是渲染是可以的

<div v-for="(fruit, index) in fruitArray" :key="fruit">
    {{fruit}}
</div>

const vm = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello world',
            name: '张三',
            number: 1,
            fruitArray: ['苹果','橘子','香蕉']
        }
    },
    methods: {
        inputValueChange(e) {
            console.log(e)
            console.log(this.name)
        }
    },
 })

v-for扩展：

v-if与v-for不能连用

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

所以就会产生性能问题, 性能浪费 

<div v-for="fruit in fruitArray" :key="fruit" v-if="true">
    {{fruit}}
</div>
<div v-for="fruit in fruitArray" :key="fruit" v-if="false">
    {{fruit}}
</div>

// 都会循环3次，并且在循环结束后再判断显示不显示
// 并不是判断不显示就不走v-for， 因为v-for的优先级更高

v-html

v-html: 相当于innerHtml
要注意 xss攻击 （可以获取用户的cookie）， 所以要采用可信任的任容
会覆盖子元素

<div v-html="img"></div>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello world',
            name: '张三',
            number: 1,
            fruitArray: ['苹果','橘子','香蕉'],
            img: '<img src="xxx" style="width: 50px; height: 50px;" alt="图片" onerror="alert(1)" />',
        }
    },
    methods: {
        inputValueChange(e) {
            console.log(e)
            console.log(this.name)
        }
    },
 })

v-once

v-once: 只渲染一次，不重新渲染

v-test

v-test: 相当于{