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组件选项中来声明响应式状态，该选项应该是一个返回对象的函数。

<script>
export default {data() {return {message: 'Hello World!',counter: {count: 0}}}
}
</script><template><h1>{{ message }}</h1><p>Count is: {{ counter.count }}</p>
</template>

2.2.4 属性绑定

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

<script>
export default {data() {return {titleClass: 'title'}}
}
</script><template><h1 :class="titleClass">Make me red</h1>
</template><style>
.title {color: red;
}
</style>

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>

2.2.6 表单绑定

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

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

<script>
export default {data() {return {text: ""}},
}
</script><template><input v-model="text" placeholder="Type here"><p>{{ text }}</p>
</template>

2.2.7 条件渲染

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

<script>
export default {data() {return {awesome: true}},methods: {toggle() {this.awesome = !this.awesome}}
}
</script><template><button @click="toggle">toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1>
</template>

2.2.8 列表渲染

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

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0export default {data() {return {newTodo: '',todos: [{ id: id++, text: 'Learn HTML' },{ id: id++, text: 'Learn JavaScript' },{ id: id++, text: 'Learn Vue' }]}},methods: {addTodo() {this.todos.push({ id: id++, text: this.newTodo })this.newTodo = ''},removeTodo(todo) {this.todos = this.todos.filter((t) => t !== todo)}}
}
</script><template><form @submit.prevent="addTodo"><input v-model="newTodo"><button>Add Todo</button>    </form><ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}<button @click="removeTodo(todo)">X</button></li></ul>
</template>

2.2.9 生命周期初探

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

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

<script>
export default {mounted(){this.$refs.p.textContent = 'I like you'}
}
</script><template><p ref="p">hello</p>
</template>

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">+1</button></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>

2.4 事件修饰符

事件修饰符	说明
.prevent	阻止默认行为（阻止a链接的跳转，阻止表单的提交）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身时触发事件处理函数

2.5 按键修饰符

事件修饰符	说明
@keyup.enter	按enter键后会发生对应事件
@keyup.esc	按esc键后会发生对应事件

<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>

2.6 v-model修饰符

说明：

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

<body><div id="app"><!-- 使用.trim可以是的文本框输入的空格传到后台时被忽略 -->姓名：<input type="text" v-model.trim = "username"><hr><!-- 使用.number可以保重转换后仍为数值 -->年龄：<input type="text" v-model.number="age"><hr><!-- 使用.lazy可以让文本框失去焦点后再更新而非实时更新 -->地址：<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>

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>