当前位置：首页 > news >正文

《Vue.js实战》——基础篇（1）

news 2025/6/22 18:44:35

资源：🌟

一、初识Vue.js👋

Vue.js是什么？🙇

MVVM模式 ✍

Vue.js有什么不同 ☔

如何使用Vue.js? ☁

传统的前端开发模式 ☀

Vue.js的开发模式 🗻

二、数据绑定和第一个Vue应用 🗼

Vue实例和数据绑定 🗽

实例和数据 🗿

生命周期 🦁

插值与表达式 ⌛

过滤器 ☕

指令与事件 ⚡

语法糖 🍬

三、计算属性 🌄

什么是计算属性 🌈

计算属性的用法 🍄

计算属性缓存 🍉

资源：🌟

Vue 2.X 官网：Vue.js (vuejs.org)

深入理解Vue.js实战 (godbasin.com)

一、初识Vue.js👋

Vue.js是什么？🙇

MVVM模式 ✍

与知名前端框架 Angular、Ember 等一样，Vue.js 在设计上也使用 MVVM（Model-View-View Model）模式。 MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View（视图层）变化时，会自动更新到 ViewModel（视图模型），反之亦然。View 和 ViewModel 之间通过双向绑定（data-binding）建立联系，如图所示：

在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。

ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。

Vue.js有什么不同 ☔

有关Vue与其他框架的区别可见官网描述：

对比其他框架 — Vue.js (vuejs.org)

如何使用Vue.js? ☁

每一个框架的产生都是为了解决某个具体的问题。在正式开始学习 Vue.js 前，我们先对传统前端开发模式和 Vue.js 的开发模式做一个对比，以此了解 Vue.js 产生的背景和核心思想。

传统的前端开发模式 ☀

Vue.js的开发模式 🗻

Vue.js 是一个渐进式的 JavaScript 框架，根据项目需求，你可以选择从不同的维度来使用它。如果你只是想体验 Vue.js 带来的快感，或者开发几个简单的 HTML 5 页面或小应用，你可以直接通过 script 加载 CDN 文件，例如

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

两种版本都可以，如果你不太了解各版本的差别，建议直接使用最新的稳定版本。当然，你也可以将代码下载下来，通过自己的相对路径来引用。引入 Vue.js 框架后，在 body 底部使用 new Vue()的方式创建一个实例，这就是 Vue.js 最基本的开发模式。现在可以写入以下完整的代码来快速体验 Vue。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 示例</title>
</head>
<body>
<div id="app"><ul><li v-for="book in books">{{ book.name }}</li></ul>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el: '#app',data: {books: [{ name: '《Vue.js 实战》' },{ name: '《JavaScript 语言精粹》' },{ name: '《JavaScript 高级程序设计》' }]}})
</script>
</body>
</html>

二、数据绑定和第一个Vue应用 🗼

学习任何一种框架，从一个 Hello World 应用开始是最快了解该框架特性的途径，我们先从一段简单的 HTML 代码开始，感受 Vue.js 最核心的功能。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 示例</title>
</head>
<body>
<div id="app"><input type="text" v-model="name" placeholder="你的名字"><h1>你好，{{ name }}</h1>
</div>
<script src="vue.min.js"></script>
<script>let app = new Vue({el: '#app',data: {name: ''}})
</script>
</body>
</html>

这是一段简单到不能再简单的代码，但却展示出了 Vue.js 最核心的功能：数据的双向绑定。在输入框输入的内容会实时展示在页面的 h1 标签内，如图所示：

Vue实例和数据绑定 🗽

实例和数据 🗿

生命周期 🦁

插值与表达式 ⌛

过滤器 ☕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">{{ date | formatDate }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//在月份、日期、小时等小于 10 时前面补 0var padDate = function(value) {return value < 10 ? '0' + value : value;};var app = new Vue({el: '#app',data: {date: new Date()},filters: {formatDate: function (value) { // 这里的 value 就是需要过滤的数据var date = new Date(value);var year = date.getFullYear();var month = padDate(date.getMonth() + 1);var day = padDate(date.getDate());var hours = padDate(date.getHours());var minutes = padDate(date.getMinutes());var seconds = padDate(date.getSeconds());//将整理好的数据返回出去return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;}},mounted: function () {let _this = this; // 声明一个变量指向 Vue 实例 this，保证作用域一致this.timer = setInterval(function() {_this.date = new Date(); //修改数据 date}, 1000);},beforeDestroy: function () {if (this.timer) {clearInterval(this.timer); //在 Vue 实例销毁前，清除我们的定时器}}})
</script>
</body>
</html>

过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性。

指令与事件 ⚡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true},methods: {handleClose: function () {this.show = false;}}})
</script>
</body>
</html>

在 button 按钮上，使用 v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on 可以监听原生的 DOM 事件，除了 click 外，还有 dblclick、keyup、mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据，如示例中的 this.show = false; 把数据 show 修改为了 false，所以点击按钮时，文本 p 元素就被移除了。表达式除了方法名，也可以直接是一个内联语句，上例也可以改写为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="show = false">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true}})
</script>
</body>
</html>

