个人博客地址
http://xiaohe-blog.top/

文章目录

• 1. 简介
• 2. 基本使用
• • 2.1 引入Vue
  • 2.2 基本使用
  • 2.3 总结 ：
• 3. v-text、v-html指令的使用
• 4. v-on : 事件绑定
• • 4.1 事件的三要素：
  • 4.2 v-on的基本使用
  • 4.3 v-on获取vue实例this
  • 4.4 事件绑定简化写法
• 5. 常用指令
• • 5.1 v-if、v-show
  • 5.2 v-bind
  • • 5.2.1 v-bind基本使用
    • 5.2.2 v-bind绑定class样式
    • 5.2.3 v-bind简化写法
  • 5.3 v-for
  • • 5.3.1 遍历对象
    • 5.3.2 遍历数组
    • 5.3.3 遍历对象数组
    • 5.3.4 注意
  • 5.4 v-model

1. 简介

vue是一个渐进式js框架，所谓渐进式，就是易用、灵活、高效。vue的出现可以让我们在页面中完成特别复杂的操作，简化dom编程，甚至不需要编写dom代码。

vue内置双向绑定机制，称为MVVM，正是因为这种机制，出现了前后端分离开发。

Vue官网 ：[Vue.js (vuejs.org)](https://cn.vuejs.org/)

使用文档 ：[介绍 — Vue.js (vuejs.org)](https://cn.vuejs.org/v2/guide/)

2. 基本使用

2.1 引入Vue

在Vue官网中提供了引入方式 ：（当然可以使用node.js下载，不过太麻烦）

-- 开发版:

-- 生产版:

2.2 基本使用

我们需要在 < script >标签中创建一个Vue实例，初始化它的几个参数才能正常使用。

• el ：element，元素。代表你创建的这个Vue实例的作用范围。

  我们给它绑定一个标签来确定Vue实例的作用范围，但是这个标签不能是、。所以我们会创建一个

  标签专门用于绑定Vue实例，将这个标签的id设置为xxx，el这个属性就可以将vue实例绑定到html标签上。

  el:"#xxx"
  

• data ：一个对象，存放这个Vue实例的数据，可以自己往里面放数据。这个data是入门vue体验到第一个比jsp强大得多的东西。例如发Ajax请求时，将数据存在这里，可以使用vue的输出方式完成输出。

  如 ：

  data: {name: "小何",age: 18
  }
  

全部代码 ：

我们数据范围弄好了，数据也准备好了，就差使用了，如果是JSP会使用${}来获取数据，而在Vue中，想要获取data中的数据，需要使用{{变量名}}span>。

{{name}}
{{age}}

这样就可以取出Vue实例data中的数据。

完整代码 ：

data中的数据还可以是对象、数组、对象里面有数组…

当然，从data中取出的数据还可以进行各种运算 ：

new Vue({el:"#app", data: {name:"小何",age: 18,user: {name: "小明",home: ["shanghai", "henan", "nanjing"]}} 
});

{{user.name}}
{{user.home[0]}}
{{name + "很帅"}}
{{age + 1}}
{{name == "小何"}}
{{name.length}}

这些运算的语法遵循js的标准，就不多赘述。

2.3 总结 ：

1. 一个页面中只能有一个Vue实例！如果有两个，第二个是不生效的。

2. Vue实例暂时学了el和data两个属性，el表示Vue实例作用范围、data表示Vue实例中的数据。

3. 在Vue作用范围内可以使用{{变量名}}直接获取Vue实例的data属性中的数据。

4. 从data中取出的数据还可以进行各种 javascript 运算。在{{}}内部进行运算或调用属性、方法。

3. v-text、v-html指令的使用

这两个指令都能获取data中的值。

1. {{}} 与 v-text、v-html的区别：

   {{}} 不会原标签的数据清空，而v-text、v-html会将标签中原有的数据覆盖。

   

2. {{}} 存在插值闪烁，v-text、v-html不存在插值闪烁。

   {{变量}} 在网络慢的时候会先将“{{变量}}”显示出来，加载好了之后才取值，会出现“闪一下”的情况。

   v-text、v-html直接将数据清空掉，不会存在闪烁情况。

3. v-text与v-html的区别

   v-text相当于JavaScript中的innerText，v-html相当于JavaScript中的innerHtml。

   这两个元素的区别就是v-html支持html风格的字符串，先解析再打印。v-text不支持，直接打印。

   var app = new Vue({el: "#app",data: {str: "阿伯茨的",}
   })
   

   

4. v-on : 事件绑定

4.1 事件的三要素：

• 事件源 ：发生特定动作的html标签。
• 事件 ：发生的特定动作。
• 监听器 ：事件处理函数（事件触发后执行什么函数）。

4.2 v-on的基本使用

vue中也是这三大特性。

v-on指令作用 ：给页面中的标签绑定事件。

使用语法 ：在对应标签上使用 ：v-on:事件=“事件处理函数”。

点击此处

在JavaScript中我们在script标签里定义JavaScript函数来绑定，但是在vue中我们不能这样做，如果这样做那不还是JavaScript ？我们使用Vue的属性 ：methods来定义函数。

new Vue({el: "#app",methods: {test: function() {alert('vue中事件绑定')	}}
})

当然，在一个函数中也可以调用另外一个函数，但是有格式要求，下面会讲。

4.3 v-on获取vue实例this

我们在开篇讲到 ：vue内置双向绑定机制MVVM。

M ：Model 模型。可以看作是script中的vue代码。

V ：View 视图。可以看作html代码。

VM ：ViewModel 监听器。

VM监听器时刻监听着，如果Model改变，VM会改变View。View的改变也会通过VM来改变Model。这就是双向绑定。

那么我们已经通过vue代码（Model）改变了html代码（View），怎么通过html（View）代码改变vue代码（Model）呢？

即 ：点击button后将data中的数据改变。

可以给button绑定一个点击事件，点击后将data中的数据改变，那么该如何获得data数据的改变权限呢？

vue提供了this属性来获得vue对象，在vue对象中的this都是指向vue实例的，获得了vue实例，就可以修改。

我们打印一下this这个属性：

点击此处var app = new Vue({el: "#app",data: {age: 18,name: "小明"},methods: {test: function() {console.log(this);},}
})

我们并没有找到data这个属性，但是找到了age、name这两个数据，也可以看到test这个方法、el属性，这说明vue替我们将所有与实例有关的数据挂载到了this上（你向下划还可以看到这两个数据的get/set方法）。

所以我们直接this.name、this.age就可以获取数据，进而可以更改它。

test: function() {console.log(this.age);this.age = this.age + 1;console.log(this.age);
},

我们就也可以使用this.test()来调用函数，同时完成上面所说的一个函数中调用另一个函数。

test: function() {alert('test执行');this.test1(); // 这里只写test1()是不行的。
},
test1: function() {alert('aa执行')
}

参数传递

是个函数就能传参，vue函数的传参与正常情况一样，编写时规定形参，调用时传实参。

点击此处

changeAge: function(val) {this.age += val;
}

4.4 事件绑定简化写法

平时我们绑定事件是这样的：

点击此处

methods: {test: function() {alert('test执行')}
}

但是这样写着实在太麻烦，万一这个元素有3个5个事件，这一行就很繁琐了。

vue2给我们做了简化：简化事件绑定、简化函数定义。

1. 简化事件绑定 ：将v-on:事件替换为@:事件

   点击此处
   

2. 简化函数定义 ：直接定义函数，不再写function了。

   methods: {test() {alert('test执行')}
   }
   

这一大节的重点就是this和事件绑定。

5. 常用指令

5.1 v-if、v-show

作用 ：控制指令，通过vue方式控制页面中哪些标签展示和隐藏。

如 ：有些标签是点击某个内容之后才显示。

hello vue
hello vue

if、show中的值不仅可以直接填true、false，还可以获取data中的数据、执行函数。

（当然，单纯在前端写if、show没意思，等接下来学了axios进行前后端交互就可以通过后端数据来写if、show了）

hello vue
hello vue
hello vue
hello vue

new Vue({el:"#app", data: {b: true}, methods: {test() {return true;}}
});

v-if和v-show的区别 ？

• v-if 底层通过控制dom树上的元素节点实现页面标签的展示和隐藏。
• v-show 底层通过控制标签css样式的display属性实现标签的展示和隐藏。

hello vue
hello vue

打开网页源代码可以看到，v-if直接变成注释，v-show的display变成none。

使用哪一个？vue官方给了很好的建议 ：

案例 ：

有一个字符串、两个按钮，点击一个按钮隐藏字符串，点击另外一个显示字符串。

假如又有一个按钮，点击一次，字符串隐藏，再点一次，字符串显示。

hello vue
点击隐藏h1
点击显示h1
点击显示/隐藏h1

new Vue({el:"#app",data: {isShow: true},methods: {hide() {this.isShow = false;},show() {this.isShow = true;}showAndHide() {this.isShow = !this.isShow;}}
});

5.2 v-bind

5.2.1 v-bind基本使用

作用 ：将html某个标签中的某个属性交给vue对象管理。注意是属性交给vue。

好处 ：可以通过vue动态改变这个属性从而影响它所属的标签。

语法 ：标签中加 v-bind:属性名。

绑定的过程分为三步 ：1、给属性添加v-bind。2、属性值使用data数据域中的值。3、添加事件。

例如有一张图片，我想点击button时，将图片换为另一张图片。

（虽然css做这件事也很简单，但是bind的作用不止这些）

点击此处

你也可以将button去掉，当鼠标移到图片上就改变图片和大小。

new Vue({el:"#app",data: {imgSrc: "https://t7.baidu.com/it/u=1821636093,3729533292&fm=193&f=GIF",imgWidth: 200},methods: {changeImg() {this.imgSrc = "https://t7.baidu.com/it/u=4254919379,3719403362&fm=193&f=GIF";this.imgWidth = 300;}}
});

绑定流程 ：在标签的属性前面加上v-bind:，标签属性值使用data数据域中的值，绑定事件后执行某函数通过改变data中的值来改变标签的属性。

5.2.2 v-bind绑定class样式

class是标签的类属性，它也可以被vue绑定。

我们可以定义多个style样式表，当触发事件时将某个标签的class属性换一个值。

还是那三步：

1、给class属性前面加上v-bind。v-bind:class=“”。

2、class属性的值使用data数据域中的值。v-bind:class=“cls”;

3、绑定事件，改变data中数据的值。

点击切换至aa
点击切换至bb

new Vue({el:"#app",data: {cls: "aa"},methods: {changeToAA() {this.cls = "aa";},changeToBB() {this.cls = "bb";}}
});

5.2.3 v-bind简化写法

步骤是不会变的

三步骤1、给属性添加v-bind。2、属性值使用data数据域中的值。3、添加事件。

简化的是，将"v-bind"直接删掉，使用 “:属性值 ”

5.3 v-for

作用 ：在页面中实现循环遍历数据。

这是一个十分有用的指令。它可以遍历对象、数组、数组对象。

语法 ：直接在标签中加上v-for。

5.3.1 遍历对象

写法:v-for="(value,key,index) in data中的数据"value ：属性值key ：属性名index ：下标
当然，这几个值的名字是可以变的，只要顺序不乱就行。
也可以只写一个，但是写几个就对应几个。
写一个就只对应第一个，写两个就对应前两个，写三个就对应全部。

{{value}}--{{key}}---{{index}}

如果只想要值 ：

5.3.2 遍历数组

写法:v-for="(item,index) in data中的数据"item: 属性值index: 下标
例 : v-for="(name,index) in names"

 data: {names: ["小明", "小红", "小何"],}

{{index}} --- {{item}}

5.3.3 遍历对象数组

写法:v-for="(item,index) in data数据"
例 : v-for="user in users"

data: {students: [{name:"小明", age:18, address:"北京"},{name:"小何", age:20, address:"上海"},{name:"小刚", age:24, address:"南京"},]
},

将这些数据放在表格中展示 ：

姓名
年龄
地址
{{user.name}}
{{user.age}}
{{user.address}}

5.3.4 注意

在vue官网中有如下提示 ：

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

可以参考博客 ：http://t.csdn.cn/ikyQd

我们平时要遍历的数据一般都是数据库取出的，key绑定上主键数据就行了。

5.4 v-model

作用 ：模型，将表单的value属性交给vue实例。

v-bind可以绑定标签的任何属性，v-model只能绑定value属性，它也是最能体现双向绑定的指令。

v-model就只针对表单标签，当在表单标签中使用v-model时，默认它代表value。

上面这行代码等于:

data {message: "请输入"
}

刚才说v-model是最能体现双向绑定机制的指令，为什么呢？因为表单能输入…

复习一下双向绑定是什么，Model能影响View，View也能影响Model。

M ：Model 模型。可以看作是script中的vue代码。

V ：View 视图。可以看作html代码。

VM ：ViewModel 监听器。

{{message}}

这样，h1中的数据是message，表单中的数据是message。

对表单操作影响了data中的数据，即：View影响Model。

data中的数据被修改，h1中的内容发生改变，即：Model影响View。

这就是Model和View双向绑定，互相影响。