VUE学习总结

1、简介

它是一个轻量级的MVVM框架

MVC与MVVM之间的区别：

MVC是后端的分层概念；

MVVM是前端视图层的概念，主要关注于视图分离，也就是说MVVM把前端的视图层，分为三个部分Model，View，VM ViewModel

核心思想：数据驱动+组件化的前端开发

DOM是数据的一种自然映射

数据响应原理：数据（model）改变驱动视图（view）自动更新

组件化的目的：扩展HTML元素，封装可重用的代码

组件设计原则：

（1）页面上每个独立的可视 / 可交互区域视为一个组件

（2）每个祖籍在哪对应一个工程目录，组件所需要的各种资源在这个目录下就近维护

（3）页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

Vue-cli是Vue的脚手架工具

webpack：对资源进行打包

webpack打包html，css，js：https://www.cnblogs.com/luojianjian/p/8053113.html

2、Axios.request()

axios(config)
axios(url, config)
axios.create(config)
axios.request(config)
axios.get(url, config)
同理：delete，head, options与get相同
axios.post(url, data, config)
同理：put, patch与post相同

链接：https://blog.csdn.net/binginsist/article/details/65630547

3、axios中使用qs的作用是什么？

ajax请求的get请求是通过URL传参的（以？和&符连接），而post大多是通过json传参的。

qs是一个库。里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。

在开发中，发送请求的入参大多是一个对象。在发送时，如果该请求为get请求，就需要对参数进行转化。使用该库，就可以自动转化，而不需要手动去拼接
https://segmentfault.com/q/1010000018186919?utm_source=tag-newest

4、export和export default的使用

export只能导出一个,一个模块(js文件只能导出一个)

ES6模块主要有两个功能：export和import

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

注意：

1、export default 向外暴露的成员，可以使用任意变量来接收

2、在一个模块中，export default 只允许向外暴露一次

3、在一个模块中，可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】

5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

链接：https://blog.51cto.com/11871779/2348288

https://blog.csdn.net/sleepwalker_1992/article/details/81461543

https://www.cnblogs.com/xiaotanke/p/7448383.html

5、Sass/Scss和Less区别

一. Sass/Scss&Less是什么？
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。

Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。less英文站需要外网，也可以访问中文站

Sass/Scss&Less区别？
1.Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2.变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

链接：https://zccst.iteye.com/blog/2172229

6、vue-resource

https://www.cnblogs.com/yuzhengbo/p/6714355.html

7、vue中 关于$emit的用法

1、子组件可以使用 props 接收父组件的数据

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

链接：https://blog.csdn.net/sllailcp/article/details/78595077

8、window.location.href的用法

javascript中的location.href有很多种用法，主要如下。

self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面

如果页面中自定义了frame，那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

链接：https://blog.csdn.net/sdta25196/article/details/78799338

9、属性(v-)

v-if：若为false，判断块的前端直接是没有的，不进行渲染。
v-show：若为false，判断块的前端是不显示（display=none），前端块存在。

10、vue中render函数的使用

1. render方法的实质就是生成template模板；
2. 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的；
3. 这个方法有三个参数，分别提供标签名，标签相关属性，标签内部的html内容
4. 通过这三个参数，可以生成一个完整的木模板
   备注：
   render方法可以使用JSX语法，但需要Babel plugin插件；
   render方法里的第三个参数可以使用函数来生成多个组件（特别是如果他们相同的话），只要生成结果是一个数组，且数组元素都是VNode即可；
   https://blog.csdn.net/qq78827534/article/details/80792514
   iview render
   render自定义渲染组件
   vue+iview使用时，render函数创建组件点击事件无效的解决方法
   在有些时候，写死的组件无法满足需求，render函数是比较好的选择。但是我在使用render函数时，把页面的东西渲染之后，添加点击事件时遇到一个问题，在render函数里面以on:{ click: () => { console.log(‘点击事件’) } }添加点击事件时，无论怎么样都监听不到，也就是点击render渲染出来的组件或dom时根本没没有作用，但也没报任何错误。自己在网上找各种资料尝试了使用click,onClick,'on-click’等事件，都没有任何用。
   这里的解决方法：将on: {click: () => { console.log(‘点击事件’) }}的on替换为nativeOn。也就是 nativeOn: {click: () => { console.log(‘点击事件’) }}。
   https://www.jianshu.com/p/034afd50ac21