Vue指令

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web
非商业用途自由转载，保持署名，注明出处！

---

1.系统指令

1.1 插值表达式{{}}

• 每个绑定都只能包含单个表达式，不能是语句
• 网速很慢情况下,出现闪烁问题：只有加载完毕才显示内容

 <span>{{name}}</span>

1.2 v-cloak

• 解决闪烁问题，先隐藏如{{msg}}，加载完再显示
• 需要和css一起使用，css内设置：

[v-cloak] {
      display: none;
    }

• V中设置：

<span v-cloak>{{name}}</span>

1.3 v-text

• 将一个变量值渲染到指定元素
• 也解决了闪烁问题
• 会覆盖文本内容
• 纯文本

<span v-text="name"></span>

1.4 v-html

• 会解析成html元素

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

1.5 属性绑定机制：v-bind

• 绑定img中的src，div中的style，input中的value，超链接等，需用冒号，如

 <div v-bind:style="{ fontSize: size + 'px' }"></div>

• 简写形式，省略v-bind

<div :style="{ fontSize: size + 'px' }"></div>

1.6 事件绑定机制：v-on

• 点击事件：v-on:click，然后在vm中以方法形式书写

<button v-on:click="change">改变name的值</button>

简写：删除v-on:，书写@

<button @click="change">改变name的值</button>

• VM中方法：

methods: {
      change() { //上面的button按钮的点击事件
        this.name += '1';
      }
    }

1.7 举例：跑马灯效果

思路：
1.点击按钮后，截取字符串的头部放在最后一个位置，即可实现滚动效果。
2.自动连续滚动效果需设置定时器。
代码在本文开篇已给出原链接！

1.8 双向数据绑定：v-model

• 仅适用于表单元素
• v-bind只能从M到V
• v-model后面不跟冒号

 <input type="text" id="username" v-model="myAccount.username">

myAccount.username是自定义的，文本输入的内容会转变为v-model的内，即this.myAccount.username

methods: {
            submit1 () {
                alert(this.myAccount.username);
            }
        }

1.9 class类样式

• 是类样式
  方式1：传递一个数组，需要v-bind绑定

 <h1 :class="['my-red', 'my-thin']">我是hyo</h1>

方式2：数组中使用对象

<h1 :class="[ {'my-active':flag} ]">我是lyh</h1>

data中：

 flag: true

方式3：直接使用对象

  <h1 :class="classObj">我是lyh</h1>

data中：

 classObj:{style1:true, style2:false}

1.10 行内样式

<h1 :style="styleObj">我是lyh</h1>

data中：

styleObj: { color: 'red', 'font-size': '20px' }

1.11 for循环：v-for

• 数组遍历

<li v-for="item in list">{{item}}</li>

在data中给出list数组。

• 对象数组遍历，在data中列出对象，若li中需要设置索引则遍历方式为

<li v-for="(index,item) in list">{{item}}</li>{{index}}，{{item}}</li>

• 对象遍历：在data中是一个键值对形式的对象，若有2个参数，则：

 <li v-for="(value,key) in obj1">{{valie}},{{key}}</li>

若有三个参数，则最后一个为索引

• 数字遍历

 <li v-for="Count in 8">这是第 {{Count}}次循环</li>

1.12 if语句：显示和隐藏,v-if、v-show

 <div v-if="isShow">我是盒子</div>

data中设置

isShow: true

• v-show可以替换v-if
• 频繁的切换用v-show,因为v-if每次重新添加/删除DOM元素
• 希望永久隐藏则推荐v-if

2.V-on事件修饰符

2.1 冒泡问题

• 冒泡问题：若存在父子两个div，则点击子div，父div也会触发。
• 阻止冒泡：
  方法1：子div添加.stop

<div class="child" @click.stop="childClick">

方法2：父div添加.capture

 <div class="father" @click.capture="fatherClick">

方法3：父div添加.self

<div class="father" @click.self="fatherClick">

2.2 跳转问题

• 超链接有默认跳转行为
  方法1：添加.prevent以阻止

 <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

• 表单有提交跳转行为

 <form @submit.prevent action="http://www.baidu.com">

---

如有不当之处，欢迎指正!
谢谢！