【Vue.js 牛刀小试】：第二章 - 常见的指令的使用

时间  2019-11-07
标签 Vue.js 牛刀小试 第二 常见的 指令 使用 栏目 JavaScript 繁體版
原文   原文链接

系列目录地址

前言

        在上一章中，咱们了解了一些在使用 Vue 进行开发中常常会遇到的基础概念，与传统的前端开发不一样，Vue 可使咱们没必要再使用 JavaScript 去操做 DOM 元素（仍是能够用，可是极度不推荐），而这一优秀特性的核心就是 Vue 的指令系统，本章，一块儿来学习 Vue 的指令系统。javascript

        仓储地址：Chapter01-Rookie Directivescss

干货合集

        一、 v-cloakhtml

        在使用Vue的过程当中，当咱们引入了 vue.js 这个文件以后，浏览器的内存中就存在了一个 vue 对象，此时，咱们就能够经过构造函数的方式建立出一个 vue 的对象实例，后面就能够对这个实例进行操做。前端

        若是在这个过程当中，对于 vue.js 的引用由于某些缘由没有加载完成，此时，未编译的 Mustache 标签就没法正常显示。例如，在下面的例子中，咱们模拟将网页加载速度变慢，此时就能够看见，页面最早开始会显示出插值表达式，只有 vue.js 加载完成后，才会渲染成正确的数据。vue

<div id="app">
    <p>{{msg}}</p>
</div>

<script src="../lib/vue.js"></script>

<script> new Vue({ el: '#app', data: { msg: 'hello world' } }); </script>
复制代码

页面闪烁
        这时候，咱们就可使用v-cloak指令用于隐藏未编译完成的插值表达式，通常咱们在使用时会与添加一个隐藏该元素的样式同时使用。 

<!-- 添加 v-vloak 样式 -->
<style> [v-cloak] { display: none; } </style>

<div id="app">
	<!-- 添加 v-vloak 指令 -->
    <p v-cloak>{{msg}}</p>
</div>
复制代码

        你们能够看到，当页面没有显示内容时，此时 p 标签添加了一个 v-cloak 属性，同时，从右侧的样式中能够看到，隐藏显示，当加载完成后， p 标签上去除了该属性，同时插值表达式也编译完成，正确显示出来。 java

v-cloak使用
         二、 v-text 与 v-html

        v-text 与 v-html 指令均可以更新页面元素的内容，不一样的是，v-text 会将数据以字符串文本的形式更新，而 v-html 则是将数据以 html 标签的形式更新。git

        在更新数据上，咱们也可使用差值表达式进行更新数据，不一样于 v-text、v-html 指令，差值表达式只会更新本来占位插值所在的数据内容，而 v-text、v-html 指令则会替换掉整个的内容。程序员

<div id="app">

	<p>+++++++++ {{msg}} -----------</p>
	<p v-text="msg">=================</p>
	<p v-text="msgHtml">==============</p>
	
	<p v-html="msgHtml">============</p>

</div>

<script> new Vue({ el: '#app', data: { msg: 'hello world', msgHtml: '<h3 style="color:green">I want to learn vue.js</h3>' } }); </script>
复制代码

更新内容

        三、 v-bindgithub

        v-bind 能够用来在标签上绑定标签的属性（例如：img 的 src、title 属性等等）和样式（能够用style的形式进行内联样式的绑定，也能够经过指定class的形式指定样式）。同时，对于绑定的内容，是作为一个 js 变量，所以，咱们能够对该内容进行编写合法的 js 表达式。数据库

        在下面的示例中，咱们将这个按钮的 title 和 style 都是经过 v-bind 指令进行的绑定，这里对于样式的绑定，咱们须要构建一个对象，其它的对于样式的绑定方法，咱们将在后面的学习中提到。

<div id="app">
    <!-- v-bind：能够用来在标签上绑定标签的属性和样式，对于绑定的内容，能够对该内容进行编写合法的 js 表达式 能够简写为 :要绑定的内容 -->
    <!-- <input type="button" value="按钮" v-bind:title="msgTitle + 'lalala'" v-bind:style="{color:colorStyle,width:widthStyle+'px'}"> -->

    <!-- 使用 : 简写 -->
    <input type="button" value="按钮" :title="msgTitle + 'lalala'" :style="{color:colorStyle,width:widthStyle+'px'}">
</div>

<script> new Vue({ el: '#app', data: { msgTitle: '这是我自定义的title属性', colorStyle: 'red', widthStyle: '120' } }); </script>
复制代码

        效果示意图以下所示：

