欢迎查看Vue总结知识

标题欢迎查看Vue总结知识

一、 VUE：用于构建用户界面的渐进式框架
可以将项目的一部分使用vue实现，也可以使用Vue实现整个项目
二、特点

易用：会html、css、js更快上手
灵活：不断繁荣的生态系统，可以在一个库或者一个框架伸缩
高效：20kb min+gzip 运行文件，超快虚拟DOM，最省心的优化

前端目前主流三大框架：VUE
掌握Vue使用之后可以对比类似框架 React、Angular
调试插件
1.在谷歌商店找vue-devtools插件,使用这个插件,并设置插件,允许访问文件网址。会在调试中出现vue相关的东西
2.debugger 直接写可以调试
三、MVVM框架
1.新建html文字说明MVVM设计的认识，可以百度一下对比MVC
<!-- MVC设计模式：
项目足够庞大复杂、多个开发人员协调开发时，常常会因为模块分配混乱、只能混乱等造成开发缓慢、代码冲突等问题；
最好的解决办法就是把项目细分成各个功能模块，不管是职责分配还是代码管理问题都得到了很好的解决；
View（视图层）Model（模型）Controller（控制器）
首先一个简单的流程就是：用户与View交互；Controller时间处理器被触发，控制器从模型中请求数据，
并反馈给视图层，视图讲数据呈现给用户
真正处理业务逻辑的是Model层而不是controller；controller只是对页面节点事件的注册和控制；
MVVM设计模式：
项目庞大，需求复杂，各个事物逻辑间的关系也会相应变得复杂，逻辑顺序、逻辑主次、逻辑包含等关系错综复杂；
数据、逻辑和业务庞大了，就把各个模块分离出来；代码间耦合性高，改动大，不利于维护和迭代；
View（视图）：
单纯的页面，不包含任何的逻辑代码！视图通过绑定，或者调用view-model上的方法来获取数据；
在运行时，UI控件会响应view-model属性触发的变化通知，从而改变view；
Model（模型）：
包含了数据模型以及相应的业务逻辑和数据校验逻辑；
ViewModel（视图模型）：
作为view和model连接的桥梁！职责是处理view的逻辑（不是具体的业务逻辑代码部分，这是model的职责）；
view-model与model之间的交互是通过调用model中的方法来实现的；然后view-model从model中获取数据供view使用；
通俗说ViewModel就是监听数据变化，然后调用model中的方法做出反应！数据变化即界面改变！

 两种设计模式的区别：（1）、MVC中，view可以直接访问model，从而view中会包含model的信息，还有可能会包含一些业务逻辑；MVC关注的是Model的不变，所以Model不依赖于View，但是View是依赖于Model的；并且业务逻辑在view中实现了，导致要更改view比较困难，业务逻辑无法重用；（2）、MVVM是真正把页面和逻辑数据分离的模式，把数据绑定放到js中实现，这个js文件就只负责完成数据绑定，把model绑定到UI上；-->

四、安装
1.直接用

2.使用CDN服务
CDN服务呢？网络服务内容分发网络

