Vue（指令/条件循环）

快来打我* 2023-05-31 10:29 23阅读 0赞

### 一、指令 ###

**1. v-cloak **     解决插值表达式\{ \{  \} \} 闪烁问题.  服务器未传值到页面时阻止出现 插值表达式

**2. v-text 与 v-html**

v-text  没有闪烁问题，会覆盖标签原本的内容，但是不会清空原来的内容

v-html 可以设置标签

**3. v-bind： 绑定属性**，简写：

v-bind:class="setCla"    //双引号内的当成js表达式，用来绑定data里的数据
     v-bind:value="msg"

只能实现单向绑定，从M到V，无法双向绑定

**4.v-on  事件绑定** ，简写@

//html
    <input type="button" value="点击" v-on:click="show">
    
    //js
    import Vue from 'vue'
    
    new Vue({
      el:"#app",
      data:{
      
      },
      methods:{
    //方法的方式1.
        show:function () {
            alert("keke")
        }
    
    //2.
        show() {
         .....
       }
    
      }
    })

注意：在vm实例中调用 data 的数据或调用 methods 的方法，必须通过 this.属性名 或 this.方法名。

vm实例会监听自己data中的所有数据，当数据发生改变时，会自动同步更新到页面中，不需要手动更新。（只关心数据，不需要考虑重新渲染dom树）

设置定时器setInterval 返回的id 应该在data中定义并初始化为null ，可以让其他方法也使用到这个id 比如清除定时器时。

**5. v-model 实现表单数据双向绑定**

v-bind可以绑定做到绑定数据，但只支持单向M->V，无法实时将用户输入的数据绑定到模型中。

VUE实现数据双向绑定的方法：

*  数据劫持           通过Object.defineProperty()方法实现
 *  发布者-订阅者模式

<input type="text" name="" id="" v-model="names">
    <h1>{
       {names}}</h1>
    
    //
    var vm = new Vue({
      el:'#app',
      data:{
        names:"你好啊！"
      },

**6. v-for**

### 二、事件修饰符 ###

*  .stop  阻止冒泡 行为                            使用：在事件后面添加.stop
 *  .prevent  阻止默认事件                       使用：在事件后面添加.prevent
 *  .capture    用来实现捕获事件的机制，从外到里触发        使用：在父事件后面添加.capture
 *  .self      设置只有点击当前元素时，才触发事件处理函数   
 *  .once    让事件处理函数只触发一次

<div v-on:click="btn1">
            <input type="button" value="事件冒泡" v-on:click.stop="btn2">
          </div>
        </div>
    
     
    <div @click.capture="btn33">
        <input type="button" value="事件捕获" @click="btn34">
      </div>
    
    
      
      <a href="http://www.baidu.com" @click.pervent="aclick">我是链接</a>

注意：事件修饰符可以串联，例.prevent 与.once可以同时使用。

.self只阻止自己身上的冒泡事件，不会阻止真的冒泡事件发生，如果.self的上一层也注册了事件，冒泡依旧会发生。

### 三、元素设置样式 ###

**通过绑定属性为元素设置类样式**

**1.数组放置多个样式**

注意：数组元素需要加引号，否则会表示这是一个对象，去data中寻找，找不到会报错

在数组中三元表达式判断是否使用样式

在数组中嵌套对象判断是否使用样式

**2.对象存放多个样式**

对象中引号可加可不加

**通过使用内联样式**

1.直接在元素通过  ：style绑定形式