v-bind
         四、 v-on

        在传统的前端开发中，当咱们想对一个按钮绑定事件时，咱们须要获取到这个按钮的 dom 元素，再对这个获取到的 dom 进行事件的绑定。在咱们学习 vue 的过程当中，咱们能够秉持一个思想，对于 dom 的操做，所有让 vue 替咱们完成，咱们只关注业务代码实现，所以，咱们可使用 vue 内置的 v-on 指令来替咱们完成事件的绑定。         传统的元素 js 写法以下所示

<input type="button" value="点我啊~~~" id="btn">

<script> // 传统的事件绑定方法 document.getElementById('btn').onclick = function () { alert('传统的事件绑定方法'); } </script>
复制代码

        在使用v-on指令对事件进行绑定时，咱们须要在标签上指明 v-on:event(click、mousedown、mouseup 等等) 绑定的事件。

<input type="button" value="点我啊~~~" id="btn" v-on:click="alert(1111)">
复制代码

        这样就能够了吗？咱们能够测试下，哦吼，报错了，vue 提醒咱们属性或者方法在 vue 实例中未定义，原来在 vue 的设计中许多事件处理逻辑会更为复杂，因此直接把 JavaScript 代码写在 v-on 指令中是不可行的。所以 v-on 还能够接收一个须要调用的方法名称。因此，咱们须要在 vue 实例的 methods 下写出方法。

事件绑定
        固然，使用 v-on 指令接收的方法名称也能够传递参数，咱们只须要在 methods 中定义方法时说明这个形参便可在方法中获取到。 

<input type="button" value="点我啊~~~" id="btn" v-on:click="handlerClick">

<!-- 使用 @ 简写 -->
<input type="button" value="点我啊~~~" id="btn" @click="handlerClickWithParam(1)">

var vm = new Vue({
    el: '#app',
    data: {
        msgTitle: '这是我自定义的title属性',
        colorStyle: 'red',
        widthStyle: '120'
    },
    methods: {//在 methods 中定义当前 vue 实例的全部可访问方法
        handlerClick() {
            alert('我是使用 v-on 指令绑定的事件');
        },
		 handlerClickWithParam(id) {
            alert('我是使用 v-on 指令绑定的事件，方法参数为'+id);
        }
    }
});
复制代码

        五、 v-model

        在以前的学习中，对于数据的绑定，不论是使用插值表达式仍是 v-text 指令，对于数据间的交互都是单向的，即只能将 vue 实例里的值传递给页面，页面对数据值的任何操做却没法传递给 model。

        例如，在下面的示例页面中，咱们手动将页面的 h3 标签里的内容进行修改，经过控制台获取到vue实例中的数据，发现数据并无发生变化。这里可使用 window.vm 获取到 vue 实例，则是由于咱们以前引入 vue.js 后，会自动在浏览器内存中建立 vue 对象，咱们经过构造函数建立的 vue 的实例也就存在与浏览器的内存里了。

<div id="app">
    <h3>{{ msg }}</h3>
</div>

<script> var vm = new Vue({ el: '#app', data: { msg: '你好啊，hahaha' } }); </script>
复制代码

数据的单项绑定
        MVVM中最重要的一个特性，能够说就是数据的双向绑定，而 vue 做为一个 MVVM 框架，理所应当的实现了数据的双向绑定，因此咱们可使用内置的 v-model 指令完成数据的在 View 与 Model 间的双向绑定。

        咱们知道，只有表单元素能够与用户进行交互，因此咱们只能使用 v-model 指令在表单控件或者组件上建立双向绑定。对于组件的双向绑定，咱们也会在后面的学习中提到。

<div id="app">
    <h3>{{ msg }}</h3>

    <input type="text" name="" id="" v-model:value="msg">
</div>

<script> var vm = new Vue({ el: '#app', data: { msg: '你好啊，程十六' } }); </script>
复制代码

v-model

        六、 v-if 与 v-show

        v-if 与 v-show 指令都是根据表达式的真假值判断元素的显示与否。

        在下面的代码中，咱们经过绑定一个按钮的点击事件，去修改 flag 值，从而作到对于两个 h3 标签的显示与否的控制。

<div id="app">
    <input type="button" value="切换" @click="handlerClick">

    <h3 v-if="flag">我是经过 v-if 指令控制的~~~</h3>
    <h3 v-show="flag">我是经过 v-show 指令控制的~~~</h3>
</div>

<script> var vm = new Vue({ el: '#app', data: { flag: true }, methods: { handlerClick() { this.flag = !this.flag; } } }); </script>
复制代码