3.使用NPM PIP
4.使用vue-cli 脚手架
五
1，v-text,v-html,v-if,v-on,v-bind,v-model
v-cloak 解决{{}}插值闪烁问题
v-text 会先执行覆盖元素中原本的内容但是插值表达式只会覆盖自己的占位符，默认不会闪烁
v-html 渲染 html标签覆盖元素中原有元素内容
v-bind: 简写为: 用来绑定数据可以写合法的js表达式
v-on: 简写为 @ 用来点击事件
v-bind: 数据的单向绑定
v-modle :数据的双向绑定这个只能用于表单元素中
v-if 有较高的切换性能 , 适合元素可能永远不会被用户看到。
v-show 有较高的初始渲染消耗,适合元素频繁切换。
2，生命周期钩子的函数：
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestory destoryed
beforeCreate()：这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它…
created(): 这是遇到的第二个生命周期函数…
beforeMount()：这是遇到的第3个生命周期函数,表示模板已经在内存中编辑完成,但是尚未把模板渲染(挂载)到页面中。在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。就像{{text}}这样
mounted()：这是遇到的第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。只要执行完这个生命周期,就表示整个vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段。
beforeUpdate()：这时候表示,我们的界面还没有被更新[但数据已经被更新了页面中显示的数据，还是旧的，此时data数据是最新的。页面尚未和最新的数据保持同步
update() : 这一步执行的是先根据data中最新的数据，在内存中重新渲染出一份最新的内存dom树,当最新的内存dom树被更新后,会把最新的内存DOM树重新渲染到真实的页面中去,这时候，就完成了数据data(model层)->view(视图层)的更新，
页面和data数据已经保持同步了,都是最新的。
beforeDestory :当执行 beforeDestory 钩子函数的时候,Vue实例就已经从运行阶段,进入到销毁阶段, 当执行beforeDestroy的时候，实例身上所有的data和所有的methods以及过滤器、指令…都处于可用状态,此时,还没有真正执行销毁的过程。
destroyed :
当执行这个函数的时候,组件已经被完全销毁了,此时，组件中所有的数据,方法，指令，过滤器…都已经不可用了
3，事件修饰符。由点开头的指令后缀表示。
.stop
.prevent
.capture
.self
.once
.passive
.once
.passive
stop 阻止冒泡：外层和里层都有方法点击里层会产生冒泡，也会触发外层的事件。
顺序从里到外产生事件
prevent 阻止浏览器默认行为：
a标签有浏览器默认行为。
capture 捕获事件：点击里层先触发外层再触发里层顺序从外到里产生事件
self 只触发自己本身的事件不会产生冒泡和捕获事件类似于阻止冒泡但只针对自己那一层最外层还是会被最里层冒泡冒到 stop 是阻止所有层次
once 事件只执行一次
按键.enter .tab .delete .esc.space.up.down.left.right
.sync修饰符
当你需要双向数据绑定时，会导致数据流混乱，所以推荐使用update:myPropName 的模式触发事件取而代之。即
子组件：this.$emit(‘update:title’, newTitle)
父组件：

Vue 自定义了一种.vue文件，可以把 HTML、 css、 JS代码写到一个文件中，从而实现对一个组件的封装，一个.vue 文件就是一个单独的组件。由于.vue 文件是自定义的，浏览器不能识别，因此在 Webpack构建中，需要安装 vue-loader 对.vue文件进行解析。在 VisualStudio Code 编辑器中，书写.vue文件前也需要安装对应的插件(如 Vetur) 来增加对文件的支持。

一、我们先安装node
在浏览器输入http://nodejs.cn/进入node官网，点击下载。
我们下载左边的版本，可以看到node有各种系统的安装包，我们点击windows安装包.msi的64位进行下载，下载完双击安装包，勾选我同意，选择安装路径，然后下一步就好了。
打开cmd，输入
node -v
然后同样的在cmd输入
npm -v
pip 是python的包管理工具
js常用的包管理工具 npm yarn两个使用一个即可
npm是node的包管理工具，安装node的同时直接就安装好了npm，
但是国内npm的服务是被墙的，但是我们可以把npm的源设置成淘宝镜像的源，输入
npm config set registry http://registry.npm.taobao.org/
再输入
npm get registry
下载包比较快
通过npm初始化项目空目录 npm init 会创建package.json文件夹
通过npm安装js模块在npm创建的package.json同级别目录 npm install jquery
通过npm卸载js模块 npm uninstall jquery
二、安装vue的脚手架vue-cli
脚手架：有相关工程化配置
vue-cli 2
vue-cli 3
cmd输入
-g代表全局安装效果等同于直接在命令行使用python
npm install -g @vue/cli
回车等待安装完毕
再次输入
vue -V
yarn 使用类似npm
如果项目要求我们用vue-cli的2.x版本去搭建项目，我们可以安装一下vue-cli的旧版本桥接工具，cmd输入
npm install -g @vue/cli-init
在cmd进入到你想创建项目的目录
然后在cmd输入创建指令
vue create vue-demo
babel是js的编译工具，可以将我们项目中所用的js新特性编译成浏览器支持的js版本。众所周知，一些es6的语法，在一些老版本的浏览器中还没有得到全面的支持（更不要说es7等更新的语法），为了防止项目运行在老版本的浏览器中报错，我们需要对我们的代码进行编译。

TypeScript是微软开发的一种开源的强类型的编程语言。由于js是弱类型的语言，所以开发者一不小心容易中招，我声明的明明是String类型怎么变成Number类型了等等。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，以其良好的静态类型检查等优点被越来越多的开发者所喜欢。

PWA是一种先进的理念，可以让网站像原生应用一样放在设备的主屏，支持消息推送等功能。

vue-router是vue的官方的路由管理器。构建vue单页面的利器，后续的项目实战中，会详细介绍vue-router的使用方法。

vuex是一个专门为vue应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

css预处理插件，css预处理插件有很多，目前比较流行的有less、scss、stylus等，选择less作为css的预处理插件。

eslint/formatter插件是用来检测你代码是不是符合一些规范的（包括缩进、写法等），而且还有代码格式化的功能，我觉得对于项目开发，对于开发者良好的编码规范的养成都是有好处的。

我选择如上红框所显示的配置，选择之后回车，需要你选择vue-router用哪种模式（路由插件有两种模式，一种为hash模式，另一种为history模式，这两种模式最显著的区别为hash模式下浏览器的url地址中会有#，而history模式没有，hash模式下路由切换只会变化#后面的路径。底层的实现这里不做过多的介绍）。我们输入n选择hash模式。

需要选择一种css预编译语言，选择less。

选择一种eslint检测代码的风格（选择哪种风格全凭个人喜好），我选择第一个（对于不符合规范的代码只报出警告）

选择eslint检测代码时的时机，第一个为保存时检查，第二个为提交时检查。我只选择保存时检查，因为提交时检查，提交会变得很慢。

你想把这些工具的配置放在哪，第一个选项为放在单独的配置文件中，第二个选项为都写在package.json文件中。我会选择第一个，我觉得这样查看各个工具的配置更清晰。

是否需要把对于项目的这些预留配置保存起来。这个根据个人习惯，保存起来的话，需要你输入一个预留配置的名称，然后这些配置会被保存到当前计算机用户文件夹下的.vuerc文件中

三、用hbuilderx打开我们的项目
首先讲解一下文件夹和文件的用途
node_modules 这个文件夹里面是我们项目需要的一些依赖；
public 静态文件夹，这个文件夹中的资源不会被webpack编译，构建生产包的时候，会被直接拷贝一份；
assets 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译；
components 文件夹中存放我们的组件；
views 文件夹中存放我们的页面；
App.vue 这个文件是我们所有vue页面的顶层文件；
main.js 是我们整个项目的入口文件；
router.js 是路由的配置文件；
store.js 是vuex的配置文件；
.gitignore 需要git忽略的文件；
babel.config.js babel的配置工具；
package-lock.json 记录项目依赖中各个依赖之间的关系和版本，防止npm包中有不遵守“相同大版本号的同一个库包，其接口符合兼容要求”
这一规范，导致项目运行报错；
package.json 项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。
README.md 项目的说明文档，项目介绍、License、一些命令（例如：启动命令、打包命令、单元测试命令等）
到此，我们的项目基本上已经搭建完了。
测试 vue ui

一、创建项目
vue create vue-demo1
会自动创建目录 vue-demo1 确保vue-demo1这个文件夹不存在
二、 Please pick a preset: (Use arrow keys)
选择一个预设，使用箭头按键
Default ([Vue 2] babel, eslint) VUE2默认包含babel，eslint
Default (Vue 3 Preview) ([Vue 3] babel, eslint) VUE3 默认包含babel,eslint
Manually select features 到底选哪个自己决定
三、 Check the features needed for your project:
(Press to select, to toggle all, to invert selection)
选择项目需要的插件
0.Choose Vue version 手动选择VUE的版本
1.Babel 将ES高级版本语法转换为ES5语法
2.TypeScript 超集JS 支持面向对象的JS
3. Progressive Web App (PWA) Support 让Web应用有原生app的感觉
4. Router VUE-Router路由插件
5. Vuex VUE插件数据状态管理器
6. CSS Pre-processors CSS预处理工具支持CSS高级写法
7. Linter / Formatter语法格式化工具
8. Unit Testing单元测试
9. E2E Testing段对端测试
四、 Choose a version of Vue.js that you want to start the project with (Use arrow keys)
选择VUE的版本
2.x
3.x (Preview)
五、 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
选择路由模式：hash与histroy模式
Hash模式下路由带有#号局部刷新
History就是一般的前端项目路由
六、Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
选择CSS的预处理工具
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
七、Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
将babel/esline的配置文件放在哪儿
In dedicated config files
In package.json
八、Save this as a preset for future projects? (y/N)
是否将上述选项制作预设
N
VUE脚手架项目目录
一、 Node_modules 不需要关注
内部存放项目所以来的所有js第三方库(vuex,axios等)
二、 Public 静态资源目录
a) Favicon.ico 网站logo
b) Index.html VUE 项目的html入口文件(SPA)
三、 Src 工作目录
a) assets 项目需要使用的静态资源图片css 之类
b) components 项目所有的组件
c) router vue-router项目所有的路由
d) store vuex数据状态管理器
e) views页面组件
f) APP.vue 主vue组件入口
g) Main.js 主逻辑入口
四、 .gitignore git代码管理工具的忽略列表文件
五、 Babel.config.js
Babel的配置文件
六、 package.json
NPM的管理文件内部罗列了项目所依赖的内容
七、 package-lock.json
包依赖关系
八、 ReADME.MD
MARKDOWN格式的解释说明文件

