Vue指令

待我称王封你为后i 2021-11-17 13:10 451阅读 0赞

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

--------------------

### 文章目录 ###

*  1.系统指令
 *   *  1.1 插值表达式\{ \{\}\}
     *  1.2 v-cloak
     *  1.3 v-text
     *  1.4 v-html
     *  1.5 属性绑定机制：v-bind
     *  1.6 事件绑定机制：v-on
     *  1.7 举例：跑马灯效果
     *  1.8 双向数据绑定：v-model
     *  1.9 class类样式
     *  1.10 行内样式
     *  1.11 for循环：v-for
     *  1.12 if语句：显示和隐藏,v-if、v-show
 *  2.V-on事件修饰符
 *   *  2.1 冒泡问题
     *  2.2 跳转问题

# 1.系统指令 #

## 1.1 插值表达式\{ \{\}\} ##

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

## 1.2 v-cloak ##

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

[v-cloak] { 
          display: none;
        }

*  V中设置：

## 1.3 v-text ##

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

## 1.4 v-html ##

*  会解析成html元素

## 1.5 属性绑定机制：v-bind ##

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

*  简写形式，省略v-bind

## 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后面不跟冒号

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 ##

*  **数组**遍历

在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 ##

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

**方法2**：父div添加.capture

**方法3**：父div添加.self

## 2.2 跳转问题 ##

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

*  表单有提交跳转行为

--------------------

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

Vue指令

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue指令

相关 vue 指令

相关 Vue指令

相关 Vue指令

相关 Vue 指令

相关 vue指令

相关 vue指令

相关 vue指令

相关 Vue指令

相关 Vue指令