vue知识（二）

1. 安装axios:

npm install --save axios

2. Vue Router

路由就是根据网址的不同，返回不同内容给用户

<router-view>就是当前路由地址所对应的内容，页面配置好的在main.js中的vue实例中的router部分，其中靠import引入router,在‘./router’中的Index.js

npm install vue-router

 3. {{方法}}

当在标签中时，需要是：方法（），例：

<p>{{name()}}</p>

此处，name{{}}是一个方法

而对于v-on:click="方法"时， 这bind种形式的时候，不需要（），例如：

<p v-on:click="name">文字</p>

因为v-bind或其他中=“里面一定是一个方法”,只有需要参数的时候才加（），例如:

<p v-on:click="name(小明)">文字</p>

4. computed的使用

1. methods中的方法一旦触发，所有的方法都会执行，即只要你触发methods中的任何一个方法，所有方法都会被触发，这就对性能造成了一定的影响。使用computed可以避免这种情况的出现，其用法和methods类似，只不过computed中是属性，而methods是方法。即methods中的方法调用时，有些时候需要加()，如3，而computed不需要加()

2. 但也并非所有的methods中的方法都要写入computed中，只有耗时以及大量搜索的时候（搜索的时候基本都使用）才使用computed，其他时候还是用methods

3. 有缓存机制，即computed中所依赖的东西没有改变时，它就不会再重新计算，会提高性能，而methods没有缓存机制

4. set 和get

也可以写成以上这种形式，用set的时候，直接可以

vm.fullName="str1"

 

以上代码，一旦使用vm.fullName="str1"，firstName和lastName都会改变

https://blog.csdn.net/juse__we/article/details/82115058

https://blog.csdn.net/Nate__River/article/details/78693939

5. watch

侦听器

与computed一样有缓存机制，用于侦听变量的变换，但是与computed相比，代码较多

6. $emit等组件间传输

https://www.jb51.net/article/140581.htm

子组件向父组件传递

.$emit(obj,args)

向父组件传递obj,以及参数

7. .$destory

https://segmentfault.com/q/1010000011521940

$destroy只是完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

它并不是用来清除已有页面上的DOM的。

包括Watcher对象从其所在Dep中释放

8. v-text="变量+‘字符串’"和v-html="变量+‘字符串’"

https://blog.csdn.net/qq_31070475/article/details/78479411

v-text="变量+‘字符串’"和{{变量+‘字符串’}}作用相同，不解释标签

v-html解释标签

9. v-if 和v-show

值都为一个布尔值

v-if="true"、v-show="true"时，所在DOM存在

v-if="false" 时，所在DOM会被从页面删除

v-show="false"时，所在DOM 不会被删除，只是其display:none, 因此，它的性能较好，因为不会频繁的从页面删除添加DOM元素

10. v-else

与v-if连用，会尽量复用页面上的DOM，

input中的内容没有被清空，解决方法：加key值

原因：当你给元素加key值时，vue会知道它是页面上唯一的元素，因此不会复用以前的input标签了，这是虚拟DOM中定时算法用到的内容

 11. v-if

index是item在数组中对应的索引，为了增加性能，会给每一个循环项加一个唯一的key值，但是不推荐使用index作为key值，建议使用后端给的数据标识符，很多给的名字都是id，即

12.

修改数组中内容时，不能通过下标的形式修改（数据变了，但是页面不会变化），a.能通过数组提供的方法，这样，数组变化，页面也会发生变化

这些方法有： push| pop|shift|splice|sort|reverse，除此之外，b.改变引用 c. Vue.set(实例，index，新的值)

13.

使用<template></template>占位符，代替div循环时，会包裹一些元素，但并不会被渲染到dom上

14.

使用v-for遍历对象时，可以有 v-for="(item,key,index) in list"，item是值，key是键，index是索引

向对象添加项数时，使用下标方法不行，动态加值不好用，可以更改对象的引用：

另外一个方法：使用Vue.set(obj,变量1，变量2。。。)=》实例方法：实例.$set（obj,变量1，变量2。。。）

15.

根组件中，data可以是个对象，而在子组件中，data必须是个函数

16.    多页应用和单页应用

多页应用：

每次页面跳转都会返回一个新的html，因此首屏时间快，返回页面时，服务器返回一个Html，此时，页面就展示出来了。

其次，搜索引擎优化较好，因为搜索引擎在做网页排名的时候，需要知道网页的内容，根据网页的内容才能给网页、权重进行排名，搜索引擎可以识别html中的内容，每个页面的内容都放在html中，因此排名较高。

缺点：页面切换慢，因为每次切换都需要发一个http请求，网页较慢时，就会有一个明显的卡顿现象出现

单页应用：

单页应用时，首屏时间慢，因为要发一个html请求，同时还要一个js请求，两个请求都回来了才会出现首屏

缺点二：搜索引擎优化效果较差，搜索引擎只认识html中的内容，不认识js中的内容，而单页应用的页面跳转都是通过js渲染，

但是vue中提供的服务器渲染可以完美的解决掉单页面应用的缺点

17.

1像素边框，在css样式中写1px的像素时，在手机端多倍屏的时候，可能显示出来不只是1px，有可能有两三像素=>border.css

300毫秒点击延迟事件：移动端一些机型在click事件时，会产生一个300ms的延迟=>引入fastclick第三方包

18. 1rem= html font-size

19. stylus

https://www.jianshu.com/p/5fb15984f22d

stylus，是 CSS 的预处理框架。stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

20. slot

https://blog.csdn.net/kingov/article/details/78293384

https://blog.csdn.net/zhouzuoluo/article/details/80536754

21. swiper中的loop

https://www.swiper.com.cn/api/loop/22.html

https://www.cnblogs.com/clwydjgs/p/10313574.html

22. style中引用时用@import '~路径'

~的意思是webpack的路径解析相关的用法。
~这里应该是指定的模块解析目录下进行匹配对应文件，
webpack中可以通过resolve.modules字段修改模块目录。

23. touch

https://blog.csdn.net/m_uncle/article/details/78129222

https://ask.csdn.net/questions/693222

24. 前端get和post请求的入门总结

https://blog.csdn.net/u010770896/article/details/79065479

25. 手势缩放