vue常用指令总结

随性

1,v-bind动态属性

作用 : 给标签属性赋Vue变量

语法： v-bind:属性名="vue变量"
简写： :属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

2, v-on事件绑定

作用 : 给绑定绑定事件

语法

v-on:事件名="methods中的函数"

v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">减少</button>
<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            addCountFn(num){
                this.count += num
            subFn(){
                this.count--
</script>

2.1, v-on修饰符

语法: @事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡
.prevent - 阻止默认行为

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
</template>
<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    btn(){
      console.log(1);
</script>

2.2 , v-on按键修饰符

语法:

@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键

<template>
    <input type="text" @keydown.enter="enterFn">
    <input type="text" @keydown.esc="escFn">
</template>
<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   escFn(){
     console.log("esc按键了");
</script>

3, v-model双向绑定

作用 : 把表单值和Vue变量双向绑定

语法: v-model="vue数据变量"
双向数据绑定

数据变化 -> 视图自动同步
视图变化 -> 数据自动同步

3.1 v-model修饰符

语法 : v-model.修饰符="vue数据变量"

.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在change时触发而非inupt时

4, v-html

作用 : 设置内容

语法: v-html="vue数据变量"
注意: 会覆盖插值表达式

<template>
    <p v-html="str"></p>
</template>
<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
</script>

5, v-show和v-if

作用 : 控制标签显示或隐藏

语法:

v-show="vue变量"

v-if="vue变量"

原理

v-show 用的隐藏 (频繁切换使用)

v-if 直接从DOM树上移除

<template>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
</template>
<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
</script>

6, v-for

作用 : 用数据循环生成标签

语法

v-for="(值变量, 索引变量) in 目标结构"

v-for="值变量 in 目标结构"

目标结构:

可以遍历数组 / 对象 / 数字 / 字符串

注意:
v-for的临时变量名不能用到v-for范围外
同级标签的key值不能重复

<template>
  <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
</template>
<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"]
</script>

7, 自定义指令

作用:需要对普通 DOM 元素进行底层操作，内置的指令不够用时 , 这时候就会用到自定义指令

7.1 局部注册

<template>
      <!-- <input type="text" v-gfocus> -->
      <input type="text" v-focus>
</template>
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
    directives: {
        focus: {
            inserted(el){
                el.focus()
</script>
<style>