如果绑定的事件要处理复杂的业务逻辑，建议还是在 methods 里声明一个方法，这样可读性更强也好维护。 Vue.js 将 methods 里的方法也代理了，所以也可以像访问 Vue 数据那样来调用方法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true},methods: {handleClose: function () {this.close();},close: function () {this.show = false;}}})
</script>
</body>
</html>

在 handleClose 方法内，直接通过 this.close()调用了 close()函数。在上面示例中是多此一举的，只是用于演示它的用法，在业务中会经常用到，例如以下几种用法都是正确的：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">{{ content }}</p><button v-on:click="hideText">点击隐藏</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true,content: '这是一段修改后的文本'},methods: {hideText: function() {this.show = false;}}});
</script>
</body>
</html>

在此基础上继续完成，“再点击一次按钮点击隐藏按钮变成点击恢复的按钮，并且恢复隐藏的内容”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">{{ content }}</p><button v-on:click="toggleText">{{ buttonText }}</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true,content: '这是一段修改后的文本',buttonText: '点击隐藏'},methods: {toggleText: function() {this.show = !this.show;this.buttonText = this.show ? '点击隐藏' : '点击恢复';}}});
</script>
</body>
</html>

语法糖 🍬

三、计算属性 🌄

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，本章的计算属性就是用于解决该问题的。

什么是计算属性 🌈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">{{ reversedText }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {text: '123,456'},computed: {reversedText: function () {// 这里的 this 指向的是当前的 Vue 实例return this.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

计算属性的用法 🍄

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。例如，下面的示例展示的是在购物车内两个包裹的物品总价：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">总价：{{ prices }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {package1: [{name: 'iPhone 7',price: 7199,count: 2},{name: 'iPad',price: 2888,count: 1}],package2: [{name: 'apple',price: 3,count: 5},{name: 'banana',price: 2,count: 10}]},computed: {prices: function () {let prices = 0;for (let i = 0; i < this.package1.length; i++) {prices += this.package1[i].price * this.package1[i].count;}for (let i = 0; i < this.package2.length; i++) {prices += this.package2[i].price * this.package2[i].count;}return prices;}}})
</script>
</body>
</html>

当 package1 或 package2 中的商品有任何变化，比如购买数量变化或增删商品时，计算属性 prices 就会自动更新，视图中的总价也会自动变化。每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法，只是利用了 getter 来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操作，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">姓名：{{ fullName }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {firstName: 'Jack',lastName: 'Green'},computed: {fullName: {// getter，用于读取get: function () {return this.firstName + ' ' + this.lastName;},// setter，写入时触发set: function (newValue) {var names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];}}}});
</script>
</body>
</html>

当执行 app.fullName = 'John Doe'; 时，setter就会被调用，数据 firstName 和 lastName 都会相对更新，视图同样也会更新。绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明。计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style，在下章会介绍这方面的内容。当使用组件时，计算属性也经常用来动态传递 props，这也会在第 7 章组件里详细介绍。计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app1"></div>
<div id="app2">{{ reversedText }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app1 = new Vue({el: '#app1',data: {text: '123,456'}});var app2 = new Vue({el: '#app2',computed: {reversedText: function () {// 这里依赖的是实例 app1 的数据 textreturn app1.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

这里我们创建了两个 Vue 实例 app1 和 app2，在 app2 的计算属性 reversedText 中，依赖的是 app1 的数据 text，所以当 text 变化时，实例 app2 的计算属性也会变化。这样的用法在后面章节介绍的组件和组件化里会用到，尤其是在多人协同开发时很常用，因为你写的一个组件所用得到的数据需要依赖他人的组件提供。随着后面对组件的深入会慢慢意识到这点，现在可以不用太过了解。

计算属性缓存 🍉

在上一章介绍指令与事件时，你可能发现调用 methods 里的方法也可以与计算属性起到同样的作用，比如本章第一个示例可以用 methods 改写为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!-- 注意，这里的 reversedText 是方法，所以要带()-->{{ reversedText() }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {text: '123,456'},methods: {reversedText: function () {// 这里的 this 指向的是当前 Vue 实例return this.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新，例如：

computed: { now: function () { return Date.now(); } 
}

这里的 Date.now()不是响应式依赖，所以计算属性 now 不会更新。但是 methods 则不同，只要重新渲染，它就会被调用，因此函数也会被执行。使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。

资源：🌟

一、初识Vue.js👋

Vue.js是什么？🙇

MVVM模式 ✍

Vue.js有什么不同 ☔

如何使用Vue.js? ☁

传统的前端开发模式 ☀

Vue.js的开发模式 🗻

二、数据绑定和第一个Vue应用 🗼

Vue实例和数据绑定 🗽

实例和数据 🗿

生命周期 🦁

插值与表达式 ⌛

过滤器 ☕

指令与事件 ⚡

语法糖 🍬

三、计算属性 🌄

什么是计算属性 🌈

计算属性的用法 🍄

计算属性缓存 🍉

相关文章：