第四章 Vue入门

  Vue(发音为 /vju:/，雷同 view)迩来些年比力盛行的前端框架之一，和React、Angular并称为前端三大框架。此中Vue简单易学的特点成为国内主流，很多公司已经把它列为一个前端开辟职员必须要把握的技能点了，现在ES6的学习，为我们学习Vue打下了底子，接下来我们来学习它吧。
1.1 Vue 简介

1.1.1 什么是Vue

  Vue是一个用于构建用户界面的JavaScript框架，它紧张用于开辟Web应用步调。以下是对Vue的具体表明：
一、Vue的界说与特性

• 界说：Vue，发音雷同于“view”，是一个渐进式JavaScript框架。它专注于视图层，旨在更好地构造与简化web开辟。Vue的焦点库只关注视图层，非常轻易学习，也非常轻易与其他库或已有项目整合。
  
• 特性：
  
  
  
  • 组件化：Vue接纳了组件化的方式来构建用户界面，答应开辟职员创建可重复使用的组件。
    
  • 相应式：Vue具有相应式编程的特性，当数据发生变革时，Vue会主动重新渲染组件，并更新页面上的内容。
    
  • 渐进式：Vue可以自底向上逐层应用，其焦点库只关注视图层，易于上手，同时可以或许与其他库或项目整合，为复杂的单页应用提供驱动。
    
  
  

二、Vue的焦点概念

• MVVM模式：Vue接纳了MVVM（Model-View-ViewModel）模式，此中ViewModel作为数据和视图的桥梁，实现了数据的双向绑定。这意味着当数据发生变革时，视图会主动更新；同样，当用户与视图交互时，数据也会相应变革。
  
• 数据驱动视图：Vue的焦点是数据驱动视图，通过组件内特定的方法实现视图和模子的交互。这意味着开辟职员可以通过操纵数据来控制视图的表现。
  

三、Vue的应用场景与上风

• 应用场景：Vue实用于构建各种规模的Web应用步调，特别是单页应用（SPA）。它提供了丰富的API和第三方库，使得开辟职员可以轻松地构建复杂的应用步调。
  
• 上风：
  
  
  
  • 易于学习：Vue的语法简便明确，易于上手。
    
  • 高效：Vue接纳了假造DOM技能，进步了页面的渲染服从。
    
  • 机动性：Vue可以与多种第三方库和工具集成，提供了丰富的功能。
    
  
  

四、Vue的生态体系
Vue的生态体系非常强盛，包罗Vuex（状态管理库）、Vue Router（路由管理器）、Vue CLI（脚手架工具）等。这些工具可以资助开辟职员更高效地构建和管理Vue应用步调。
五、Vue的版本与更新
Vue现在有两个紧张版本：Vue 2和Vue 3。Vue 3引入了多项新特性和性能改进，包罗更好的范例支持、更小的包体积、更快的渲染速率等。开辟职员可以根据本身的需求选择符合的版本。
综上所述，Vue是一个功能强盛、易于学习和使用的JavaScript框架，实用于构建各种规模的Web应用步调。它的组件化、相应式和渐进式特性使得开辟职员可以更加高效地构建和管理应用步调。
1.1.2 MVVM头脑

MVVM（Model-View-ViewModel）是一种软件架构计划模式，它联合了MVC（Model-View-Controller）和MVP（Model-View-Presenter）的长处，并特别实用于构建用户界面（UI），尤其是在前端开辟中。以下是对MVVM头脑的具体表明：
一、MVVM的焦点头脑
MVVM的焦点头脑是将界面逻辑与业务逻辑分离，通过数据绑定和变乱驱动的方式实现视图（View）和模子（Model）之间的主动同步。具体来说，MVVM模式通太过离视图和模子，使得开辟者可以更加专注于各自的范畴。视图层负责界面的展示和用户交互，而模子层则处置处罚业务逻辑和数据。
二、MVVM的构成部分

• Model（模子）：
  
  
  
  • 代表数据模子，可以在Model中界说数据修改和操纵的业务逻辑。
    
  • 负责封装应用的业务逻辑和数据。
    
  
  
