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函数的使用
- render方法的实质就是生成template模板;
- 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的;
- 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容
- 通过这三个参数,可以生成一个完整的木模板
备注:
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