Vue（指令/条件循环）

一、指令

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

<style>
[v-cloak]{
display:none;
}
</style>

<p v-cloak>{{msg}}</p>

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    让事件处理函数只触发一次

  <!-- 使用.stop阻止事件冒泡 -->
      <div v-on:click="btn1">
        <input type="button" value="事件冒泡" v-on:click.stop="btn2">
      </div>
    </div>

<!-- 使用.capture 使用捕获机制  点击div，先触发btn33事件，然后触发btn34--> 
<div @click.capture="btn33">
    <input type="button" value="事件捕获" @click="btn34">
  </div>


  <!-- 使用once 只触发一次事件处理函数-->
  <a href="http://www.baidu.com" @click.pervent="aclick">我是链接</a>

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

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

 

三、元素设置样式

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

1.数组放置多个样式

<h1 :class="['color','show']">我是标题</h1>

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

 

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

<h1 :class="['color','show',isactive?'active':'']">我是标题</h1>

 

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

<h1 :class="['color','show',{'active':'isactive'}]">我是标题</h1>

 

2.对象存放多个样式

<h1 :class="{color:true,show:true}">我是标题</h1>

对象中引号可加可不加

 

 

通过使用内联样式

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

<h1 :style="['color':'red','font-size':'16px']">我是标题</h1>

2.在data对象中定义，直接引用到 ：style

<h1 :style="setStyle">我是标题</h1>

多个样式时，放到数组中

<h1 :style="[setStyle1,setStyle2]">我是标题</h1>