• View（视图）：
  
  
  
  • 表现UI组件，负责将数据模子转换为UI显现出来。
    
  • 负责封装UI和UI逻辑，包罗数据绑定的声明、指令的声明、变乱绑定的声明。
    
  
  
• ViewModel（视图模子）：
  
  
  
  • 是MVVM模式中的焦点部分，它负责毗连视图和模子。
    
  • 包罗界面的展示逻辑和与视图的交互逻辑，同时它还可以包罗一些业务逻辑。
    
  • 作为桥梁，毗连视图（View）和模子（Model），可以或许实现数据变了页面主动更新的功能。
    
  
  

三、MVVM的工作原理

• 数据绑定机制：
  
  
  
  • MVVM通过数据绑定机制实现视图和模子之间的主动同步。
    
  • 当模子的数据发生变革时，视图会主动更新以反映这些变革。
    
  
  
• 变乱驱动机制：
  
  
  
  • 变乱驱动机制使得视图可以相应用户的交互操纵。
    
  • 当用户与视图交互时，会触发相应的变乱，并触发相应的业务逻辑。
    
  
  

四、MVVM的上风

• 分离关注点：
  
  
  
  • 通过将视图和模子分离，进步了代码的可读性和可维护性。
    
  • 开辟职员可以更加专注于各自的范畴，进步了开辟服从。
    
  
  
• 数据绑定和变乱驱动：
  
  
  
  • 实现了视图和模子之间的主动同步和松耦合。
    
  • 简化了界面与数据的交互过程。
    
  
  
• 组件化开辟：
  
  
  
  • 进步了代码的复用性和机动性。
    
  • 答应开辟职员创建可重复使用的组件，低沉了开辟本钱。
    
  
  

五、MVVM与MVC的区别

• 通讯方式：
  
  
  
  • MVVM：各部分之间的通讯是双向的。视图（View）和视图模子（ViewModel）之间的数据绑定是双向的。
    
  • MVC：通讯是单向的。用户哀求通常从视图（View）转达到控制器（Controller），然后控制器与模子（Model）交互，并将结果发送回视图。
    
  
  
• 关注点分离：
  
  
  
  • MVVM：由于双向数据绑定的存在，开辟者可以更专注于业务逻辑的实现，而无需过多关注视图和模子之间的同步标题。
    
  • MVC：固然也旨在实现关注点分离，但开辟者通常必要手动处置处罚视图和模子之间的同步，这大概会增长开辟的复杂性。
    
  
  
• 应用场景：
  
  
  
  • MVVM：通常用于前端开辟，特别是构建复杂的单页应用步调（SPA）。
    
  • MVC：最初紧张用于服务器端Web开辟，厥后也广泛应用于客户端Web开辟。
    
  
  

综上所述，MVVM头脑通太过离视图和模子、实现数据绑定和变乱驱动机制以及提供组件化开辟方式等上风，为前端开辟者提供了更加高效和可维护的开辟方式。随着前端技能的不绝发展，MVVM模式徐徐成为主流框架（如Vue、React、Angular等）的焦点头脑。
1.2 Vue入门

1.2.1 Vue体验

HTML部分：

• 一个带有id="app"的div容器，内里有一个文本输入框和一个h1标签。
  
• 文本输入框使用v-model指令绑定到Vue实例的youName数据属性上，实现双向数据绑定。
  
• h1标签使用双花括号{{ }}来表现youName的值。
  JavaScript部分：
  
• 第一个<script type="module" src="/src/main.js"> </script>标签实验以模块的方式导入一个JavaScript文件。这通常用于ES6模块，但在这个简单的示例中大概不是必须的。
  
• 第二个<script>标签包罗了Vue实例的创建代码。
  
  
  
  • el: '#app’指定了Vue实例要挂载的DOM元素。
    
  • data: { youName: ‘’ }界说了Vue实例的数据对象，此中包罗一个youName属性，初始值为空字符串。
    
  
  

1.2.2 Vue开辟步调梳理

Vue.js 是一个用于构建用户界面的渐进式框架，特别恰当单页面应用步调（SPA）。以下是一个使用 Vue.js 开辟应用步调的根本步调梳理，以及每个步调中大概涉及的代码示例。请留意，这里假设你正在使用 Vue CLI 创建和管理你的项目。

