Vue学习记录之指令使用

2021-04-05

字数统计: 2.1k字 | 阅读时长≈ 9分

一、前言

记录学习Vue的点滴，避免遗忘，共勉之，本博客部分例子和理论来自《Vue.js权威指南》一书。

1 2	使用工具: WebStorm Vue版本: v2.6.12开发版本

二、基础学习

2.1 插值表达式简单使用

例如：

1
2
3

<div id="app">
    <span>Text: {{text}}</span>
</div>

使用双大括号{{}}`将数据渲染到页面，例子中的标签`{{text}}将会被相应的数据对象text属性的值替换掉，当text的值发生改变时，文本中的值也会联动地发生变化。如只需渲染一次，后续数据不再关心，可以通过“*”实现，如：

1	<span>Text: {{*text}}</span>

<script src="../js/vue.js"></script>
<script>
    var vue1 = new Vue({
        el: '#app',
        data: {
            text: '学习Vue！！'
        }
    })
</script>

显示结果：Text: 学习Vue！！

2.2 基本指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是 JavaScript表达式和过滤器。指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上。

2.2.1 v-if 指令

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为fale，那么对应的元素就会从DOM中移除：否则，对应元素的一个克隆将被重新插入DOM中。

1
2
3

<div id="app">
    <span v-if="show">路漫漫其修远兮，吾将上下而求索</span>
</div>

var vue1 = new Vue({
    el: '#app',
    data: {
        show: true
    }
})

根据show设置的true或者false值（可使用表达式判断，如show: 2 > 1），来控制上面的span是否显示，通过审查元素可知，当show为false时，该span不存在。

2.2.2 v-show 指令

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当 v-show赋值为 false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式 style=" display:none"，v-show不支持<template>语法，不能加在body标签。

1
2
3

<div id="app">
    <span v-show="show">路漫漫其修远兮，吾将上下而求索</span>
</div>

var vue1 = new Vue({
    el: '#app',
    data: {
        show: false
    }
})

当show为true时，审查元素为：

1	<span>路漫漫其修远兮，吾将上下而求索</span>

当show为false时，审查元素为：

1	<span style="display: none;">路漫漫其修远兮，吾将上下而求索</span>

v-if是惰性的——如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show简单得多—元素始终被编译并保留，只是简单地基于CSS切换。

一般来说，vif有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好：如果在运行时条件不大可能改变，则使用v-if较好。

2.2.3 v-else 指令

v-else就是 JavaScript中else的意思，必须跟着v-if（书上的内容是：~~它必须跟着v-if或v-show~~，但是我试了几次，加上百度搜索，v-show是不支持跟v-else的），充当else功能。

<div id="app">
    <div v-if="num >= 80 ">成绩等级：优秀</div>
    <div v-else-if="num >= 70">成绩等级：良好</div>
    <div v-else-if="num >= 60">成绩等级：及格</div>
    <div v-else-if="num >= 0">成绩等级：不及格</div>
    <div v-else>成绩等级：输入错误</div>
</div>

var vue1 = new Vue({
    el: '#app',
    data: {
        num: -60  // 显示结果： 成绩等级：输入错误
    }
})

2.2.4 v-model 指令

v- model指令用来在 Input、 select、text、 checkbox、 radio等表单控件元素上创建双向数据绑定。根据控件类型v- model自动选取正确的方法更新元素。尽管有点神奇，但是v- model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

<div id="app">
    姓名：<input type="text" class="text" v-model="user.name" placeholder="请输入姓名"><br/>
    性别：
    <input type="radio" class="radio" id="man" value="man" v-model="user.sex"><label for="man">男</label>
    <input type="radio" class="radio" id="woman" value="woman" v-model="user.sex"><label for="woman">女</label> <br/>
    兴趣：
    <input type="checkbox" id="book" value="book" v-model="user.interest"><label for="book">阅读</label>
    <input type="checkbox" id="swim" value="swim" v-model="user.interest"><label for="swim">阅读</label>
    <input type="checkbox" id="game" value="game" v-model="user.interest"><label for="game">阅读</label>
    <input type="checkbox" id="song" value="song" v-model="user.interest"><label for="song">阅读</label> <br/>
    身份：
    <select v-model="user.identity">
        <option value="teacher">教师</option>
        <option value="doctor">医生</option>
        <option value="lawyer">律师</option>
    </select>
    <div>
        <p>user: {</p>
        <p>&emsp;&emsp;name: {{user.name}}</p>
        <p>&emsp;&emsp;sex: {{user.sex}}</p>
        <p>&emsp;&emsp;interest: {{user.interest}}</p>
        <p>&emsp;&emsp;identity: {{user.identity}}</p>
        <p>}</p>
    </div>
</div>

var vue1 = new Vue({
    el: '#app',
    data: {
        user: {
            name: '',
            sex: '',
            interest: [],
            identity: 'doctor'
        }
    }
})

一直都听说Vue的双向数据绑定，但是真正使用的时候才体会到真香，当选项发生变化时，值将会自动进行变化（最后的div就是显示数据，可在页面直观看到）。

2.2.5 v-for 指令

我们可以使用v-for指令基于源数据重复渲染元素，比较常见的就是遍历数组或者集合。

<ul>
    <li v-for="(name, index) in list">
        <!--  name为数组遍历出的选项，index为从0开始的数组索引  -->
        {{index}} - {{name}}
    </li>
</ul>

var vue1 = new Vue({
    el: '#app',
    data: {
        list: [
            "zhangsan", "lisi", "wangwu", "zhaoliu"
        ]
    }
})

2.2.6 v-text 指令

v-text指令可以更新元素的 textcontent在内部，{ Mustache}插值也被编译为 textNode的一个v-text指令。

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

var vue1 = new Vue({
    el: '#app',
    data: {
        text: '学习Vue！！'
    }
})

上面的显示基本与插值表达式效果协同，即与<span>{{text}}</span>相同。

2.2.7 v-html 指令

v-html指令可以更新元素的 innerHTML。内容按普通HTML插入——数据绑定被忽略。

1	<span v-html="html"></span>

var vue1 = new Vue({
    el: '#app',
    data: {
        html: '<font color="#7fff00">插入HTML片段</font>'
    }
})

页面显示的字体颜色为设定的#7fff00

2.2.8 v-bind 指令

y-bind指令用于响应更新HTML特性，将一个或多个 attribute，或者一个组件prop动态绑达式。 v-bind可以简写为：

1
2
3

<img v-bind:src="imgSrc">
<!--  简写  -->
<img :src="imgSrc">

var vue1 = new Vue({
    el: '#app',
    data: {
        // 百度找的网图
        imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.store.itangyuan.com%2Fp%2Fchapter%2Fattachment%2Feg-wetIUeA%2FEgfWE_bsetAuEgjw4BEseTusgtaGgVsV7V52EM16fhHB5NfT4Co1Gu6.jpg&refer=http%3A%2F%2Fp.store.itangyuan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620209835&t=da0682a39fec05e0a2a8fa8df7180e29'
    }
})

本文作者： tenyears
本文链接： https://tenyears94.gitee.io/2021/04/05/Vue学习记录之指令学习/
版权声明： 本博客所有文章转载请注明出处！