01

什么是Vue.js

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。

看到这里，你就会问了，什么是渐进式？

• 渐进式就是你可以将Vue作为一个项目中的部分组件改用Vue实现，不需要引入其他复杂的功能，带来丰富的交互体验。

• 也可以在一个项目中，更多的的业务逻辑都使用Vue，这样Vue整个核心库以及其生态系统可以逐步的引用。

02

引入Vue的方法

本篇文章因为是主要是为了Vue的入门教程，重点主要是Vue的整个基础语法上，所以不使用vue-cli，先采用手动引入js的方式，学会Vue的基础使用，循环渐进，更加有利于我们的学习！

引入Vue.js有三种方式：

1、直接CDN引入

2、下载和引入

开发环境：https://vuejs.org/js/vue.js

生产环境:https://vuejs.org/js/vue.min.js

3、NPM安装

后续会有专门的文章介绍webpack和cli的使用。

03

第一个体验

我们在将Vue引入之后就可以开始我们第一个Vue程序了，体验一下Vue的响应式。

运行结果：

解释一下：

app变量就是Vue创建的对象，创建对象的时候传入了一些options：{}

• el：该属性决定了Vue的这个对象挂载在了哪个元素上。上述代码中就是将这个对象挂载在了id为app的这个元素上，这个对象把

  {{message}}

  中所包含的所有的DOM都进行了实例化。

• data:该属性存储一些数据(数据可以来自于自己定义的，也可以是服务器加载的)。

将data中的文本数据，插入到HTML的操作，有一个统一的名字——Mustache语法(双大括号)。

04

Vue的基础语法

2.1插值语法

插值操作就是将Mustache语法放入到Vue对象中。Mustache语法双大括号里面是以变量的形式出现的，也可以是表达式的形式，也可以在一个标签中出现两个Mustache，不在大括号中的内容则以原值显示。

结果：

上面有说过，Vue是响应式的，响应式就是随着data中变量的改变，页面显示的值也会相应的随之改变。如：我们可以在打开开发者模式，进入Console中进行修改count的值

修改完之后，页面的结果变为：

为了不希望它改变，我们可以加入一个Vue的指令v-once。

大家可以自己测试一下！

某些时候，我们的数据是一段HTML代码，但是我们想要显示的是显示解析HTML代码之后的内容，但是如果我们直接在Mustache语法直接显示的话，他展示的为这段HTML代码，我们可以使用v-html指令，这个指令后面会跟一个string类型，然后将string类型的HTML解析出来并且渲染。

结果：

将数据显示在页面中，除了Mustache语法外，还有一种是使用v-text指令。该指令一般情况下接收的是一个string类型的值。

结果：

接下来我们学习下一个指令v-pre，这个指令会跳过这个元素和子元素的编译过程，显示原本的大括号语法。

2.2绑定属性

前面我们学习的插值语法是将数据插入到模板的内容中，但是除了内容需要动态的决定以外，某些特有的属性我们也希望它可以动态的来绑定，比如:a标签中的href属性。这个时候我们就可以使用v-bind指令。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

结果：

点击百度就可以跳转到百度的页面了，大家不妨试一试。

v-bind也可以使用语法糖的形式，也就是它的简写方式

2.3事件监听

在我们开发的过程中，我们通常要和用户进行交互，我们就需要监听用户的操作，比如：点击事件，获取焦点事件，键盘事件等等。在Vue中，我们通常使用v-on指令来实现监听事件的功能。

v-on的语法糖@，所以接下来，我们下面的示例代码均使用语法糖形式。

注：其中的methods是Vue定义方法的位置，也是Vue对象的一个属性。在调用其中的方法的时候，需要注意参数问题：

1. 如果方法中不需要参数，则()可以省略不写。

2. 如果方法需要一个参数，调用方法的时候没有写括号，那么会默认的将原生事件event参数传递进去。

3. 如果方法同时传入了多个参数，那么原生事件event需要手动通过$event传入。

结果：

2.4条件判断

条件判断指令v-if、v-else-if、v-else。

结果：

实现一个小案例：

有两个按钮：点击按钮1，显示一个input元素；点击按钮2，显示另一个input元素。

完成之后，我们在input1中输入值，点击按钮2

结果：