a,传递知识点
export default 和 export
export default 向外暴露的成员,可以使用任意的变量来接收
在一个模块中,export default只允许向外暴露1次
在一个模块中，可以同时使用 export default 和 export 向外暴露成员
使用 export 向外暴露的成员,只能使用{}的形式来接收,这种形式,叫做[按需导出]
export 可以向外暴露多个成员,同时,如果某些成员,我们在import的时候,不需要,则可以不在 { }中定义
注意使用 export 导出的成员,必须严格按照导出时候的名称,来使用{ } 按需接收
使用 export 导出的成员，如果就想换个名称来接收,可以使用 as 来起别名

b，router
render会把el指定的容器中,所有的内容都清空覆盖,所有不要把路由的router-view和router-link 直接写到el所控制的元素中
注意 app这个组件，是通过vm 实例的render 函数,渲染出来的,render函数如果要渲染组件,渲染出来的组件,只能放到el: '#app’所指定的元素中;
Account 和GoodsList 组件，是通过路由匹配监听到的,所以,这两个组件,只能展示到属于路由的子路由的应用场景在标签页切换

c，vuex
vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过父子组件之间传值了,如果组件的数据不需要共享,此时,这些不需要共享的私有数据,没有必要放到vuex中;
vuex,存放共享数据,data 存放组件私有的数据 props存放父组件传过来的数据
操作vuex里的state

d，性能优化建议
watch如果是obj 加上 handle+deep true 也是可以监听对象的属性但是性能消耗大
computer 里生成的值会有缓存不建议用函数去处理一些值得计算而是用 computer 来计算值，这样性能高。
:key =‘id’
id是列表返回的id 如果没有id 就写item 一般不建议写 index (eslint会有警告错误信息) 写上key 是为了减少消耗它会有个缓存。
v-once 和 v-model 的区别是只会绑定一次不会重新更新内容可以减少开销应用场景：只读场景,不进行修改页面内容的时候
v-for 和 v-if 不适合在同个div连用

1.框架和库的区别
框架（framework）：有着自己的语法特点、都有对应的各个模块。
库（library）：专注于一点。
框架的好处：
提到代码的质量，开发速度
提高代码的复用率
降低模块之间的耦合度（高内聚低耦合）
UI：user interface
GUI：graphical user interface
CLI：command line interface
API：application interface