您现在的位置是：首页 > 文章详情

【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」

日期：2020-11-19点击：371收藏

vue概述

mvvm模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

mvvm模式的优势：

低耦合

视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化时Model可以不变，当Model变化时View也可以不变

可重用性

可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码

独立开发

开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

而我们今天要学习的，就是一款MVVM模式的框架：Vue

快速入门

安装vue

下载安装

下载地址：https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，得到vue.js文件。可以在页面中直接通过script引入vue.js文件

使用cdn

或者也可以直接使用公共的CDN服务：

<!-- 开发环境版本，包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue 入门案例（演示用，不做讲解）

HTML模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>{{name}}，非常酷！</h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", // el即element，要渲染的页面元素 data: { name: "Vue测试" } }); </script> </body> </html>

首先通过new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
- el ：是element的缩写，通过id 选中要渲染的页面元素，本例中是一个 div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
  - name ：这里指定了一个name属性
页面中的 h2 元素中，通过{{name}} 的方式，来渲染刚刚定义的 name 属性

更神奇的在于，当你修改name属性时，页面会跟着变化。

双向绑定

对刚才的案例进行简单修改：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="num"> <h2> {{name}}，非常酷！ 有{{num}}个酷炫功能！ </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", // el即element，要渲染的页面元素 data: { name: "Vue测试", num: 1 } }); </script> </body> </html>

在data中添加了新的属性： num
在页面中有一个 input 元素，通过 v-model 与 num 进行绑定
同时通过 {{num}} 在页面输出

可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面 {{num}} 与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

事件处理

在页面添加一个按钮：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="num"> <button v-on:click="num++">点我</button> <h2> {{name}}，非常酷！ 有{{num}}个酷炫功能！ </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", // el即element，要渲染的页面元素 data: { name: "Vue测试", num: 1 } }); </script> </body> </html>

这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作num
普通onclick是无法直接操作num的

Vue 实例

创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({ // 选项 })

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods
… …等

接下来，一一介绍。

模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定。

例如一段html模板：

<div id="app"> </div>

然后创建Vue实例，关联这个div

var vm = new Vue({ el:"#app" })

这样，Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app"> <input type="text" v-model="name"/> </div>

js：

var vm = new Vue({ el:"#app", data:{ name:"ZHANGSAN" } })

name的变化会影响到 input 的值
input中输入的值，也会导致vm中的name发生改变

方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="add">点我</button> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: {}, methods: { add: function () { console.log("点我了...233") } } }); </script> </body> </html>

生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。

20200710065238953

生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程

生命周期函数	含义
beforeCreate（vue对象创建前）	组件实例刚被创建，组件属性计算之前，比如data属性等
created（创建后）	模板编译、挂载之前
mounted（载入后）	模板编译、挂载之后
beforeUpdate（更新前）	组件更新之前
updated（更新后）	组件更新之后
beforeDestroy（销毁前）	组件销毁前调用
destroyed（销毁后）	组件销毁后调用

vm.$el ：Vue 实例使用的根 DOM 元素

vm.$root ：当前的 Vue 实例。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs生命周期</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { message: 'hello world' }, beforeCreate: function () { console.log(this); showData('创建vue实例前', this); }, created: function () { showData('创建vue实例后', this); }, beforeMount: function () { showData('挂载到dom前', this); }, mounted: function () { showData('挂载到dom后', this); }, beforeUpdate: function () { showData('数据变化更新前', this); }, updated: function () { showData('数据变化更新后', this); }, beforeDestroy: function () { showData('vue实例销毁前', this); }, destroyed: function () { showData('vue实例销毁后', this); } }); function showData(process, obj) { console.log(process); console.log('data 数据：' + obj.message) console.log('挂载的对象：') console.log(obj.$el) } </script> </body> </html>

钩子函数

例如：created代表在vue实例创建后；

可以在Vue中定义一个created函数，代表这个时期的构造函数：

