Vue 学习笔记

一、Vue特性

1、组件化开发

（1）使用 vue 开发时，可以将重复使用到的一个功能单独封装成一个组件以复用
（2）因为 vue 组件化开发的特点，代码耦合度得以降低，在后续功能维护中更为方便。

2、MVVC模型

model 模型层：代码逻辑，
view 视图层：代码渲染到 html 页面
model-view层：视图层与模型层的通信，数值传递

3、单页面应用SPA

优点：
（1）使用 vue-router 设置路由，vue 开发实际依靠 url 实现路由跳转，在运行过程中始终只有一个页面加载，使得代码运行更高效；
（2）初次加载所有页面，所以切换页面会很快
缺点：
（1）若存在很多页面，初次加载非常耗时
（2）无法使用导航回退，因为是单页面

4、生命周期（八个阶段）待补充完善

beforecreated：
created：
beforemounted：
mounted：
beforeupdate：
updated：
beforedestroye：
destroyed：

5、虚拟dom

无需手动挂载 dom，vue 代码自行实现；开发过程只需专注视图与代码

二、Vue安装及使用

1、安装

（1）cdn 引入

通过如下代码映入 vue，也可下载到本地后引入，可以在离线状态下继续开发工作

（2）npm 安装（基于 webpack）

搭建 nodejs 环境后可在命令行还用 npm 命令进行所需插件包的下载，且能够自主选择全局安装或局部安装。

2、插件

（1）volar（vue3 开发 vs code使用，vue 插件为 vetur）

1、语法纠正、高亮、检测；
2、语法糖检测（存在语法糖的代码可提示更改）；
3、同时展示 template、script、style 三个部分的代码，开发过程省心不少。

3、配套产品

vue-cli 脚手架、vuex 全局状态管理工具、axios 网络组件、vue-router 路由、vue-devtool 可视化调试工具

三、核心语法

1、v-指令（待完善

（1）内容

v-html、v-text

（2）条件渲染

（条件语句，根据返值是否为 true 进行渲染）
（在同一标签下，for 优先级高于 if）
v-for = “(name1,key,index) in name”
v-if
（运行时已渲染好，根据返值选择是否展示）
v-show

（3）动态绑定和双向绑定

v-bind:class = ""（动态绑定）
绑定后，html 页面展示的值会根据 vue 内部的值的改变而改变；反之，不会改变

v-model(双向绑定)
绑定后，html 和 vue 内部任意一端值改变都会影响另一端的值

2、属性

methods：使用一次，运行一次
computed（计算属性）：可缓存，没有改变就输出之前的结果
watch：

3、修饰符

.trim(删除字符前后空格)

4、事件

v-on:click=""（监听是否点击，若为 true 则执行对应方法）