• 安装 Vue CLI
  起首，你必要全局安装 Vue CLI。假如你还没有安装，可以通过 npm 来安装：
  

1. npm install -g @vue/cli

复制代码

• 创建一个新项目
  使用 Vue CLI 创建一个新的 Vue 项目：
  

1. vue create my-vue-app

复制代码

按照提示选择设置，大概直接使用默认设置。

• 进入项目目次并启动开辟服务器
  

1. cd my-vue-app  
2. npm run serve

复制代码

这将启动一个本地开辟服务器，并在欣赏器中打开你的 Vue 应用。

• 项目结构
  Vue CLI 会为你天生一个标准的项目结构。此中，src 目次是开辟的紧张目次，包罗了全部的源代码。
  
• 编辑组件
  在 src/components 目次下，你可以创建或编辑 Vue 组件。比方，创建一个名为 HelloWorld.vue 的组件（通常这个组件已颠末 Vue CLI 主动天生）：
  

1. <template>  
2.   <div class="hello">  
3.     <h1>{{ msg }}</h1>  
4.     <input v-model="name" placeholder="Enter your name">  
5.     <p>Hello, {{ name }}</p>  
6.   </div>  
7. </template>  
8.   
9. <script>  
10. export default {  
11.   name: 'HelloWorld',  
12.   props: {  
13.     msg: String  
14.   },  
15.   data() {  
16.     return {  
17.       name: ''  
18.     };  
19.   }  
20. };  
21. </script>  
22.   
23. <style scoped>  
24. h1 {  
25.   color: #42b983;  
26. }  
27. </style>

复制代码

• 使用组件
  在 src/App.vue 中，你可以引入并使用这个组件：
  

1. <template>  
2.   <div id="app">  
3.     <HelloWorld msg="Welcome to Your Vue.js App"/>  
4.   </div>  
5. </template>  
6.   
7. <script>  
8. import HelloWorld from './components/HelloWorld.vue';  
9.   
10. export default {  
11.   name: 'App',  
12.   components: {  
13.     HelloWorld  
14.   }  
15. };  
16. </script>  
17.   
18. <style>  
19. /* 你的全局样式 */  
20. </style>

复制代码

• 添加路由（可选）
  假如你的应用必要多个页面，你大概必要添加 Vue Router。起首，安装 Vue Router：
  

1. npm install vue-router

复制代码

然后，在 src/router/index.js 中设置路由（假如 Vue CLI 没有主动天生这个文件，你可以手动创建）：

1. import Vue from 'vue';  
2. import Router from 'vue-router';  
3. import HelloWorld from '@/components/HelloWorld.vue';  
4.   
5. Vue.use(Router);  
6.   
7. export default new Router({  
8.   routes: [  
9.     {  
10.       path: '/',  
11.       name: 'HelloWorld',  
12.       component: HelloWorld  
13.     },  
14.     // 你可以在这里添加更多的路由配置  
15.   ]  
16. });

复制代码

别忘了在 src/main.js 中引入并使用路由：

1. import Vue from 'vue';  
2. import App from './App.vue';  
3. import router from './router';  
4.   
5. Vue.config.productionTip = false;  
6.   
7. new Vue({  
8.   router,  
9.   render: h => h(App)  
10. }).$mount('#app');

复制代码

• 添加状态管理（可选）
  对于复杂的应用，你大概必要使用 Vuex 来管理全局状态。安装 Vuex：
  

1. npm install vuex

复制代码

在 src/store/index.js 中设置 Vuex（假如文件不存在，请手动创建）：

1. import Vue from 'vue';  
2. import Vuex from 'vuex';  
3.   
4. Vue.use(Vuex);  
5.   
6. export default new Vuex.Store({  
7.   state: {  
8.     // 你的全局状态  
9.   },  
10.   mutations: {  
11.     // 修改状态的方法  
12.   },  
13.   actions: {  
14.     // 异步操作  
15.   },  
16.   getters: {  
17.     // 从state派生状态  
18.   }  
19. });

复制代码

同样，在 src/main.js 中引入并使用 Vuex：

1. import store from './store';  
2.   
3. // ...  
4.   
5. new Vue({  
6.   router,  
7.   store,  
8.   render: h => h(App)  
9. }).$mount('#app');