创建示例html页面如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { // 初始化为空 msg: "" }, // 钩子函数 created() { // this 表示Vue实例 this.msg = "hello vue.created"; console.log(this) } }); </script> </body> </html>

this

可以看下在vue内部的this变量是谁，在created的时候，打印this

var app = new Vue({ el:"#app", data:{ msg: "" }, //钩子函数 created() { //this表示vue实例 this.msg = "hello vue. created."; console.log(this); } });

控制台的输出；在这里插入图片描述总结： this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属性、方法等。

应用场景

在beforeCreate生命周期函数运行时，可以添加loading动画
在created生命周期函数运行时，可以结束loading动画，还可以做一些初始化，实现函数自执行等操作
最经常使用的是mounted生命周期函数

可以发起后端数据请求，取回数据

可以接收页面之间传递的参数

可以子组件向父组件传递参数等

指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

插值表达式

花括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { msg: "hello vue." } }); </script> </body> </html>

插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。解决办法是通过v-text和v-html替换

v-text 和 v-html

使用v-text和v-html指令来替代 {{}}

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例，改造原页面内容：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--{{msg}}--> v-text：<span v-text="msg"></span><br/> v-html：<span v-html="msg"></span><br/> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { // msg: "hello vue." msg: "<h2>hello vue.</h2>" } }); </script> </body> </html>

并且不会出现插值闪烁，当没有数据时，会显示空白。

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。

目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" value="Java" v-model="language">Java<br/> <input type="checkbox" value="PHP" v-model="language">PHP<br/> <input type="checkbox" value="Swift" v-model="language">Swift<br/> <h2> 你选择了：{{language.join(",")}} </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { language: [] } }); </script> </body> </html>

多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组

v-on

基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

简写语法：

@事件名="js片段或函数名"

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button @click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num={{num}} </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { num: 1 }, methods: { decrement() { this.num--; } } }); </script> </body> </html>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button @click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num={{num}} </h2> <hr> 事件冒泡测试：<br/> <div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')"> <button @click.stop="print('点击了button')">点我试试</button> </div> <br>阻止默认事件：<br> <a href="http://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { num: 1 }, methods: { decrement() { this.num--; }, print(str) { console.log(str); } } }); </script> </body> </html>

v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：循环变量

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="user in users"> {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { users: [ {"name": "小明", "age": 13, "gender": "男"}, {"name": "小红", "age": 13, "gender": "女"}, {"name": "小绿", "age": 4, "gender": "男"} ] } }); </script> </body> </html>

数组角标

在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：

语法：

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例：

<div id="app"> <ul> <li v-for="(user,index) in users"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> </div>

遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"

