一幅长文细学Vue（二）——Vue基础入门

2 Vue基础入门

摘要

​ 在本文中，我们会快速地入门Vue。主要了解的是Vue各种指令语法。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码。

作者：来自ArimaMisaki创作

2.1 概述

2.1.1 Vue是什么

说明：Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

2.1.2 和React的对比

相同点：React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统。除此之外，他们

• 都有支持native的方案，React的RN，vue的Wee下
• 都支持SSR服务端渲染
• 都支持props进行父子组件间的通信

在性能方面上，React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

不同点：

• 数据绑定方面，vue实现了数据的双向数据绑定，react数据流动是单向的
• virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
• state对象在react应用中不可变的,需要使用setState方法更新状态；在vue中，state对象不是必须的，数据由data属性在vue对象中管理（如果要操作直接this.xxx）
• 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即all in js； Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html、css、js写在同一个以vue为后缀名的文件中。

2.1.3 MVC模式

说明：我们在开发客户端的时候常常采用MVC模式；MVC模式指的是采用分层设计，使用数据模型，页面视图，页面控制器来设计代码的架构。

尽管MVC 是开发客户端最经典的设计模式，但是 MVC 有让人无法忽视的严重问题。在通常的开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加，controller的处理逻辑会变得越来越复杂，controller也就慢慢的变得越来越胖，这就造成了Controller逻辑复杂，难以维护。为了更好地管理代码，更方便地扩展业务，为必要为controller瘦身，于是MVVM便呼之欲出。

2.1.4 MVVM模式

说明：MVVM（ Model View-Model Controller View）就是MVC设计模式的更先进进化，符合它进化的方向。每个人对MVVM了解不同和使用技术不同，最终实现的MVVM架构也不同。

MVVM是指数据模型M，视图模板V，视图模型VM。vue中的MVVM体现在其双向数据绑定上，如输入框输入数据的时候，对应的插值表达式也会发生改变。

• Model层：通过ajax等api完成服务端到客户端model的同步
• View层：动态视图模板，展示的是VM的数据和状态，不处理状态，做的只是数据绑定的声明、指令的声明、事件绑定的声明
• VM层：把View需要的层数据暴露，对View层的数据绑定声明、指令声明、事件绑定声明负责，处理View层声明的业务逻辑。绑定属性监听，当VM数据变化，V会得到更新；当V中声明了数据的双向绑定，（通常表单元素），框架就会监听V表单值的变化，一旦变化了VM中的数据也会自动更新

虽然Vue给人感觉像是采用了MVVM模式，但在组件上Vue提供了$refs让Model可以直接操作View，所以我们说实际上Vue完全遵守MVVM设计模式。

2.2 基本操作

2.2.1 单文件组件

说明：在Vue项目中我们常常将一整个项目拆分成多个组件。举一个比较生动的例子，我们将要用积木制作一个超级玛丽，那我们需要将一个超级玛丽分为头、身子、脚等一系列组件。在后续的开发中，如果我们还想做一个不一样的超级玛丽，则我们可以找找以往的组件，看看有没有组件可以复用。

在Vue项目中，组件以.vue的文件形式存在。它也被成为单文件组件。其结构分为template、css、script。

2.2.2 API风格

说明：Vue的组件可以按照两种不同的风格进行书写：选项式API和组合式API。

选项式API：如果使用选项式API，我们可以用包含多个选项对象来描述组件的逻辑。选项有很多种，我们会在后续一一介绍。在初级学习阶段，我们大多书写选项式API。

组合式API：我们可以通过导入的API函数来描述组件逻辑。

2.2.3 声明式渲染

说明：Vue的核心功能是声明式渲染。通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。这正是MVVM的体现。

我们可以在data组件选项中来声明响应式状态，该选项应该是一个返回对象的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2.4 属性绑定

说明：我们可以使用v-bind:指令来绑定一个属性值，由于v-bind经常被使用，所以其可以被简写为:。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.2.5 事件监听

说明：我们可以使用v-on来监听DOM事件，其简写为@。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods:{
    increment(){
      this.count++
    }
  }
}
script>

<template>
  
  <button @click="increment">count is: {{ count }}button>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.2.6 表单绑定

