Vue学习笔记——二、指令

2. 指令

2.1 插值表达式({{ }})和v-text的两个区别

• 使用插值表达式，在网速较慢的情况下，存在内容闪烁的问题(即直接在页面上渲染{{ 内容 }})，而v-text没有闪烁问题

• 在插值表达式中，可以使用v-cloak解决闪烁问题

  <style>
      [v-cloak]{
          display:none;
      }
  </style>
  //v-cloak属性在页面渲染完成后会被移除
  <h2 v-cloak>{{msg}}</h2>
  

• 插值表达式智慧插入内容，并不会清楚其余的内容；v-text会把元素中之前的内容都清空

2.2 v-bind指令的使用和注意点（单向数据绑定）

• v-bind 可以为元素的属性，绑定一些数据(即动态绑定属性)

• 使用简化指令 :

• v-bind 指令中，如果想要实现表达式的拼接，被拼接的字符串一定要用引号包裹起来，否则会被当做变量解析

  • <input `:title="btnTitle + ', 这是追加的内容'"`>
    

2.3 v-on指令

• 为元素绑定事件，绑定的事件处理函数，必须定义到VM实例的methods属性中

• 缩写：@

• 参数：event

  • 情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加（注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去）

  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

    <button @click="btnclick(123,$event)">
        按钮
    </button>
    

2.4 v-model（双向数据绑定）

• v-model 只能应用在表单元素中:如 input text radio checkbox textarea select

• v-model就是个语法糖，背后做了两个操作，v-bind 绑定一个value属性，v-on指令给当前元素绑定input事件

2.5 事件修饰符

• .stop 阻止冒泡行为

  • <div id="inner" @click="innerClick">
        <input type="button" value="按钮" @click="btnClick">
    </div>
    //methos方法
    innerClick(){
    	console.log('DIV被点击了')
    }
    btnClick(){
    	console.log('按钮被点击了')
    }
    //当@click没加上.stop时，默认两个方法都执行(发生冒泡机制)
    //当@click加上.stop时，只执行点击的方法(不发生冒泡机制)
               
    

• .prevent 阻止默认事件

  • 例如：Form表单提交默认会跳转到action中的页面

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

2.6 在Vue中使用类样式的四种方式

• 数组

  • <style>
        .red{
            color:red
        }
        .thin{
            font-weight:400
        }
    </style>
    <h1 :class="['red', 'thin']">这是H1</h1>
    

• 数组中使用三元表达式

  • //isactive是在data中声明的变量
    <h1 :class="['red', 'thin', isactive?'active':'']">这是H1</h1>
    

• 数组中嵌套对象

  • <h1 :class="['red', 'thin', {'active': isactive}]">这是H1</h1>
    

• 直接使用对象

  • <h1 :class="{'red':true, 'thin':true}">这是H1</h1>
    

2.7 在Vue中使用style行内样式

• 直接在元素上通过 :style 的形式，书写样式对象

  • <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个漂亮的H1</h1>
    

• 将样式对象，定义到 data 中，并直接引用到 :style 中

  • 在data上定义样式：

  • data: {
       h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }
    

  • 在元素中，通过属性绑定的形式，将样式对象应用到元素中

  • <h1 :style="h1StyleObj">这是H1</h1>
    

2.8 v-show和v-if的使用

• 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变时用 v-if 较好。
• v-show 和 v-if 只有一个作用，就是根据指定的标识符，切换元素的显示与隐藏状态
• 区别：
  • v-if 是实时的创建或移除元素，从而达到元素的显示与隐藏
  • v-show 是通过为元素 添加或移除 display:none 来实现隐藏与显示的