重写cnodejs学习整理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重写cnodejs学习整理相关的知识,希望对你有一定的参考价值。

对练习过程中遇到的疑惑和问题,进行归纳和总结


vue 2.8.1


一、遇到问题

1.scss引入

  在最新的cli脚手架中,scss被默认处理,不需要专门在webpack.base.conf.js中对scss进行规则设置。

2.exports is not define

  在练习中,通过exports导出接口的时候,控制台报错exports is not define,此时可以尝试通过export XXX导出,或者通过npm安装babel-preset-es2015,在.babel文件中

"presets": [
    ["env", { "modules": false }],
    "es2015",
    "stage-2"
  ],

设置依赖,实现代码规范之间的转换。更多详见:https://cnodejs.org/topic/56460e0d89b4b49902e7fbd3

 

二、 知识点整理

1.vue-router

(1) v-link

v-link有三种用法:

//route.js
export default new Router({
    routes:[{
        path : ‘/home/:id‘,
        name : ‘detail‘,
        component : resolve => require([‘./components/home.vue‘],resolve)
    }]

//index.html
<!-- 字面量路径 -->
<a v-link="‘home‘">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: ‘home‘ }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: ‘detail‘, params: {id: ‘01‘} }">Home</a> 

v-link 会自动设置 <a> 的 href 属性,你无需使用href来处理浏览器的调整,原因如下:

  • 它在 HTML5 history 模式和 hash 模式下的工作方式相同,所以如果你决定改变模式,或者 IE9 浏览器退化为 hash 模式时,都不需要做任何改变。

  • 在 HTML5 history 模式下,v-link 会监听点击事件,防止浏览器尝试重新加载页面。

  • 在 HTML5 history 模式下使用 root 选项时,不需要在 v-link 的 URL 中包含 root 路径。

(2) 路由对象this.$route

在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。

路由对象暴露了以下属性:

    • $route.path 
      字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news" 。
    • $route.params 
      对象,包含路由中的动态片段和全匹配片段的键值对
    • $route.query 
      对象,包含路由中查询参数的键值对。例如,对于 /home/news/detail/01?favorite=yes ,会得到$route.query.favorite == ‘yes‘ 。
    • $route.router 
      路由规则所属的路由器(以及其所属的组件)。
    • $route.matched 
      数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
    • $route.name 
      当前路径的名字,如果没有使用具名路径,则名字为空。

$router.matched属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。

例如,/home/news/detail/:id这条路径,它包含3条匹配的路由:

  1. /home/news/detail/:id
  2. /home/news
  3. /home

详见:http://www.cnblogs.com/avon/p/5943008.html

(3) 切割流水线(钩子函数)

$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它。

全局钩子函数:beforeEach   afterEach

组件内钩子函数:beforeRouteEnter beforeRouteLeave  watch函数

 

以登录验证为例,使用全局钩子函数beforeEach(before each意思是在 每次每一个路由改变的时候都得执行一遍)

技术分享
 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3  
 4 Vue.use(Router)
 5  
 6 const router = new Router({
 7  routes: [
 8  {
 9   path: ‘/‘,
10   /*
11   * 按需加载 
12   */
13   component: (resolve) => {
14   require([‘../components/Home‘], resolve)
15   }
16  }, {
17   path: ‘/record‘,
18   name: ‘record‘,
19   component: (resolve) => {
20   require([‘../components/Record‘], resolve)
21   }
22  }, {
23   path: ‘/Register‘,
24   name: ‘Register‘,
25   component: (resolve) => {
26   require([‘../components/Register‘], resolve)
27   }
28  }, {
29   path: ‘/Luck‘,
30   name: ‘Luck‘, 
31   // 需要登录才能进入的页面可以增加一个meta属性
32   meta: { 
33   requireAuth: true
34   },
35   component: (resolve) => {
36   require([‘../components/luck28/Luck‘], resolve)
37   }
38  }
39  ]
40 })
41 // 判断是否需要登录权限 以及是否登录
42 router.beforeEach((to, from, next) => {
43  if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
44  if (localStorage.getItem(‘username‘)) {// 判断是否登录
45   next()
46  } else {// 没登录则跳转到登录界面
47   next({
48   path: ‘/Register‘,
49   query: {redirect: to.fullPath}
50   })
51  }
52  } else {
53  next()
54  }
55 })
56  
57 export default router
58 
59 //res => res.meta.requireAuth
60 //function(res){
61 //    return res.meta.requireAuth;
62 //}
对是否登录验证

 它的三个参数:

  • to: (Route路由对象)  即将要进入的目标 路由对象       to对象下面的属性: path   params  query   hash   fullPath    matched   name  

  • from: (Route路由对象)  当前导航正要离开的路由

  • next: (Function函数)   一定要调用该方法来 resolve 这个钩子。  调用方法:next(参数或者空)  必须调用

    next(无参数的时候):  进行管道中的下一个钩子,如果走到最后一个钩子函数,那么  导航的状态就是 confirmed (确认的)

    next(‘/‘) 或者 next({ path: ‘/‘ })跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

 

