VUE的一些知识积累

52 阅读6分钟

0)css.js.html,jquery

1).Vuex:状态管理模式

2).ES2015/2016/2017语法

ECMAScript6 入门学习记录

es6.ruanyifeng.com/#docs/let

3).Vue

vue-router

router.push()编程式相当于声明式

编程式导航,如果使用了path,params会被忽略,只能采用query,而如果要使用params,需要提供路由的name或者手写完整的带有参数的path。

router.replace不会像push一样,往history添加新的记录,而是替换掉当前的history记录。

相当于router.replace(...)

两种模式:hash和History模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化),可以在 window 对象上监听这个事件。

由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求

当你使用 history 模式时,URL 就像正常的 url,例如 yoursite.com/user/id,比较好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。****

Vue-loader

vue-loader 是一个 webpack 的 loader,可以将编写的 Vue 组件转换为 JavaScript 模块。

webpack

webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出它们的依赖关系,将它们打包为可部署的静态资源。

Sass

4)bootStrap

5)Jquery

6)UI框架,Element

VS code快捷键

1)格式化代码,快速整理代码格式

 在Windows系统:Shift键 + Alt键 + F键

· 在Mac系统:Shift键+ Option键 + F键

· 在Ubuntu系统:Ctrl键 + Shift键 + I键

1.router路由跳转的几种情况

this.$router.push()

跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面。

this.$router.replace()

同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

This.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

2.什么是async、await?

这是ES7里面的前端异步特性。

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么);

await得到Promise对象之后就等待Promise接下来的resolve或者reject。

async function testSync() {

     const response = await new Promise(resolve => {

         setTimeout(() => {

             resolve("async await test...");

          }, 1000);

     });

     console.log(response);

}

testSync();//async await test...

可以分两种异步或同步的操作,首先如果await是放在函数外面修饰函数的,那这些函数就是按照同步的方式执行的。

如果是放在函数里面修饰返回的值的时候,那就是采用异步的方式执行的。

串行:async function asyncAwaitFn(str) {

    return await new Promise((resolve, reject) => {

        setTimeout(() => {

            resolve(str)

        }, 1000);

    })

}

const serialFn = async () => { //串行执行

    console.time('serialFn')

    console.log(await asyncAwaitFn('string 1'));

    console.log(await asyncAwaitFn('string 2'));

    console.timeEnd('serialFn')

}

serialFn();

3.**Bootstrap栅栏布局里col-xs-、col-sm-、col-md-、col-lg-之间的区别及使用方法

关键字

1、col是column简写:列;

2、xs是maxsmall简写:超小, sm是small简写:小,  md是medium简写:中等, lg是large简写:大;

3、-* 表示占列数,即占每行row分12列栅格系统比;

4、.col-xs-* 超小屏幕如手机 (<768px)时使用;

     .col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;

     .col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;

     .col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

解释

1、栅格系统都会自动的把每行row分为12列, col-xs-、col-sm- 、col-md-和.col-lg- 后面跟的参数表示在当前的屏幕中的占列数。例如

 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列,也就是屏幕的一半(12/6列=2个div), .col-md-3 在中等屏幕中占3列也就是1/4(12/3列=4个div)。

2、反推,如果我们要在移动端并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在PC端上显示6个div(12/6个=每个占2列 ) ,则 col-md-2。

4.sass的学习

www.sass.hk

5.vue中的compute和watch的区别

www.cnblogs.com/gunelark/p/…

  • computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象。

watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

6.Promise.all 和Promise.race的理解和使用

www.jianshu.com/p/7e60fc1be…

7. vuex中mapState、mapGetters、mapActions辅助函数及Module的使用****