Vue指令

Euphoria0901
136 阅读4分钟

Vue指令指的是以v-开头的一组特殊语法。

  1. 内容绑定，事件绑定
  • v-text
  • v-html
  • v-on基础
  1. 显示切换，属性绑定
  • v-show
  • v-if
  • v-bind
  1. 列表循环，表单元素绑定
  • v-for
  • v-on补充
  • v-model

内容绑定，事件绑定

v-text

设置标签的文本值（textContent）。

默认写法会替换全部内容，使用差值表达式{{}} 可以替换指定内容。内部支持写表达式。

HTML代码如下：

<div id="app">
    <!-- 添加其余符号 需要使用单引号 -->
    <h2>{{ message +'!' }}</h2>
    <h2 v-text="message+'!'"></h2>
    <h4 v-text="info+'!!'"></h4>
</div>

JS代码如下:

var app = new Vue({
    el: '#app',
    data:{
        message: 'v-text指令',
        info: '设置标签的文本值'
    }
})

页面效果显示如下：

image.png

v-html

设置标签的innerHTML。

内容中有html结构会被解析为标签。

v-text指令无论内容是什么，只会解析为文本。

解析文本使用v-text，需要解析html结构使用v-html。

HTML代码如下：

<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>

JS代码如下：

var app = new Vue({
    el: '#app',
    data:{
       content: "<a href='https://www.baidu.com'>百度一下</a>"
    }
})

页面效果如下：

image.png

v-on基础

为元素绑定事件。

事件名不需要写on。指令可以简写为@。

绑定的方法定义在methods属性中。

方法内部通过this关键字可以访问定义在data中数据。

HTML代码如下：

<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt" />
    <input type="button" value="v-on简写" @click="doIt"/>
    <input type="button" value="双击事件" @dblclick="doIt"/>
    <h3 @click="changeFood">{{ food }}</h3>
</div>

JS代码如下：

var app = new Vue({
    el:'#app',
    data:{
        food:'水蜜桃'
    },
    methods:{
        doIt:function(){
            alert("v-on!!");
        },
        changeFood:function(){
            // 给food元素后面添加字符串
            this.food+="很好吃哇！";
        }
    }
})

页面效果如下：

image.png

案例-计数器

涉及的知识内容：

  • 创建Vue实例时：el（挂载点），data（数据），methods（方法）。
  • v-on指令的作用是绑定事件，简写为@。
  • 方法中通过this关键字获取data中的数据。
  • v-text指令的作用是设置元素的文本值，简写为{{}}。
  • v-html指令的作用是设置元素的innerHTML。 HTML代码如下：
<div id="app">
    <div id="input-num">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
</div>

JS代码如下：

var app = new Vue({
    el: '#app',
    data: {
        num:1
    },
    methods:{
        add:function(){
            if(this.num < 10){
                this.num++;
            }else{
                alert("不能超过10！！");
            }
        },
        sub:function(){  
            if(this.num > 0){
                this.num--;
            }else{
                alert("不能小于10！！");
            }
        }
    }
})

页面效果如下：

image.png

显示切换，属性绑定

v-show

根据表达值的真假，切换元素的显示和隐藏。

原理是修改元素的display属性，实现显示隐藏。

指令后面的内容，最终都会解析为布尔值。值为true元素显示，值为false元素隐藏。

数值改变之后，对应元素的显示状态会同步更新。

HTML代码如下：

<div id="app">
    <input type="button" value="点击切换图片显示" @click="changeStatus" /><br/>
    <img v-show="isShow" src="../cln.jpg" alt=""><br/><br/>
    <input type="button" value="累加年龄" @click="addAge" /><br/>
    <img v-show="age>=18" src="../pic/taibei.jpg" alt="">
    <!-- 此处使用表达式作为参数，当点击累加年龄按钮，满足条件显示图片 -->
</div>

JS代码如下：

var app = new Vue({
    el: '#app',
    data:{
        isShow: true,
        age:17
    },
    methods:{
        changeStatus:function(){
            this.isShow = !this.isShow;
        },
        addAge:function(){
            this.age++;
        }
    }
})

