vue中的一些常用指令

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

大家好,我是大帅子,今天给大家讲一下vue的常见指令吧,下面我们直接开始吧

---

1. 差值表达式

vue 中渲染的方式 : {{ 表达式 }}

<template>
  <div>
    <h1> {{ msg }}</h1>  //我是大帅子
  </div> 
</template>

<script>
export default {
  data() {
    return {
      msg: "我是大帅子!"
    }
  }
}
</script>

2. v-bind 简写 :

动态绑定标签的属性

v-bind:属性名="变量"
// 简写
:属性名= "变量"

// 例
<template>
  <div>
    <img :src='img' >
  </div> 
</template>

<script>
export default {
  data() {
    return {
      img: "图片地址"
    }
  }
}
</script>

3. v-on:事件名="事件处理函数" 简写 @事件名="事件处理函数"

用来绑定事件

<template>
  <div>
    <h1> {{ msg }}</h1>
    <button @click="fan">反转</button>
    <niu></niu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是大帅子!"
    }
  },
  methods: {
    fan(){
       this.msg = this.msg.split("").reverse().join("")
    }
  }
}
</script>

事件修饰符

阻止默认行为

@click.prevent="事件处理函数"

阻止冒泡

@click.stop="事件处理函数"

按键修饰符

捕获 enter 键

@keydown.enter="事件处理函数"

捕获 Esc 键

@keydown.esc="事件处理函数"

4. v-model

将表单元素和数据双向绑定

双向绑定
数据修改 => 视图更新
视图修改 => 数据更新

5. v-if ,v-show

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

<template>
  <div>
    <div v-show="niu">{{ innerHtml }}</div>

    <button @click="showNot">开关</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      innerHtml: "<button>一个按钮</button>",
      niu: true,
    };
  },
  methods: {
    showNot() {
      this.niu = !this.niu;
    },
  },
};
</script>

6. v-for

用来循环遍历元素 ,在这里我们需要注意一下 :key="" 里面的不一定是下标 , 如果有id的话我们尽量用唯一的标识

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Dsz04",
  data() {
    return {
      list: [1, 2, 34, 4, 3, 543, 6, 5543, 6, 45],
    }
  }
}
</script>

v-text和v-html

v-text 是渲染字符串，会覆盖原先的字符串
v-html 是渲染为html

<template>
    <div id="app">
        <div>{{innerHtml}}</div>
        <div v-text="innerHtml"></div>
        <div v-html="innerHtml"></div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      innerHtml:'<button>一个按钮</button>'
    }
  }
}
</script>

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅        还需努力!大家一起进步!!!