VUE常见指令

v-cloak   v-text   v-html   v-pre v-once
v-model  v-on   v-bind   v-if v-show   v-for

1、v-cloak解决插值表达式的闪动问题

用法

#css
[v-cloak] {
  display: none;
}

#html
<div v-cloak>
  {{ message }}
</div>

2、数据绑定指令★

v-text填充纯文本

 <div v-text="msg"></div>

√无闪动问题，且相比插值表达式更加简洁

v-html填充HTML片段

<div v-html="msg"></div>

×存在安全问题（跨站脚本攻击）
本网站内部数据可以使用，来自第三方的数据不可以用

v-pre 填充原始信息

<div v-pre>{{msg}}</div>

显示原始信息，跳过编译过程（分析编译过程)

3、v-once只编译一次

<div v-once>{{msg}}</div>

应用场景：如果显示的信息后续不需要再修改，使用v-once,可以提高性能

4、v-model双向绑定数据（表单）

<div>{{msg}}</div>
<input type="text" v-model="msg">

5、v-on事件绑定

<button v-on:click="num++">点击1</button>

①简写  v-on:click→@click

<button @click="num++">点击2</button>

②函数调用（方法里用到this）

• 直接绑定函数名称

<button v-on : click='say ' >Hello</ button>

• 调用函数

<button v-on:click=' say () '>say hi</button>

③参数传递（普通参数和事件对象）

<button v-on:click=' say (1,2,$event) '>say hi</button>

1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

④修饰符

事件修饰符

• .stop 阻止冒泡

 <button @click.stop="handle">点击</button>

• .prevent 阻止默认行为

// 点击a标签不会发生跳转
<a href="https://www.baidu.com/" @click.prevent="handle">百度</a>

按键修饰符

• .enter回车键

<input @keyup.enter='submit'>

• .delete删除键

<input type="text" v-model="uname" @keyup.delete="clearContent">

6、v-bind属性绑定

<a v-bind:href="url">百度</a>

简写  v-bind:href→:href

<a :href="url">百度</a>

7、样式绑定

①class样式处理

• 对象语法

// html
<div :class="{active:isActive,error:isError}">测试样式</div>

// javaScript
data: {
                isActive: true,
                isError: true
            }

• 数组语法

// html
<div :class="[activeClass,errorClass]">测试样式</div>

// javaScript
data: {
                activeClass: 'active',
                errorClass: 'error'
            }

②style（内联）样式处理

• 对象语法

// html
 <div :style="{border:borderStyle,width:widthStyle,height:heightStyle}">样式测试</div>

// javascript
  data: {
    borderStyle: "1px solid blue",
    widthStyle: "100px",
    heightStyle: "200px",
  }

简化版

// html
<div :style="objStyles"></div>

// javaScript
data: {
        objStyles: {
          border: '1px solid pink',
          width: '200px',
          height: '100px'
        }
      }

• 数组语法

<div v-bind:style=" [basestyles,overridingstyles] "></div> // 两者是覆盖的关系

8、分支结构★

v-if

原理 控制元素是否渲染到页面

<div id="app">
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score<90 && score>=80">良好</div>
    <div v-else-if="score<80 && score>=60">一般</div>
    <div v-else>比较差</div>
</div>

v-show

原理 修改元素的display,实现显示隐藏

// html
<div v-show='flag'>测试v-show</div>

// javaScript
data: {
        flag: true
      }

9、v-for循环结构★

• 遍历数组

// html
<li v-for="item in fruits">{{item}}</li>
<li v-for="(item,index) in fruits">{{index}}{{item}}</li>
<li :key="index" v-for="(item,index) in myFruits"> // key帮助vue区分不同的元素，从而提高性能

// javascript
data: {
        fruits: ['apple', 'orange', 'banana'],
       }

• 遍历对象

value(值)、key（键）、index（索引）
名字可以自定义，顺序是固定的

// html
 <div v-for="(value,key,index) in obj">{{value+'---'+key+'---'+index}}</div>

// javascript
data: {
    obj: {
        uname: '李四',
        age: 12,
        gender: 'male'
    }

• v-if和v-for结合使用

只有符合if条件的，才能渲染出对应结果

<div v-if='value==12' v-for='(value，key,index) in object '></div>