1.亘古不变的“Hello World”

vue的引入方式

（1）cdn方式

这种方式具有显著缺点就是加载速度慢

（2）通过nodejs以npm方式将vue下载到本地 控制台下载vue指令：npm i vue(i为install缩写)

vue的创建及输出

创建vue实例并挂载到dom节点

在整个vue对象中有很多api，其中以$开头的api为公有api，是vue希望用户去使用的，而以_开头的api为vue私有的api，是vue不希望对外开放使用的api，公有api是可以通过vue官方文档查找到对应的使用方式

在vue的视图中输出变量值的方式是用一对内嵌的花括号{{}}

vue的工作原理其实就是一个介于视图层与数据层之间的一个承上启下的媒介，让数据绑定视图，让dom去侦听数据

2.文本插值

vue中的{{}}语法即为文本插值，花括号内可以是变量值也可以是表达式，对于dom中的属性就行数据绑定需要使用v-bind(简写为:)进行绑定

3.事件处理

vue通过v-on：语法进行事件绑定，简写为@，绑定的事件驱动可以是表达式，可以是函数以及函数调用的形式，其中函数调用的形式主要用于区分事件类别

在click中可以使用修饰符达到指定功能，比如按钮只能点击一次有效，用.once修饰

此时在首次点击按钮的时候count数值会+1，此后无论如何点击，count数值不变

4.计算属性

vue中的计算属性是在options中的computed中以函数的形式声明的，其作用是当一个属性需要依赖其他属性时需要使用计算属性，使用时与data中声明的变量用法相同

计算属性的好处是可缓存的，当依赖的的属性不变时，浏览器会缓存当前计算属性的值，后续调用时会调用缓存值，从而达到优化目的，并且提高程序的可读性，计算属性所依赖的属性可以是多个，所以它是一个多对一的关系

5.监听

vue中的监听是在options中的watch中声明的，当某个值发生改变的时候我们需要去做一些事情的时候我们需要用到watch功能

watch中的方法是懒加载形式，即首次运行时是不会自动执行调用的，如果需要立马执行，需要将immediate属性设置为true

watch中也可以观察一个对象，但是默认的当对象中任意属性改变时并不会处罚函数调用，只有当所有属性均发生改变时才会触发函数调用，如果想任一属性改变时即可触发函数调用，需要将deep属性设置为true

当你需要只观察对象中某一属性发生改变才会触发函数调用时，我们可以将对象中指定属性拿出作为观察对象去声明函数

watch时一种一对多的关系，即观察一个点可更改多个值或做异步操作

6.条件渲染

vue的条件渲染为v-show和v-if两种，二者区别在于，当隐藏dom时，v-show做的是向dom中添加display:none来实现隐藏，而v-if是将整个dom元素注释掉

当我们需要某个模块一上来的时候不加载（懒加载）的时候需要用v-if，达到优化目的，当需要频繁去切换显隐的时候我们都用v-show进行显隐控制，需要考虑到浏览器的重绘以及回流，此时v-show会更好一些

7.列表渲染

vue的循环语法时v-for...in...的形式，可对数组或对象进行循环

8.class&style

vue的class使用原理同v-bind，以:class形式进行绑定，可以接收对象，数组或表达式的形式

style的使用同style基本相同

9.v-model

现有一个需求，显示的值与输入框的值相同，且当输入框内容改变时，显示的值会随之发生改变，用原始的js逻辑实现如下

在vue中，v-model即可实现如上功能，v-model其实实现的功能是双向绑定，但实质上就是一个语法糖，在vue中没有双向绑定

v-model也有修饰符，如限定绑定的值为数值型，用.number修饰