1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="user in users"> {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> <hr> <ul> <li v-for="(user,index) in users"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> <hr> <ul> <!--1个参数时，得到的是对象的值--> <li v-for="value in person"> {{value}} </li> </ul> <hr> <ul> <!--2个参数时，第一个是值，第二个是键--> <li v-for="(value,key ) in person"> {{value}}--{{key}} </li> </ul> <hr> <ul> <!--3个参数时，第三个是索引，从0开始--> <li v-for="(value,key,index ) in person"> {{value}}--{{key}} -- {{index}} </li> </ul> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { users: [ {"name": "小明", "age": 13, "gender": "男"}, {"name": "小红", "age": 13, "gender": "女"}, {"name": "小绿", "age": 4, "gender": "男"} ], person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"} } }); </script> </body> </html>

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

如果使用key这个功能可以有效的提高渲染的效率；key一般使用在遍历完后，又增、减集合元素的时候更有意义。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。也就是key是该的唯一标识。

示例：

<ul> <li v-for="(item,index) in items" :key="index"></li> </ul>

这里使用了一个特殊语法： :key="" 后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
这里绑定的key是数组的索引，应该是唯一的

v-if 和 v-show

基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show = !show">点我</button> <h2 v-if="show"> hello vuejs. </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { show: true } }); </script> </body> </html>

与 v-for 结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show = !show">点我</button> <h2 v-if="show"> hello vuejs. </h2> <hr> <ul> <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { show: true, users: [ {"name": "北京大学", "age": 8, "gender": "男"}, {"name": "清华大学", "age": 12, "gender": "女"}, {"name": "复旦大学", "age": 4, "gender": "男"}, {"name": "南开大学", "age": 2, "gender": "女"} ] } }); </script> </body> </html>

v-else

可以使用 v-else 指令来表示 v-if 的“else 块”：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show = !show">点我</button> <h2 v-if="show"> hello vuejs. </h2> <hr> <ul v-if="show"> <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> <li v-else style="background-color: blue"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { show: true, users: [ {"name": "北京大学", "age": 8, "gender": "男"}, {"name": "清华大学", "age": 12, "gender": "女"}, {"name": "复旦大学", "age": 4, "gender": "男"}, {"name": "南开大学", "age": 2, "gender": "女"} ] } }); </script> </body> </html>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>

类似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show = !show">点我</button> <h2 v-if="show"> hello vuejs. </h2> <hr> <ul v-if="show"> <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> <li v-else style="background-color: blue"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> <hr> <h2 v-show="show"> 你好，世界！ </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { show: true, users: [ {"name": "北京大学", "age": 8, "gender": "男"}, {"name": "清华大学", "age": 12, "gender": "女"}, {"name": "复旦大学", "age": 4, "gender": "男"}, {"name": "南开大学", "age": 2, "gender": "女"} ] } }); </script> </body> </html>

v-bind

属性上使用vue数据

看这样一个案例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> <style type="text/css"> div { width: 100px; height: 100px; color: white; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <div id="app"> <button @click="color='red'">红色</button> <button @click="color='blue'">蓝色</button> <div :class=""> 点击按钮改变背景颜色 </div> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { color: "red" } }); </script> </body> </html>

解读：

页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
目前div的class为空，希望实现点击按钮后，div的class样式会在.red和.blue之间切换

该如何实现？

大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：

<div class="{{color}}"></div>

这样写是错误的！因为插值表达式不能用在标签的属性中。

此时，Vue提供了一个新的指令来解决：v-bind，语法：

v-bind:属性名="Vue中的变量"

例如，在这里我们可以写成：

<div v-bind:class="color"></div>

不过，v-bind太麻烦，因此可以省略，直接写成： ，:属性名='属性值' ，即：

<div :class="color"></div>

class属性的特殊用法

上面虽然实现了颜色切换，但是语法却比较啰嗦。

Vue对class属性进行了特殊处理，可以接收数组或对象格式

对象语法：可以传给 :class 一个对象，以动态地切换 class：

<div :class="{ red: true,blue:false }"></div>

对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。

之前的案例可以改写成这样：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> <style type="text/css"> div { width: 100px; height: 100px; color: white; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <div id="app"> <button @click="color='red'">红色</button> <button @click="color='blue'">蓝色</button> <!--v-bind 简写为 :--> <div :class="color"> 点击按钮改变背景颜色 </div> <hr> <br> <button @click="bool=!bool">点我改变下面色块的颜色</button> <div :class="{red:bool, blue:!bool}"> 点击按钮改变背景颜色 </div> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { color: "red", bool:true } }); </script> </body> </html>

首先class绑定的是一个对象： {red:bool, blue: !bool}

red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记恰好相反，一个生效，另一个失效。

bool默认为true，也就是说默认red生效，blue不生效

现在只需要一个按钮即可，点击时对bool取反，自然实现了样式的切换

计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值：

data:{ birthday:1429032123201 // 毫秒值 }

在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2> 你的生日是： {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}} </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { birthday: 1429032123201 } }); </script> </body> </html>

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2> 你的生日是： {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}} </h2> <hr> <h2> computed计算方式；你的生日为：{{birth}} </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { birthday: 1429032123201 }, computed: { birth() { const date = new Date(this.birthday); return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay(); } } }); </script> </body> </html>

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

过滤器

说明

官方说法：Vue.js 允许你自定义过滤器，可被用于一些常见的==文本格式化==。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

通俗的来说：过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

过滤器的种类：

全局过滤器
局部过滤器

过滤器的使用步骤

定义过滤器

全局过滤器