全局钩子函数 afterEach:after 钩子没有 next 方法,不能改变导航,代表已经确定好了导航怎么去执行后,附带的一个执行钩子函数

组件内钩子函数 beforeRouteEnter beforeRouteLeave  watch,以项目https://github.com/shinygang/Vue-cnodejs中组件list.vue为例

技术分享
 1 ...
 2 beforeRouteLeave(to,from,next){
 3             //如果跳转到详情页,记录重要数据
 4             //方便从详情页返回到该页面的时候继续加载之前位置的数据
 5             if(to.name === ‘topic‘){
 6                 //当前滚动条位置
 7                 window.window.sessionStorage.scrollTop = $(window).scrollTop();
 8                 //当前页面主题数据
 9                 window.window.sessionStorage.topics = JSON.stringify(this.topics);
10                 //查询参数
11                 window.window.sessionStorage.searchKey = JSON.stringify(this.searchKey);
12                 //当前tab   from.query.tab有值则赋值否则赋值‘all‘
13                 window.window.sessionStorage.tab = from.query.tab || ‘all‘
14             }
15             $(window).off(‘scroll‘);
16             next();
17         },
18         beforeRouteEnter(to,from,next){
19             if(from.name !== ‘topic‘){
20                 //页面切换移除之前记录的数据集
21                 window.window.sessionStorage.removeItem(‘topics‘);
22                 window.window.sessionStorage.removeItem(‘searchKey‘);
23                 window.window.sessionStorage.removeItem(‘tab‘);
24             }
25             next();
26         },
27 ...
28 watch : {
29             //切换页面
30             ‘$route‘ (to,from){
31                 //如果是当前页面切换分类的情况
32                 if(to.query && to.query.tab){
33                     this.searchKey.tab = to.query.tab;
34                     this.topics = [];
35                     this.index = {};
36                 }
37                 this.searchKey.page = 1;
38                 this.getTopics();
39                 //隐藏导航栏
40                 this.$refs.head.show = false;
41             }
42         },
43 ...
View Code

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

const User = {
  template: ‘...‘,
  1、watch: {
    ‘$route‘ (to, from) {
      // 对路由变化作出响应...
    }
  }
 2、watch: { 
   ‘$route‘: ‘fetchData‘    // 如果路由有变化,会再次执行fetchData方法
  },

详见:http://www.cnblogs.com/faith3/p/6224235.html

2. vuex (详见:http://blog.csdn.net/sinat_29412671/article/details/53635897

(1) mapGetters辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性:

import { mapGetters } from ‘vuex‘

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      ‘doneTodosCount‘,
      ‘anotherGetter‘,
 // 映射 this.doneCount 为 store.getters.doneTodosCount
      doneCount: ‘doneTodosCount‘
      // ...
    ])
  }
}

3. vue自定义属性或方法

//demo.js
import Vue from ‘vue‘

export default{
    install(){
        Vue.prototype.$myName = "hello";
        Vue.prototype.checkUserName = (value) => {
            if(/\\w{6,20}/.test(value)){
                return true;
            }else{
                return false;
            }
        }
  }  
}

//main.js
import demo from ‘demo.js‘

Vue.use(demo);

//index.js
mounted(){
            alert(this.$myName);
            alert(this.checkUserName(‘hello‘));
}

详见:http://blog.csdn.net/github_26672553/article/details/53046923







以上是关于重写cnodejs学习整理的主要内容,如果未能解决你的问题,请参考以下文章

IOS开发-OC学习-常用功能代码片段整理

VS2015 代码片段整理

htaccess正则规则学习笔记整理

小程序各种功能代码片段整理---持续更新

常用python日期日志获取内容循环的代码片段

Node.JS自动化测试在CNode社区中的应用 -- CnodeJS线下沙龙活动