页面效果如下：

image.png

v-if

根据表达值的真假，切换元素的显示和隐藏（操作dom元素）。

本质是通过操纵dom元素来切换显示状态。

表达式的值为true，元素存在于dom树中；值为false，从dom树中移除。

<p v-if="表达式" >v-if指令</p>

频繁切换的元素使用v-show指令，反之使用v-if指令，前者的切换消耗小。

v-bind

设置元素的属性（比如src，title，class）。

完整写法是v-bind：属性名，简写的话可以直接省略v-bind，只保留：属性名。

v-bind:属性名=表达式

需要动态的增删class，建议使用对象的方式。

如{active：isActive}，active是对象， 意思是active这个类名是否生效，取决于这个isActive的值。

HTML代码如下：

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br/>
    <img :src="imgSrc" alt="" :title="imgTitle+'~~'" 
        :class="isActive?'active':''" @click="toggleActive">
    <!-- 此处使用三元表达式 -->
    <br/>
    <img :src="imgSrc" alt="" :title="imgTitle+'~~'" 
        :class="{active:isActive}" @click="toggleActive">
    <!-- 此处使用对象的方式 -->
</div>

JS代码如下：

var app = new Vue({
    el: '#app',
   data:{
        imgSrc:"../pic/taibei.jpg",
        imgTitle:"这里是台北呢",
        isActive:false
    },
    methods:{
        toggleActive:function(){
            this.isActive = !this.isActive;
        }
    }
})

页面效果如下：

image.png

案例-图片切换

列表数据采用数组存储。

页面效果：

image.png

列表循环，表单元素绑定

v-for指令

根据数据生成列表结构。

数组经常和v-for结合使用。

语法是（item，index）in 数据，item是遍历的每一个元素，index是索引。

item和index可以结合其他指令一起使用。

数组长度的更新会同步到页面上，是响应式的。 HTML代码：

<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
    <li v-for="item in arr">
        城市：{{ item }}
    </li>
    <br/>
    <li v-for="(item,index) in arr">
        {{ index+1 }} 城市：{{ item }}
    </li>
    <h3 v-for="item in fruits" v-bind:title="item.name">
        {{ item.name }}
    </h3>
</ul>

JS代码：

data:{
    arr:["北京","上海","广州","深圳"],
    fruits:[
        {name:"水蜜桃"},
        {name:"荔枝"}
    ]
},
methods:{
    add:function(){
        this.fruits.push({name:"龙眼"});
    },
    remove:function(){
        this.fruits.shift();
        // shift()移除最左边的元素
    }
}

页面效果：

image.png

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数。

定义方法时需要定义形参来接收传入的实参。

事件的后面跟上.修饰符，可以对事件进行限制。 如.enter可以限制触发的按键为回车，事件修饰符有多种，更多的文档链接：cn.vuejs.org/v2/api/#v-o… HTML代码：

<input type="button" value="点击一下" @click="tips(123,'测试一下')">
<input type="text" @keyup.enter="sayHi">

JS代码：

methods:{
    tips:function(p1,p2){
        console.log("Hello Vue!");
        console.log(p1);
        console.log(p2);
    },
    sayHi:function(){
        alert("Welcome~");
    }
}

页面效果： image.png

v-model指令

便捷的获取和设置表单元素的值（双向数据绑定）。

绑定的数据会和表单元素的值相关联。

HTML代码：

<input type="button" value="修改内容" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h3>{{ message }}</h3>

JS代码：

data:{
    message:"前端学习"
},
methods:{
    getM:function(){
        alert(this.message);
    },
    setM:function(){
        this.message="Java开发";
    }
}

页面效果：

image.png

案列-记事本

  • 列表结构可以通过v-for指令结合数据生成。
  • v-on结合事件修饰符可以对事件进行限制，比如.enter。
  • v-on在绑定事件时可以传递自定义参数。
  • 通过v-model可以快速的设置和获取表单元素的值。
  • 基于数据的开发方式。 页面效果：

image.png

avatar
文章
阅读
粉丝