vue基础-01（字数有点多，耐心看）

本文链接：https://blog.csdn.net/learntogiveup/article/details/118266305

vue小节-01（字数有点多，耐心看）

一.准备工作
1.什么是vue？
vue是一个渐进式的javascript框架
那么什么是渐进式呢？
渐进式框架，就是把框架分层，vue最核心的部分就是视图渲染，然后往外是组件机制，再加入路由机制，状态管理，构建工具。

就是说你既可以只用核心的视图层渲染功能来快速开发些需求，也可以使用vue全家桶。根据自己的需求选择不同的层级。
什么是框架？和库有什么不同？
框架是有自己一套规则的语法结构，比库强大；库只是一些方法的集合，是没有规则的，比如jquery
用法：我们在写代码的时候，比如需要用大jquery，我们就把jquery引进来用他的方法。
而我们在用框架的时候，是在框架中，根据其语法规则进行书写
在这里插入图片描述
2.如何能进行vue开发呢
a. 我们需要下下载一个脚手架终端中输入命令 yarn global add @vue/cli 下载完成之后可以运用vue -V命令，查看版本，检查是否安装成功
那么@vue/cli脚手架是什么？为什么要下载它呢？有什么优点？
首先，脚手架：可以理解为自动帮我们构建项目的工具。为什么要下载它呢？
我们的vue底层还是依附于webpack 来进行构建的，但是webpack前期构建需要创建很多的文件和下载插件，
下载@vue/cli脚手架可以帮我们自动完成这些操作，让我们把精力放在处理数据上，提高我们的工作效率。
3.在终端中输入 vue create 文件名（不要大写中文空格）创建我们自己的项目，通过 cd 命令转到我们的项目目录下
运行 yarn serve 命令启动服务器
注：不要再进行初始化获得package.jason 脚手架都帮我们做了
4.如果需要设置我们的端口或者其他设置，可以在根目录下创建一个vue.config.js文件进行配置

在这里插入图片描述
5.创建完成之后得到上图的文件夹，我们需要了解每个文件夹的含义，具体看图即可
我们重点要掌握入口文件有哪几个？代码运行的顺序是怎样的
src目录下的main.js – webpack项目打包入口 - Vue初始化
App.vue-- Vue页面主入口
public文件夹下的index.html --浏览器最终运行的文件
关系： App.vue =>main.js =>index.html

在这里插入图片描述
6.单vue文件
vue推荐采用.vue文件来开发项目
template中只能有一个根标签
形成独立的模块，作用域互不影响，不会出现变量相互影响的情况，以及考虑变量重名的问题
style 配合 scoped属性，可以保证我们的样式只针对当前template内标签生效
最后配合webpack，把他们打包起来插入到index.html中
在这里插入图片描述
7.清理我们不需要的文件–欢迎界面
assets和components文件夹下的一切都删除掉（不要默认的欢迎页面）
src/App.vue默认有很多内容，可以全部删除留下template 和 script 以及style的框
或者全部清除输入vue tab键生成框架。

二.基础学习
1.MVVM设计模式：用数据驱动视图改变，操作的dom ，vue源码自己干了
什么是设计模式？是一套被反复使用、多数人知晓的、经过分类编目的，代码设计经验的总结
简单来讲就是：是对代码分层，引入架构的概念
M：model 本质上是数据
V： view 本质上就是视图
VM： viewmodel 本质上就是vue源码
所以MVVM设计模式是数据视图视图模型双向关联的一种设计模式
优点：减少DOM操作，提高开发效率
2.声明式渲染/插值表达式 --大胡子语法–在dom标签中插入vue数据变量
语法：{{变量或者表达式（if语句不可以）}}
大括号中的变量要在js中的data函数中声明
3.v-bind可以在标签的属性中插入变量简写为 :
语法： v-bind:属性名= “vue变量” 简写 :属性名 = “vue变量”

在这里插入图片描述
4.给标签绑定事件 v-on 简写 @
语法： v-on事件名=“要执行的少量代码” v-on事件名=“methods中的函数名”
v-on事件名=“methods中的函数名(实参)”
方法在methods选项中定义

5.vue事件处理函数中，拿到事件对象
语法：无传参通过形参直接接收
传参通过 $event指代事件对象传给事件处理函数

在这里插入图片描述
6.v-on按键修饰符
语法：@keyup.enter --检测回车按键
@keyup.esc --监测返回按键

7.click点击事件的修饰符给事件带来更强大的功能
语法： @事件名.修饰符 = “methods里函数”
修饰符：
.stop --阻止事件冒泡
.prevent --阻止默认行为
.once – 程序运行期间，只触发一次事件处理函数
在这里插入图片描述
更多修饰符：http://cn.vuejs.org/v2/guide/events.html

v-model指令现阶段大多用于表单数据
目标：value属性和vue数据变量，双向绑定一起
语法：v-model = “vue数据变量”
双向绑定数据变量变化 ->视图自动同步试图变化->变量自动同步

下拉菜单中 v-model写在哪里？
在select标签中书写 value 在option上

复选框中，v-model需要注意什么？
v-model的vue变量：
非数组–关联的是checked属性
数组-- 关联的是value属性

vue变量初始值会不会影响表单的默认状态呢？
会影响，因为双向绑定-互相影响

9.v-model 修饰符
语法：
.number 以parseFloat转成数字类型
.trim 去除收尾空白字符
.lazy 在change时触发而非input时

在这里插入图片描述
10. v-text 和v-html指令更新对象的innerText/innerHTML
语法：v-text = “vue数据变量”
v-html = “vue数据变量”
注意：
会覆盖插值表达式的内容
v-html 会识别内容中的html标签所以慎用存在安全问题
v-text 和插值表达式的查边很小可以随意使用
11. v-show v-if命令
语法：v-show = “vue数据变量”
v-if = “vue数据变量”
原理：
v-show 用的是给标签添加display:none方法隐藏，适用于频繁切换使用
v-if直接从DOM树上移除适用于一次性的
高级 v-else使用
12.v-for命令 for循环
目标：列表渲染所在标签结构按照数据数量循环生成（谁要循环给谁加）
语法： v-for = “(值变量，索引变量) in 目标结构”
v-for = “值变量 in 目标结构”
目标结构：可以遍历数组/对象/数字
注意：v-for的临时变量名不能用到v-for范围外
在这里插入图片描述
12. v-for更新监测-- 目标结构变化，触发v-for更新
1.数组的变更方法（只要改变了原数组），就会导致v-for页面更新，
2.数组非变更方法，返回新的数组，就不会导致v-for更新，可以采用覆盖数组或者this.$set()方法来改变某一个数据
this.arr[0] = 100 这种方法会改变原数组但不会v-for更新因为vue 2.0 做不到
具体方法看我数组方法那一篇文章
13.虚拟DOM
本质上是内存中的一个保存节点信息，属性和内容的一个JS对象
首先，我们以前更新数据后，需要更新页面的方法，都是重新刷新页面这样会导致
我们的浏览器加载慢，并且出现回流和重绘的问题
因为我们每一次刷新页面都会重新创建结构，样式，行为，耗时，降低性能

在这里插入图片描述
vue中，我们在更新数据后 vue不会直接去操作DOM，而是先形成一个新的虚拟DOM结构，与旧的虚拟DOM结构进行比较，尝试复用标签就地更新内容，最大化的减少重新创建结构的数量，提高DOM更新的性能，不频繁操作真实DOM，减少回流和重绘。
实质上，就相当于在内存中比较变化部分，然后给真实DOM打补丁（更新）