一、vue.js指令介绍

指令的本质就是 HTML 自定义属性，Vue.js 的指令就是以 v- 开头的自定义属性。我们HTML元素非为固有属性和自定义属性，固有属性就是自己元素本身就有的，比如id,title等等。自定义属性是为了我们去识别框架，所以我们的vue.js的指令就是通过v-开头进行自定义的，所以将来我们再HTML元素的中看到v-开头的属性都是vue.js的自定义属性。

二、内容处理指令v-once

• v-once指令使元素内部的插值表达式只生效一次。

<body><div id="app"><p>此内容会随数据变化自动更改:{{ content }}</p><p v-once>此内容不会随数据变化自动更改:{{ content }}</p></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {content: '内容文本'}})</script>
</body>

三、内容处理指令v-text

• v-text元素内容整体替换为指定纯文本数据。

将来我们再对data选项中的属性重新赋值后，加了v-text指令的元素也会进行数据驱动视图效果。

我们可以通过v-text指令直接书写值，但是这样写并没有什么意义，因为我们要动态再逻辑层进行修改设置。

我们通过示例发现，v-text指令展示的是我们整个的书写的内容，并不是获取到的标签内部的内容，而是连带标签一起读取的，把标签当成了普通文本。

四、内容处理指令v-html

• 元素内容整体替换为指定的 HTML 文本。该指令也可以实现替换HTML元素内部的文本内容。

v-html和v-text的区别如下图演示，刚刚我们上边讲解的v-text指令它是把属性值当作纯文本进行展示，包括标签名。而接下来我们演示的这个v-html指令是不包括标签名的，并且能够生成这样一个HTML的元素。

五、属性绑定指令v-bind

• v-bind 指令用于动态绑定 HTML 属性。

• Vue.js 还为 v-bind 指令提供了简写方式。通过一个冒号就可以啦！

• 如果需要一次绑定多个属性，还可以绑定对象。

• 与插值表达式类似，v-bind 中也允许使用表达式。

• 与插值表达式一样，不可以直接书写js脚本代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12.v-bind</title>
</head>
<body><div id="app"><p v-bind:title='myTitle'>标签内容</p><p :title='myTitle'>标签内容</p><p :class='attrObj'></p><p :class='"demo" + 3 '></p><p :class='prefix + num '></p><p :class='var a = 0'></p></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {myTitle: '这是title属性内容',attrObj: {id: 'p1',class: 'clearFix',title: '这是p元素','data-title': '这是data-title的内容'},prefix: 'demo',num: 10}})</script>
</body>
</html>

六、属性绑定—class绑定

• class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与class 属性共存。

如下演示是错误写法，我们通过v-bind绑定的class属性不可以直接使用空格书写多个类名

我们可以通过再data选项中定义的属性使用空格当成字符串的方式定义多个类名，但是将来我们修改的时候很不灵活。所以我们再日常开发的时候不会使用该方法进行书写。

通过三元运算符方式选择类名

通过对象的方式，通过直接赋予结果方式，指定类名为boolean类型

通过对象的方式，通过data选项指定类名为boolean类型

通过数组的方式