复制代码

• 构建和摆设
  当你准备好将应用摆设到生产环境时，你可以运行：
  

1. npm run build

复制代码

这将在 dist 目次下天生一个构建好的应用，你可以将其摆设到你的服务器上。
以上是使用 Vue.js 开辟应用步调的根本步调和代码示例。根据你的具体需求，你大概必要添加更多的功能、库或插件。
1.3 Vue指令

1.3.1 指令的概念

  指令(Directives)是特别的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此插值表达式这里也是可以实用，只是不必要编写双花括号了。指令的职责就是当其表达式的值改变时把某些特别的运动应用到DOM上。
1.3.2 常用指令

  我们接下来学习Vue常用的指令吧，包罗内容输出指令 v-text、v-html，条件渲问鼎令v-if、v-else、v-show，列表渲问鼎令v-for，数据绑定指令v-model、v-bind，变乱绑定指令v-on等。
固然，以下是一些Vue常用指令的示例代码，这些代码展示了怎样在Vue组件或实例中使用这些指令。
数据绑定指令

v-text

1. <div v-text="message"></div>  
2. <!-- 等同于 -->  
3. <div>{{ message }}</div>

复制代码

v-html

1. <div v-html="rawHtml"></div>

复制代码

v-bind

1. <a v-bind:href="url">Link</a>  
2. <!-- 简写 -->  
3. <a :href="url">Link</a>

复制代码

v-model

1. <input v-model="inputValue" type="text">  
2. <p>You typed: {{ inputValue }}</p>

复制代码

条件渲问鼎令

v-if

1. <p v-if="seen">Now you see me</p>  
2. <p v-else>Now you don't</p>

复制代码

v-else-if

1. <div v-if="type === 'A'">A</div>  
2. <div v-else-if="type === 'B'">B</div>  
3. <div v-else>Not A/B</div>

复制代码

v-show

1. <p v-show="seen">Hello</p>

复制代码

列表渲问鼎令

v-for

1. <ul>  
2.   <li v-for="item in items" :key="item.id">{{ item.text }}</li>  
3. </ul>

复制代码

其他指令

v-cloak（通常与CSS一起使用以制止加载时的闪灼）

1. <style>  
2.   [v-cloak] {  
3.     display: none;  
4.   }  
5. </style>  
6. <div v-cloak>{{ message }}</div>  
7. <!-- 当Vue实例加载并解析完模板后，v-cloak属性会被移除，div将显示内容 -->

复制代码

v-once

1. <span v-once>This will never change: {{ message }}</span>

复制代码

v-pre

1. <span v-pre>{{ This will not be compiled }}</span>  
2. <!-- 显示原始内容，不进行编译 -->

复制代码

v-on

1. <button v-on:click="doSomething">Click me</button>  
2. <!-- 简写 -->  
3. <button @click="doSomething">Click me</button>

复制代码

在Vue组件或实例的JavaScript部分，你必要界说这些模板中使用的数据和方法：

1. new Vue({  
2.   el: '#app',  
3.   data: {  
4.     message: 'Hello Vue!',  
5.     rawHtml: '<strong>Raw HTML</strong>',  
6.     url: 'https://vuejs.org',  
7.     seen: true,  
8.     type: 'A',  
9.     inputValue: '',  
10.     items: [  
11.       { id: 1, text: 'Item 1' },  
12.       { id: 2, text: 'Item 2' }  
13.     ]  
14.   },  
15.   methods: {  
16.     doSomething() {  
17.       alert('Button clicked!');  
18.     }  
19.   }  
20. });

复制代码

  请留意：在实际项目中，你大概必要将Vue实例挂载到一个具体的DOM元素上（如上面的el: '#app’所示），并确保你的HTML模板中有一个对应的元素（如<div id="app">…</div>）。同时，上面的示例代码是为了阐明目的而简化的，实际项目中大概必要更复杂的结构和逻辑。
  1.4 Vue 盘算属性

  在Vue中，盘算属性（computed properties）是基于它们的依靠举行缓存的相应式属性。只有当相干依靠发生改变时，它们才会重新求值。这对于实验复杂逻辑或制止在模板中编写冗长的表达式非常有用。