v-if、v-show控制元素显示
        咱们能够看到，flag 的初始值为 true，此时，两个 h3 标签均可以显示出来，当咱们点击切换按钮后，两个 h3 都隐藏了，不一样的是，咱们能够看到，对于使用 v-if 指令控制的 h3 标签，当表达式为 false 时，这个元素 dom 会直接销毁并重建，而对于使用 v-show 指令控制的 h3 标签，当表达式为 false 时，仅仅是将当前元素的 display CSS 属性值设置为 none。因此，当咱们须要频繁控制元素的显示与否时，推荐使用 v-show 指令，避免由于使用 v-if 指令而形成的高性能消耗。

        七、 v-for

        无论咱们是写 C# 仍是写 JAVA 或者是前端的 JavaScript 脚本，提到循环数据，首先都会想到 使用 for 循环，一样的，在 vue 中，做者也为咱们提供了 v-for 这一指令 用来循环数据。

        在使用 v-for 指令时，咱们能够对数组、对象、数字、字符串进行循环，获取到源数据的每个值。使用 v-for 指令，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名，这里相似于 C# 中的 foreach 的循环格式。

<div id="app">
    <!-- 一、循环数组数据 -->
    <p v-for="(item,index) in arrayList" :key="index">数组索引值: {{ index }} , 数据值: {{ item }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { arrayList: [12, 20, 34, 1, 6] } }); </script>
复制代码

        在 v-for 指令中，咱们拥有对父做用域属性的彻底访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。在上面这个循环数组的代码中，item 表明了数组中的每一项数据，index 则表示为当前项的索引，因此咱们能够很方便的打印出数组中每一项数据和索引。同时，咱们在 ul 标签上绑定了一个 key 属性，它能够为循环出来的每一项提供一个 key 值，咱们能够理解成数据库表中的每一条数据都有一个惟一的主键值，一样的，咱们须要保证这个 key 值要惟一对应着当前的数据项。

        这里，采用循环数组对象的方式，来解释这个 key 属性要惟一的问题。

<div id="app">
     <!-- 二、循环对象数组数据 -->
	<input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="index">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { objList: [ {id: 1,name: 'zhangsan',age: 23}, {id: 2,name: 'lisi',age: 32}, {id: 3,name: 'wangwu',age: 22}, ] } }); </script>
复制代码

        咱们如今循环了一个对象数组，并在每个数据项多的前面加了一个单选框，如今咱们选中 {id: 2,name: 'lisi',age: 32} 这个数据对象，同时，使用控制台往数组中添加新的元素。咱们知道往一个数组中新增元素可使用 push 方法或者是 unshift 方法，咱们来尝试一下。

key 属性的使用
        咱们看到当咱们使用 push 方法在数组的最后添加一个数据时，以前单选框选择的数据没有发生更改，而当咱们使用 unshift 方法在数组最前面添加一个数据时，单选框选择的数据就发生了更改。这里就是由于 key 属性绑定的是数组索引的缘故，咱们选中的索引值是1，当在选中的数组元素前面添加数据时，原来选中的数组数据的索引值就会加一，因此最后就会选择到别的元素。         这里咱们就能够将 key 绑定为 item.id 这个属性，这样咱们添加数据时就不会对选中的数据形成影响了，由于，咱们已经告诉了程序，咱们是根据 item.id 这个 key 值进行选中的，与数组的索引值无关。注意，这里若是咱们添加的对象数据 id 仍是3的话虽然能够添加成功，可是 vue 会给咱们提示警告信息了，由于已经存在了一个 id 等于3的数据。 

<div id="app">
    <!-- 二、循环对象数组数据 -->
	<input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="item.id">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>
复制代码

        对于对象、数字、字符串的循环与对于数组的循环差很少，实现方法以下所示，你们能够本身编写下试试。不过在遍历对象时，是按 Object.keys() 的结果遍历，可是不能保证它的结果在不一样的 JavaScript 引擎下是一致的。

<div id="app">
	<!-- 三、遍历对象 -->
    <p v-for="(value,key,index) in obj" :key="key">键名: {{ key }} , 值: {{ value }} , 索引值: {{ index }}</p>

    <!-- 四、遍历数字 -->
    <p v-for="item in 10" :key="item">{{ item }}</p>

    <!-- 五、遍历字符 -->
    <p v-for="item in 'chengshiliu'" :key="item">{{ item }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { obj: { id: 1, name: 'chengshiliu', age: 17 } } }); </script>
复制代码

总结

        这一章咱们主要学习了一些 vue 中的内置指令，熟悉了它们的使用方法，本篇文章的所有的源码都在文章开始处提供仓储地址里，每个文件的说明，能够查看 github 仓储的 readme 说明，但愿能够多多关注啊。

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程