Vue.filter('过滤器名称', function (value[,param1,...] ) { //逻辑代码 })

局部过滤器

new Vue({ filters: { '过滤器名称': function (value[,param1,...] ) { // 逻辑代码 } } })

应用过滤器

{{ 表达式 | 过滤器名字}}

过滤器不带参数

案例1：日期格式化

<body> <div id="myDiv"> {{birthday | dateFormat }} </div> <script src="../js/vue.js"></script> <script src="../js/moment.js"></script> // 需要引入一个日期处理的一个工具类 <script type="text/javascript"> // 定义过滤器 Vue.filter("dateFormat",function(value){ return moment(value).format("YYYY-MM-DD HH:mm:ss"); }); const app = new Vue({ el: "#myDiv", data: { birthday: new Date() } }); </script> </body>

案例2：文本格式化

<body> <div id="myDiv"> {{message | messageFormat}} <br/> {{message }} // 值并没有改变 </div> <script src="../js/vue.js"></script> <script type="text/javascript"> Vue.filter("messageFormat",function(value){ return value.replace("很棒","优秀"); }); const app = new Vue({ el: "#myDiv", data: { message: "HelloWorld,是一个很棒的青年" } }); </script> </body>

过滤器带参数

<body> <div id="myDiv"> {{birthday | dateFormat }} <br/> // 不传递格式化标准就用完整写法 {{birthday | dateFormat("YYYY-MM-DD") }} // 传入了格式化标准就用传递的写法进行格式化 </div> <script src="../js/vue.js"></script> <script src="../js/moment.js"></script> <script type="text/javascript"> Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){ return moment(value).format(pattern); }); const app = new Vue({ el: "#myDiv", data: { birthday: new Date() } }); </script> </body>

watch

监控

watch可以让我们监控一个值的变化。从而做出相应的反应。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message"> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { message: "hello vue" }, watch: { message(newValue, oldValue) { console.log("新值：" + newValue + "；旧值：" + oldValue) } } }); </script> </body> </html>

深度监控

如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <hr> <br> <input type="text" v-model="person.name"><br> <input type="text" v-model="person.age"> <button @click="person.age++">+</button> <h2> 姓名为：{{person.name}}；年龄为：{{person.age}} </h2> </div> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { message: "hello vue", person: {"name": "zhangsan", "age": 12} }, watch: { message(newValue, oldValue) { console.log("新值：" + newValue + "；旧值：" + oldValue) }, person: { // 开启深度监控，可以监控到对象属性值的变化 deep: true, // 监控的处理办法 handler(obj) { console.log("name = " + obj.name + ", age=" + obj.age); } } } }); </script> </body> </html>

变化：

以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：

deep:代表深度监控，不仅监控person变化，也监控person中属性变化
handler：就是以前的监控处理函数

组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

全局组件

我们通过Vue的component方法来定义一个全局组件。

<div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 定义全局组件，两个参数：1，组件名称。2，组件参数 Vue.component("counter",{ template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script>

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数，不再是一个对象。

组件的复用

定义好的组件，可以任意复用多次：

<div id="app"> <!--使用定义好的全局组件--> <counter></counter> <counter></counter> <counter></counter> </div>

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

组件的data属性必须是函数！

当我们定义这个counter组件时，它的data 并不是像这样直接提供一个对象：

data: { count: 0 }

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () { return { count: 0 } }

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = { template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } };

然后在Vue中使用它：

var app = new Vue({ el:"#app", components:{ counter:counter // 将定义的对象注册为组件 } })

components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象的属性
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：

页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

父向子传递

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件属性

父组件使用子组件，并自定义了title属性：

<div id="app"> <h1>打个招呼：</h1> <!--使用子组件，同时传递title属性--> <introduce title="父组件传递的消息"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("introduce",{ // 直接使用props接收到的属性来渲染页面 template:'<h1>{{title}}</h1>', props:['title'] // 通过props来接收一个父组件传递的属性 }) var app = new Vue({ el:"#app" }) </script>

传递复杂数据

我们定义一个子组件，并接受复杂数据：

 const myList = { template: '\ <ul>\ <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\ </ul>\ ', props: { items: { type: Array, default: [], required: true } } };

这个子组件可以对 items 进行迭代，并输出到页面。
props：定义需要从父组件中接收的属性
- items：是要接收的属性名称
  - type：限定父组件传递来的必须是数组
  - default：默认值
  - required：是否必须

我们在父组件中使用它：

<div id="app"> <h2>百知已开设如下课程：</h2> <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons --> <my-list :items="lessons"/> </div> var app = new Vue({ el:"#app", components:{ myList // 当key和value一样时，可以只写一个 }, data:{ lessons:[ {id:1, name: 'java'}, {id:2, name: 'python'}, {id:3, name: 'ui'}, ] } })

子向父的通信

来看这样的一个案例：

<div id="app"> <h2>num: {{num}}</h2> <!--使用子组件的时候，传递num到子组件中--> <counter :num="num"></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减 template:'\ <div>\ <button @click="num++">加</button> \ <button @click="num--">减</button> \ </div>', props:['num']// count是从父组件获取的。 }) var app = new Vue({ el:"#app", data:{ num:0 } }) </script>

子组件接收父组件的num属性
子组件定义点击按钮，点击后对num进行加或减操作

我们尝试运行，好像没问题，点击按钮试试：

子组件接收到父组件属性后，默认是不允许修改的。怎么办？

既然只有父组件能修改，那么加和减的操作一定是放在父组件：

var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } })

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？

我们可以通过v-on指令将父组件的函数绑定到子组件上：

<div id="app"> <h2>num: {{num}}</h2> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div>

在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：

 Vue.component("counter", { template:'\ <div>\ <button @click="plus">加</button> \ <button @click="reduce">减</button> \ </div>', props:['count'], methods:{ plus(){ this.$emit("inc"); }, reduce(){ this.$emit("dec"); } } })

vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数

路由vue-router

场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换。

编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

然后新建一个HTML文件，作为入口：index.html

然后编写页面的基本结构：

<div id="app"> <span>登录</span> <span>注册</span> <hr/> <div> 登录页/注册页 </div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app" }) </script>

编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js。

编写组件，这里我们只写模板，不写功能。

const loginForm = { template:'\ <div>\ <h2>登录页</h2> \ 用户名：<input type="text"><br/>\ 密码：<input type="password"><br/>\ </div>\ ' }

const registerForm = { template:'\ <div>\ <h2>注册页</h2> \ 用&ensp;户&ensp;名：<input type="text"><br/>\ 密&emsp;&emsp;码：<input type="password"><br/>\ 确认密码：<input type="password"><br/>\ </div>\ ' }

在父组件中引用

<div id="app"> <span>登录</span> <span>注册</span> <hr/> <div> <!--<loginForm></loginForm>--> <!-- 疑问：为什么不采用上面的写法？ 由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform> 所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式 --> <login-form></login-form> <register-form></register-form> </div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script src="user/login.js"></script> <script src="user/register.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", components: { loginForm, registerForm } }) </script>

问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

vue-router简介和安装

使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

快速入门

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象 const router = new VueRouter({ routes:[ // 编写路由规则 { path:"/login", // 请求路径 component:loginForm // 组件名称 }, {path:"/register",component:registerForm}, ] })

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

在父组件中引入router对象：

var vm = new Vue({ el:"#app", components:{// 引用登录和注册组件 loginForm, registerForm }, router // 引用上面定义的router对象 })

页面跳转控制：

<div id="app"> <!--router-link来指定跳转的路径--> <span><router-link to="/login">登录</router-link></span> <span><router-link to="/register">注册</router-link></span> <hr/> <div> <!--vue-router的锚点--> <router-view></router-view> </div> </div>

通过 router-view 来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过 router-link 指定一个跳转链接，当点击时，会触发vue-router的路由功能。

单文件组件

vue-cli3开发单文件组件

Vue.component('组件名',{ }) new Vue({})

缺点

全局定义组件的名字时不能重复
字符串模板 es6提供了模板字符串 \
不支持css

在vue中把.vue的文件称为单文件组件

Vue CLI3 脚手架

基本配置

安装Nodejs
- 保证Node.js8.9或更高版本
- 终端中输入node -v,保证已安装成功
安装淘宝镜像源
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- 以后的npm可以用cnpm代替
安装Vue Cli3脚手架
- cnpm install -g @vue/cli
检查其版本是否正确
- vue --version

快速原型开发

在命令行工具cmd，或者Intellij IDEA的Terminal中进入想要构建项目的目录，输入

vue init webpack project-name

回车,webpack默认版本为2.0。

接下来会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。

？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可； ？Project description ---- 项目描述，按需填写。无需填写可以直接回车； ？Author ---- 作者 ？Vue build ---- 构建模式，一般默认第一个； ？Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。 ？Use ESLint to lint yout code? ---- 格式校验，按需； ？Set up unit tests ---- 测试相关，按需； ？Setup e2e tests with Nightwatch? ---- 测试相关，按需； ？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里我选Yes, use NPM。如果选No，后续自己在目标

目录下执行npm install即可。这样构建出来的项目，可以直接运行。进入项目所在目录，执行npm run dev，执行完看到以下提示：

Your application is running here: http://localhost:8080

在浏览器打开http://localhost:8080，看到这个页面，接下来就可以开始开发了。

分析Vue脚手架生成的项目结构

node_modules:依赖包目录 public：静态资源目录 src：源码目录 src/assets:资源目录 src/components：组件目录 src/views:视图组件目录 src/App.vue:根组件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置文件

使用单文件组件开发购物车

<template> <div id="app"> <h1>{{title}}</h1> <ul> <li v-for="item in cartList" :key="item.id"> <h2>{{item.title}}</h2> <p>${{item.price}}</p> </li> </ul> <my-cart :title="title" :cart-list="cartList"></my-cart> </div> </template> <script> import MyCart from './components/Cart'; export default { name:"app", data() { return { cartList:[ {id:1,title:"vue实战",price:188,active:true,count:2}, {id:2,title:"react实战",price:288,active:false,count:1}], title:"购物车" }; }, components:{MyCart} } </script>

购物车文件代码：

<template> <div> <h1>{{title}}</h1> <table border="1"> <tr> <th>#</th> <th>课程</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr v-for="(c,index) in cartList" :key="c.id"> <td> <input type="checkbox" v-model="c.active"> </td> <td>{{c.title}}</td> <td>{{c.price}}</td> <td> <button @click="substract(index)">-</button> {{c.count}} <button @click="add(index)">+</button> </td> <td>¥{{c.price*c.count}}</td> </tr> <tr> <td></td> <td colspan="2">{{activeCount}}/{{count}}</td> <td colspan="2">¥{{total}}</td> </tr> </table> </div> </template> <script> export default { name:"cart", props:['title','cartList'], methods: { remove(i) { if (window.confirm("确定是否要删除?")) { this.cartList.splice(i, 1); } }, substract(i) { let count = this.cartList[i].count; count > 1 ? (this.cartList[i].count -= 1) : this.remove(i); }, add(i) { this.cartList[i].count++; } }, computed:{ count(){ return this.cartList.length; }, activeCount(){ return this.cartList.filter(v=>v.active).length; }, total(){ let sum=0; this.cartList.forEach(c=>{ if(c.active){ sum+=c.price*c.count; } }); return sum; } } } </script> <style scoped> </style>

Vuejs Ajax

Vuejs 并没有直接处理ajax的组件，但可以使用axios组件实现对异步请求的操作。

Axios简介

# 如果使用npm则可以如下安装 npm install axios

axios应用

方法说明

axios可以使用的方法有：

axios(config)

config请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method ，请求将默认使用 get 方法。

{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `params` 是即将与请求一起发送的 URL 参数 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象 params: { ID: 12345 }, // `data` 是作为请求主体被发送的数据 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' // 在没有设置 `transformRequest` 时，必须是以下类型之一： // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属：FormData, File, Blob // - Node 专属： Stream data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间，请求将被中断 timeout: 1000 }

响应结构

{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 服务器响应的头 headers: {}, // `config` 是为请求提供的配置信息 config: {} }

axios方法示例

可以通过向 axios 传递相关配置来创建请求

axios(config)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users" :key="index"> {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { users: [] }, created() { // 初始化加载数据 axios({ method: "get", url: "data.json" }).then((res) => { console.log(res); // 将获取数据设置到users属性 // 不能使用this，在axios回调函数中表示窗口，不是vue实例 app.users = res.data; }).catch(error => { alert(error); }) } }); </script> </body> </html>

综合案例

购物车综合案例

第一步：实现图书的列表显示

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="book in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{book.price}}</td> <td> <button>-</button> {{book.number}} <button>+</button> </td> <td> <button>删除</button> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.00, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] } }); </script> </body>

第二步：价格小数问题处理

方式一：methods

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="book in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{getPrice(book.price)}}</td> <td> <button>-</button> {{book.number}} <button>+</button> </td> <td> <button>删除</button> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] }, methods: { getPrice(price){ return '￥' + price.toFixed(2); } } }); </script> </body>

方式二：过滤器

==可以应用到插值表达式或v-bind表达式中，可以做格式化。==

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="book in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{book.price | getPrice}}</td> <td> <button>-</button> {{book.number}} <button>+</button> </td> <td> <button>删除</button> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] }, filters: { getPrice(price){ return '￥' + price.toFixed(2); } } }); </script> </body>

第三步：数量加减操作

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="book in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{book.price}}</td> <td> <button @click="decrement(book)" v-bind:disabled="book.number < 2"> - </button> {{book.number}} <button @click="increment(book)">+</button> </td> <td> <button>删除</button> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] }, methods: { decrement(book){ book.number--; }, increment(book){ book.number++; } } }); </script> </body>

第四步：移除按钮

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{book.price}}</td> <td> <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button> {{book.number}} <button @click="increment(book)">+</button> </td> <td> <button @click="deleteHandle(index)">删除</button> </td> </tr> </table> <h2 v-if="books.length <= 0"> 购物车空空如也 </h2> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] }, methods: { deleteHandle(index){ this.books.splice(index,1); } } }); </script> </body>

第五步：计算最终价格

<body> <div id="myDiv"> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td>{{book.price}}</td> <td> <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button> {{book.number}} <button @click="increment(book)">+</button> </td> <td> <button @click="deleteHandle(index)">删除</button> </td> </tr> </table> <h1>总价：{{totalPrice | getPrice}}</h1> <h2 v-if="books.length <= 0"> 购物车空空如也 </h2> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { books: [ {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1}, {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1}, {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1}, {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1} ] }, filters: { getPrice(price){ return '￥' + price.toFixed(2); } }, computed: { totalPrice(){ return this.books.reduce((sum,book)=>{ return sum + book.price; },0) } } }); </script> </body>

图书管理综合案例

第一步：实现列表、新增和删除

<body> <div id="myDiv"> id: <input type="text" v-model="id"/> 图书名称: <input type="text" v-model="name"/> <button @click="add">添加</button> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td> <a href="" @click.prevent="deleteHandle(index)">删除</a> //阻止事件默认行为 </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { id: '', name: '', books: [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()}, ] }, methods: { add(){ let book = {id:this.id, name:this.name , pubDate:new Date()}; this.books.push(book); }, deleteHandle(index){ this.books.splice(index,1); } } }); </script> </body>

第二步：实现搜索筛选

<body> <div id="myDiv"> id: <input type="text" v-model="id"/> 图书名称: <input type="text" v-model="name"/> <button @click="add">添加</button> 根据图书名称搜索：<input type="text" v-model="kw"/> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>操作</td> </tr> <tr v-for="(book,index) in search(kw)"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td> <a href="" @click.prevent="deleteHandle(index)">删除</a> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { id: '', name: '', kw: '', books: [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()}, ] }, methods: { add(){ let book = {id:this.id, name:this.name , pubDate:new Date()}; this.books.push(book); }, search(kw){ let result = []; this.books.forEach((item)=>{ if (item.name.includes(kw)){ result.push(item); } }); return result; } } }); </script> </body>

==换种方式实现：==

search(kw){ return this.books.filter((item)=>{ return item.name.includes(kw); }) }

第三步：日期格式化

<body> <div id="myDiv"> id: <input type="text" v-model="id"/> 图书名称: <input type="text" v-model="name"/> <button>添加</button> 根据图书名称搜索：<input type="text" v-model="kw"/> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate | dateFormat}}</td> <td> <a href="">删除</a> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script src="../js/moment.js"></script> <script type="text/javascript"> Vue.filter("dateFormat",(value)=>{ return moment(value).format("YYYY-MM-DD"); }); const app = new Vue({ el: "#myDiv", data: { id: '', name: '', kw: '', books: [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()}, ] } }); </script> </body>

第四步：优化添加功能

==需求：上面的案例中，我们需要点击添加按钮实现添加一本书，有时候是这样子的，我们按下回车键也可以添加，下面就来做这个功能。==

按下enter键实现添加方式1

图书名称: <input type="text" v-model="name" @keyup.enter="add"/> // 可行

按下enter键实现添加方式2

图书名称: <input type="text" v-model="name" @keyup.13="add"/> // 键码可行

按下F2键实现添加方式1

图书名称: <input type="text" v-model="name" @keyup.f2="add"/> // 可行，低版本不可行

按下F2键实现添加方式2

图书名称: <input type="text" v-model="name" @keyup.113="add"/> // 可行，通过键码代表F2可行

按下F2键盘实现添加方式3

==通过键码代表F2可行，但是阅读性不好，可以自定义按键修饰符，主要是处理低版本Vue的问题。==

图书名称: <input type="text" v-model="name" @keyup.f2="add"/> Vue.config.keyCodes.f2 = 113

第五步：页面打开的时候就搜索框获得焦点

根据图书名称搜索：<input type="text" v-model="kw" v-focus/>

Vue.directive("focus",{ inserted: function(el){ el.focus(); } });

第五步：实现修改功能

<body> <div id="myDiv"> id: <input type="text" v-model="id" :disabled="disable"/> 图书名称: <input type="text" v-model="name"/> <button @click="handle">提交</button> 根据图书名称搜索：<input type="text" v-model="kw"/> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td> <a href="" @click.prevent="update(book.id)">修改</a> <a href="">删除</a> </td> </tr> </table> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { id: '', name: '', kw: '', disable: false, books: [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()}, ] }, methods: { // 添加和修改重用 handle(){ if(this.disable){ // 为true,就表示修改 this.books.forEach((item)=>{ if(item.id == this.id){ item.name = this.name; return item; } }); // 修改完毕之后还需要对disable设置为true表示允许添加 this.disable = false; this.id = ""; this.name = ""; }else{ // 就表示添加 let book = {id:this.id, name:this.name , pubDate:new Date()}; this.books.push(book); } }, update(bookId){ // 0、禁止修改id文本框 this.disable = true; // 1、根据bookId查找出要编辑的图书 let book = this.books.filter((item)=>{ return item.id == bookId; }); // 2、把获取到的图书填充到表单中 this.id = book[0].id; this.name = book[0].name; } } }); </script> </body>

第六步：使用计算属性统计图书种类

<h1>总共有{{totalCount}}种不同种类的书</h1>

computed: { totalCount(){ return this.books.length; } }

第七步：不能添加重复的图书【监听器】

<body> <div id="myDiv"> id: <input type="text" v-model="id" :disabled="disable"/> 图书名称: <input type="text" v-model="name"/> <button @click="handle" :disabled="flag">提交</button> 根据图书名称搜索：<input type="text" v-model="kw"/> <table border="1"> <tr> <td>图书编号</td> <td>图书名称</td> <td>出版日期</td> <td>操作</td> </tr> <tr v-for="(book,index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.pubDate}}</td> <td> <a href="" @click.prevent="update(book.id)">修改</a> <a href="">删除</a> </td> </tr> </table> <h1>总共有{{totalCount}}种不同种类的书</h1> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#myDiv", data: { id: '', name: '', kw: '', disable: false, flag: false, books: [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()}, ] }, computed: { totalCount(){ return this.books.length; } }, methods: { // 添加和修改重用 handle(){ if(this.disable){ // 为true,就表示修改 this.books.forEach((item)=>{ if(item.id == this.id){ item.name = this.name; return item; } }); // 修改完毕之后还需要对disable设置为true表示允许添加 this.disable = false; this.id = ""; this.name = ""; }else{ // 就表示添加 let book = {id:this.id, name:this.name , pubDate:new Date()}; this.books.push(book); } }, update(bookId){ // 0、禁止修改id文本框 this.disable = true; // 1、根据bookId查找出要编辑的图书 let book = this.books.filter((item)=>{ return item.id == bookId; }); // 2、把获取到的图书填充到表单中 this.id = book[0].id; this.name = book[0].name; } }, watch:{ name(value){ let result = false; this.books.forEach((item)=>{ if (item.name == value){ result = true; return; } }) if (result){ console.log("11"); this.flag = true; }else{ this.flag = false; } } } }); </script> </body>

第八步：图书数据的初始化

mounted(){ // 模拟ajax请求获取数据 let result = [ {id: 1, name: '天龙八部', pubDate: new Date()}, {id: 2, name: '射雕英雄传', pubDate: new Date()} ]; this.books = result; },

原文链接：https://my.oschina.net/u/3555122/blog/4726025

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

Java分享

【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」

vue概述

快速入门

安装vue

下载安装

使用cdn

Vue 入门案例（演示用，不做讲解）

HTML模板

双向绑定

事件处理

Vue 实例

创建Vue实例

模板或元素

数据

方法

生命周期钩子函数

生命周期

钩子函数

this

应用场景

指令

插值表达式

花括号

插值闪烁

v-text 和 v-html

v-model

v-on

基本用法

事件修饰符

v-for

遍历数组

数组角标

遍历对象

key

v-if 和 v-show

基本使用

与 v-for 结合

v-else

v-show

v-bind

属性上使用vue数据

class属性的特殊用法

计算属性

过滤器

说明

过滤器的使用步骤

定义过滤器

应用过滤器

过滤器不带参数

案例1：日期格式化

案例2：文本格式化

过滤器带参数

watch

监控

深度监控

组件化

全局组件

组件的复用

局部注册

组件通信

父向子传递

传递复杂数据

子向父的通信

路由vue-router

场景模拟

编写父组件

编写登录及注册组件

在父组件中引用

问题

vue-router简介和安装

快速入门

单文件组件

vue-cli3开发单文件组件

缺点

Vue CLI3 脚手架

基本配置

快速原型开发

分析Vue脚手架生成的项目结构

使用单文件组件开发购物车