Vue基本使用二-指令

指令 (Directives) 是带有 v- 前缀的特殊属性

常用指令

v-text

// 用来设置当前元素的文本内容。相当于 innerText 的功能
<h1 v-text="msg">默认的文本内容</h1>

v-html

<h1 v-html="msg">默认的文本内容</h1>

v-bind

• 作用:用来给当前元素添加HTML属性，进行HTML属性数据的动态绑定
• v-bind:title 用来给当前元素绑定 title 属性，冒号后面表示要绑定的属性名称
• :zhidingyi 可以绑定自定义属性

<!-- 完整语法 -->
 <h1 v-bind:title="msg" v-bind:zhidingyi="xm">默认的文本内容</h1>
 // <!-- 缩写 -->
 <h1 :title="msg" :zhidingyi="xm">默认的文本内容</h1>
 <!-- 引号内是表达式或属性 -->
<a :href="http://www.baidu.com">百度</a>

样式处理 class和style

class:

<!-- 1 -->
<!-- 对象的键表示类的名称，值为true表示添加类，false不添加-->
<div v-bind:class="{ active: true }"></div> 等价于
<div class="active"></div>

<!-- 2 -->
<div :class="['active']"></div> 等价于
<div class="active"></div>

<!-- 3 -->
<!-- 数组中元素不带引号，表示属性，属性的值表示类名 -->
<div v-bind:class="[{ active: true }, shuxingClass]"></div> ===>
<div class="active text-danger"></div>

style：

<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 baseStyles是data的属性，其值类型是对象（baseStyles：{fontSize: '30px'}）-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-on

• 作用：绑定事件
• 语法：v-on:click=”say” or v-on:click=”say(‘参数’, $event)”
• 简写：@click=”say”

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<!-- name:属性，带引号就是字符串；$event:用于获取当前元素节点 -->
<div @click="fn(name,$event)"></div>

vue配置项methods提供方法或事件
methods: {
    doSomething：function（）{},
    fn:function (na, e) {
        e.currentTarget.innerHTML='hello'
        this.msg = na
    }
    }

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认行为，调用 event.preventDefault()
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
• .once 事件只触发一次

<-- @click.事件修饰符 -->
<button @click.stop="fn1">按钮</button>

v-model

<!-- 实现数据的双向绑定。监听用户的输入事件以更新数据-->
<!-- 选择后触发cacl事件， opt的值发生改变 -->
<select @change="calc" v-model="opt">
    <option value="1">北京</option>
    <option value="2">天津</option>
</select>

v-for

<!-- item 为值，key 为键，index 为索引 -->
<!-- 通过 key 属性来让Vue保证列表中每一项的唯一性，提高渲染的性能 -->
<!-- 说明：使用 key，vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。-->
<div v-for="(item, key, index) in obj" :key="index">{{item}}</div>
<div v-for="item in obj">{{item}}</div>

v-if 和 v-show

• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式值的真假，切换元素CSS 的 display 样式属性

<h1 v-show="isShow">
<h1 v-if="isShow">

v-pre和v-once

• v-pre：跳过这个元素和它的后代元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
• v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。用于优化更新性能。

<span v-pre>{{ this will not be compiled }}</span>
<span v-once>This will never change: {{msg}}</span>