<body><div id="app"><!-- 普通class和绑定的class可以同时定义 --><!-- <p v-bind:class="cls1"></p> --><!-- <p class="a" :class="cls1"></p> --><!-- 如下是错误写法，绑定的class不可以使用空格书写定义多个类名 --><!-- <p class="a" :class="b c d"></p> --><!-- 可以通过再data选项中定义一个多个属性值空格分隔的属性。不灵活 --><!-- <p class="a" :class="cls"></p> --><!-- 三元运算符 --><!-- <p :class="bool?cls1:cls2"></p> --><!-- 通过对象的方式，通过直接赋予结果方式，指定类名为boolean类型 --><!-- <p :class="{x:true, y:false, z:true}"></p> --><!-- 通过对象的方式，通过data选项指定类名为boolean类型 --><!-- <p :class='{x:isX, y:isY, z:isZ}'></p> --><!-- 通过数组的方式 --><p :class="['a',classB,{c: isC}]"></p></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {classB: 'b',isC: true// isX: true,// isY: false,// isZ: true// cls:'b c d',// cls1: 'x',// cls2: 'y',// cls3: 'z',// bool: true,} })</script>
</body>

七、属性绑定—style绑定

• style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存。

通过如下示例我们需要注意：我们的css属性值带有px像素单位的，一定要写单位，否则属性就等于没有设置成功，不会生效。

注意：我们如果出现2个单词用连字符连接的，可以使用驼峰命名法，例如background-color属性可以写成：backgroundColor，将c大写即可，也可以将background-color使用引号引起来，就不需要驼峰命名法了，这样也可以，2种方式均可。推荐使用驼峰写法，它是我们的传统写法。

如下是普通style设置样式和绑定style属性设置样式一起书写的示例，通过示例我们需要注意：我们如果再普通的style书写了一个属性，将来我们在绑定的属性中也写了普通style设置的属性，那么后写的会覆盖先写的，新的覆盖旧的，如下图所示，如果绑定的属性中没有设置相同属性，那就以普通style中的属性效果展示。

<body><div id="app"><!-- <p v-bind:style='styleObj'></p> --><p style="width: 100px;" :style="styleObj">这是p标签</p></div><script src="js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {styleObj:{width: '200px',height: '200px',backgroundColor: 'red','font-size': '30px'}}})</script>
</body>

我们也可以通过如下这种方式书写，但是这种写法不美观，不容易维护，所以推荐写到data选项中的属性中去。

<p :style="{width: '200px',height: '200px',backgroundColor: 'red'}"></p>

• 当我们希望给元素绑定多个样式对象时，可以设置为数组。

我们通过如下示例可以看到，我们有重复的代码写了2遍，这还算是少的，将来如果我们有5个盒子，10个盒子，甚至更多的盒子都设置同样的宽高度，要设置很多遍，然后我们后期维护的时候，比如公司经理或者老板要求我们更改下宽高度，那么我们还要把所有的盒子都修改一遍，是不是太麻烦了，所以我们可以将公共样式单独写一个对象中，然后不一样的属性呢，我们单独去书写一个对象，然后通过数组的方式，将元素设置多个对象的样式对象。是不是非常nice呢！

通过数组的方式，我们给元素绑定多个样式对象这样是不是好多啦！将来我们老板或者是经理让我们去修改宽高度的公共样式时，我们只需要改一处即可实现多出变化。

修改公共样式方式1：

修改公共样式方式2：

<body><div id="app"><p :style='[baseStyle,styleObj1]'>这是p元素</p><p :style='[baseStyle,styleObj2]'>这是p元素</p></div><script src="js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {baseStyle: {width: '100px',height: '200px'},styleObj1: {backgroundColor: 'red'},styleObj2: {backgroundColor: 'yellow'}}})</script>
</body>

（9）vue.js 指令（1）相关推荐

vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
（11）vue.js 指令（3）
一.事件处理指令v-on • 用于进行元素的事件绑定.示例1: • Vue.js 还为 v-on 指令提供了简写方式.示例2:v-on的简介方式 • 事件程序代码较多时,可以在 methods 中设 ...
（10）vue.js 指令（2）
八.渲染指令-v-for v-for介绍:v-for指令用于遍历数据渲染结构,常用的数组与对象均可遍历. 示例1:渲染数组当中的数据,item是一个自己起的标识,in是固定的关键字,再···里,arr ...
作用于HTML元素的Vue.js指令
我在这里学习内置指令 v-model v-if v-show v-else v-for v-bind v-on v-model表单数据模型双向绑定 example: ① 表单文本输入框效果 <i ...
Vue.js 指令v-for和v-if和v-show
文章目录 Vue指令之`v-for`和`key`属性代码演示 v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 Vue指令之` ...
Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

（9）vue.js 指令（1）