说明：如果我们希望一个通过一个表单改变数据，那么我们可以使用v-on+v-bind完成这样的操作，但是Vue为我们提供了语法糖v-model，它通常用于双向绑定。

语法糖：简化语法，让你觉得语法不再枯燥无味。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2.7 条件渲染

说明：我们可以使用v-if，v-else-if，v-else来进行条件渲染，其中v-if和v-else-if对应的值只有为真的情况下才会渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2.8 列表渲染

说明：当我们想要渲染多个li标签时，我们可以将标签中的内容置于数组中，并使用v-for指令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

2.2.9 生命周期初探

说明：目前为止，我们并没有实际动手去操作DOM，但是有时候我们也有要手动操作DOM的情况。Vue为我们提供了模板引用，具体的做法是在标签中使用ref属性，之后我们可以在script标签中使用this.$refs.p来访问操作该标签对应的DOM。

我们可以通过mounted()函数来操作DOM，它常被称为生命周期钩子，因为它允许我们注册一个在组件特定生命周期调用的回调函数。

1
2
3
4
5
6
7
8
9
10
11

2.2 指令汇总

• 插值表达式：从data中渲染文本，可在里面使用js表达式

• v-text：从data中渲染文本

• v-html：从data中渲染标签及其内容

• v-bind：从data中渲染属性，可简写为:

• v-on事件：从methods中获取事件，可简写为@事件，如@click

• v-model：用于双向绑定，只能用于表单元素。当需要维护组件内外数据的同步时，也可以使用该指令

• v-if：条件渲染指令。v-if会动态创建或移除DOM元素，具有切换开销

• v-else：配合v-if使用

• v-else-if：配置v-if使用

• v-show：条件渲染指令。v-show会动态地显示与隐藏，本质是display:none，具有渲染开销

• v-for：列表循环指令。从data中的列表中循环获取数据，语法是元素 in 列表名或==(元素名,索引) in 列表名==

2.3 事件对象

说明：

1. 在原生DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。同理在v-on指令所绑定的事件处理函数中，同样可以接收到事件对象event。

2. 事件对象event必须写在参数列表的第一个，如果不想写在第一个，请在传参时事件变量前加上$。

<body>
    <div id = "app">
        <b>count的值为：{{count}}b>
        <button v-on:click="addCount">+1button>
    div>

    <script src="./vue.js">script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count:0,
            },
            methods:{
                addCount(e){
                    const nowBgColor = e.target.style.backgroundColor;
                    e.target.style.backgroundColor = nowBgColor === 'red'?'':'red';
                    this.count+1;
                }
            }
        })
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.4 事件修饰符

2.5 按键修饰符

<body>
    <div id="app">
        <input type="text" @keyup.enter = "submit" @keyup.esc = "clearInput">
    div>

    <script src = "./vue.js">script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                submit(e){
                    console.log('按下了enter键，最新的值是：'+e.target.value);
                },
                clearInput(e){
                    e.target.value = '';
                },
            }
        })
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.6 v-model修饰符

说明：

• 使用.trim可以使得文本框输入的空格传到后台时被忽略
• 使用.number可以保重转换后仍为数值
• 使用.lazy可以让文本框失去焦点后再更新而非实时更新

<body>
    <div id="app">
        
        姓名：<input type="text" v-model.trim = "username">
        <hr>
        
        年龄：<input type="text" v-model.number="age">
        <hr>
        
        地址：<input type="text" v-model.lazy = "address">
    div>

    <script src="./vue.js">script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'ArimaMisaki',
                age:13,
                address:'北京市',
            }
        })
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.7 使用key来维护列表状态

引入：在我们使用v-for指令时，常常会因为添加或删除数组的元素，导致维护的li标签顺序与想象中不符。

说明：在标签中添加key属性，值为列表中的某个值。相当于数据库中的主键。通常列表指定值最好是id。key能够维护表单的状态。

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加button>
        div>

        <ul>
            <li v-for = "{user,index} in userlist" :key = "user.id">
                <input type="checkbox">
                姓名:{{user.name}}
            li>
        ul>
    div>

    <script src="./vue.js">script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                userlist: [
                    { id: 1, name: 'zs' },
                    { id: 2, name: 'ls' }
                ],
                name: '',  
            }
        })
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29