在点击按钮切换的时候，input已经发生了变化，但是里面的值并没有随着按钮的切换而置空，原因是：

Vue在进行DOM渲染的时候，出于对性能的考虑，会尽可能的复用已经存在的元素，所以在使用v-if的时候，要加上key，并且保证key的值不同，这样就不会出现复用的情况。

v-show和v-if的比较：

• 两者都是可以决定一个元素的显隐；

• v-if条件为false 的时候，不会有对应的元素在DOM中;v-show的条件为false时，仅仅是将元素的display属性置为none；

• 在开发中，如果显隐的切换很频繁，使用v-show；当只有一次，则使用v-if。

2.5循环

Vue中使用v-for指令来实现将一组数据的渲染。

结果：

如果你看了官网中关于v-for的介绍，就会发现，在官网的介绍中，建议在使用v-for时，加上key属性，这个是为什么呢？(有兴趣可以去了解一下Diff算法),我这里简单的描述一下。

当同一层有很多相同的节点，我们需要在中间添加一个新的节点的时候，比如有1,2,3,4,5五个顺序的节点，现在要在第2个节点之后新加一个节点6，那么Diff算法会将3更新为6,4更新为3,5更新为4，再添加一个5节点，这样我们渲染真实DOM开销是非常大的，那么为了解决这个问题，我们给每个节点设置一个key来做唯一的表示，这样子就可以正确的识别此节点，那么再添加6节点的时候，只需要找到插入的位置，直接插入新的6节点就好了。

2.6表单双向绑定

Vue中使用`v-model`指令来实现了表单元素和数据的双向绑定。

结果：

我们可以很直观的看到显示的结果，当我们input中的数据发生变化时，会将输入的内容传递给message变量，页面中的message也会随之发生改变，所以，通过v-model我们实现了双向绑定。

有人可能会疑问，v-model的双向绑定都是怎么实现的呢？其实v-model就是一种语法糖的表示形式，它包含了两个操作:

1. 将input的value属性通过v-bind来绑定；

2. 通过v-on给input标签添加了input事件(input事件是当input标签中的值发生变化时触发的事件)

接下来，介绍几个有关v-model的修饰符

• 通常情况下，我们已经知道了，给input标签添加v-model指令之后，数据发生改变，那么data中对应的值也会发生相应的变化。

某些时候我们不想它们自动变化,可以使用lazy修饰符，该修饰符可以在标签失去焦点或者是回车的时候才会更新数据。

• 通常情况下，我们的输入框都会将输入的内容当成字符串进行处理，但是如果我们希望处理的是数字类型，我们可以使用number修饰符可以让输入框输入的内容自动转为数字类型。

• 如果在我们输入的内容中前后有许多的空格，通常我们希望可以将这些空格去除，那么可以使用trim修饰符来去除左右两端的空格。

2.7计算属性

通过前面的学习，我们已经知道，通过插值的操作可以对data中的数据在页面进行显示，但是某些时候，我们需要显示的内容可能是通过data中的数据进行一系列操作之后再进行显示的，这个时候我们就可以使用计算属性的方法，计算属性是在computed中，它也是Vue对象中的一个属性。

实现一个小案例：

计算小明需要购买课本的总价格

结果：

学会了吧，是不是很简单。其实每个计算属性都有一个getter和一个setter方法。

结果：

我们再来讨论最后一个问题，这个功能我们不仅可以使用计算属性的方法实现，同样的我们也可以通过定义方法来实现，那么两者的区别在哪里呢？我们为什么要使用计算属性的方法，而不使用定义方法来实现呢？

首先，我们在刚才的代码中，我们加上一个getTotalPrice方法，然后将计算属性的值和方法的值在页面显示多次

结果：

我们可以看出，计算属性会进行缓存，如果是多次使用计算属性的值，只会调用一次；而方法在每次调用的时候都会进行调用。

通过这个小实验，相信这两个用哪一个你也会学会选择了！

2.8监听属性

在Vue中，我们可以使用watch来监听属性的变化。

结果：

结果：

如果监听的对象是一个对象类型的话，那么使用普通的监听是没有效果的，所以有两种方式监听对象：

1. 使用深度监听(监听后的结果值一样)

2. 使用计算属性的方式获取对象中需要监听的属性，进行普通监听