1.4.1 什么是盘算属性

以下是一个Vue组件中使用盘算属性的示例代码：

1. <div id="app">  
2.   <p>Original message: "{{ message }}"</p>  
3.   <p>Reversed message: "{{ reversedMessage }}"</p>  
4. </div>

复制代码

1. new Vue({  
2.   el: '#app',  
3.   data: {  
4.     message: 'Hello Vue!'  
5.   },  
6.   computed: {  
7.     // 计算属性：reversedMessage  
8.     reversedMessage: function () {  
9.       // 这里我们返回了 message 的反转字符串  
10.       return this.message.split('').reverse().join('');  
11.     }  
12.   }  
13. });

复制代码

在这个例子中，我们有一个名为message的数据属性，以及一个名为reversedMessage的盘算属性。reversedMessage盘算属性依靠于message，而且当message的值改变时，reversedMessage会主动更新为message的反转字符串。
留意几点：

• 声明位置：盘算属性在Vue实例的computed选项中声明。
  
• 方法情势：每个盘算属性都是一个方法，当它们被访问时，这些方法会被调用，而且它们的返回值会被缓存起来，直到相干依靠发生变革。
  
• 缓存：盘算属性是基于它们的相应式依靠举行缓存的。假如依靠没有改变，多次访问盘算属性会立即返回之前的盘算结果，而不会重新实验方法。
  
• 模板中使用：在模板中，你可以像访问平凡数据属性一样访问盘算属性。
  

盘算属性非常恰当用于任何复杂的逻辑，这些逻辑依靠于其他数据，而且必要在模板中多次使用。它们提供了一种声明式的方式来形貌组件的状态，而且使得组件更加易于明白和维护。
1.4.2 盘算属性根本用法

在 Vue.js 中，盘算属性（computed properties）用于基于组件数据的变革动态盘算值。它们雷同于方法，但差别的是，盘算属性是基于它们的依靠举行缓存的，只有在相干依靠发生变革时才会重新盘算。这使得它们在处置处罚复杂逻辑时更高效。
下面是一个简单的例子，展示了 Vue.js 中盘算属性的根本用法：
1. HTML 部分

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>Vue.js Computed Properties Example</title>  
5.   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>  
6. </head>  
7. <body>  
8.   <div id="app">  
9.     <p>FirstName: {{ firstName }}</p>  
10.     <p>LastName: {{ lastName }}</p>  
11.     <p>FullName: {{ fullName }}</p>  
12.     <input v-model="firstName" placeholder="Enter first name">  
13.     <input v-model="lastName" placeholder="Enter last name">  
14.   </div>  
15.   
16.   <script src="app.js"></script>  
17. </body>  
18. </html>

复制代码

• JavaScript 部分（app.js）
  

1. new Vue({  
2.   el: '#app',  
3.   data: {  
4.     firstName: '',  
5.     lastName: ''  
6.   },  
7.   computed: {  
8.     fullName: function () {  
9.       return this.firstName + ' ' + this.lastName;  
10.     }  
11.   }  
12. });

复制代码

表明
HTML 部分:

• 使用 v-model 指令绑定输入框的值到 Vue 实例的 firstName 和 lastName 数据属性。
  
• 使用插值表达式 {{ }} 表现 firstName、lastName 和盘算属性 fullName。
  

JavaScript 部分:

• 创建一个新的 Vue 实例，并绑定到 #app 元素。
  
• 在 data 对象中界说 firstName 和 lastName 两个数据属性。
  
• 在 computed 对象中界说 fullName 盘算属性，它返回 firstName 和 lastName 的组合。
  

工作原理

• 当用户在输入框中输入 firstName 或 lastName 时，v-model 指令会更新 Vue 实例中相应的数据属性。
  
• 由于 fullName 是一个盘算属性，它依靠于 firstName 和 lastName。因此，每当这两个属性之一发生变革时，fullName 会主动重新盘算并更新视图。
  
• 盘算属性 fullName 的返回值会被缓存，直到其依靠的 firstName 或 lastName 发生变革。这进步了性能，由于盘算属性不会在每个重新渲染时都重新盘算。