前言

上一篇我大致讲述了vue2.0文档中的一些基础内容，而本章我将稍微介绍一下上一篇提到的其他3个方面的内容。

正文

vue-router

• 路由嵌套

  最近选择了一个网易云音乐的app来模仿着练习，目前才开始不久~
  在刚开始时先把静态的主要几个页面搭建起来，在这过程中我发现单单一个主页面的路由显示区域貌似不太够用，因为有时需要在不改变大页面的情况下去改变当前页面其中的一部分区域，这时就需要用到路由嵌套了。大致有以下几个步骤：
  (1)在控制当前页面的组件内需要嵌入路由的位置添加router-view：

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" " tITle="" data-original-title="复制">

     <head-tab></head-tab>
     <router-view></router-view>
     <my-foot></my-foot>

  (2)新建组件，这是在嵌套的路由中显示的内容，然后导出；这些子页面的存放位置看个人喜好，不过最好还是新建一个与主组件同名的文件夹，把子组件都放进去。
  (3)在配置路由的js文件中找到主页面对应的对象，在对象内添加一个叫children的数组，数组内存放下一级的路由名字及控制的组件，这样当访问子路由的路径时不会渲染在大的router-view上，而只在对应页面的对应router-view内改变。

  @H_406_65@

   path: '/index',
   name: 'homePage',
   component: homePage,
   children:[
       {
           path:'/index/music',
           component:music
       },
       {
           path:'/index/social',
           component:social
       }
   ]

  关于子路由的命名，官方文档内是直接/name，我个人觉得最好是把它的上一级路由也写上更好，如/index/name。当然，还是看个人喜好~~

• 编程式导航
  在路由跳转上，有两种方式可以跳转：声明式导航与编程式导航。个人认为编程式导航比较简便~
  在js内可通过this.$route来控制路由，而属性值内写js的话使用$router来控制。这里需要介绍一下操作路由的几种方法：

  router.push('/index')   //像数组方法一样，将一个新的路由插入到路由对象的最后一个，也就是显示最新的路由
  router.push({name:'user',params:{userId:123}}) //带参路由，参数会加入到路由名后，/user/123
  router.push({path:'user',query:{username:'jack'}})  //带参路由，参数会像get请求拼接参数，/user?username=jack
  router.replace()  //与push方法类似，区别在于，它是用新的路由替换当前路由，如果需要返回上一页，只能返回上一页的上一页
  router.go()  //参数为整数，表示在访问历史记录中前进或者后退的步数，如-1:上一页，1:下一页

• 路由重定向
  当访问一些不同的路由的时候我们却想让它跳转到同一个页面，这时就要用到它了。
  在routes数组对象中添加对象，需要2个参数：path和redirect，如下：

  {path:'/',redirect: "/index"}
  
  

axios

如果想用axios的话，如果是在正常的htML文档内，可直接用script标签引入链接，如果是cmd内使用vue命令生成的项目可以在命令行内输入cnpm install axios，添加模块到项目内。
下面就讲讲基本的使用。

import axios From 'axios'  //首先从依赖文件内引入axios    
axios.get('/static/music.json')    //这是请求一个本地的json文件的例子
.then((data)=>{
   console.log(data)
   this.dataList=data.data.music   //成功后把数据存到vue对象的data里去 
})

不过在这里有遇到问题，我第一次写的是：

.then(function(data){
    this.dataList=data.data.music
    console.log(data)
    console.log(this)
})

如果我使用function的话this指针为空，如果使用es6的那种写法的话this指针能指向外部的vue对象，于是我就想data数据有了要不return出去吧，再用一个变量接收，但是打印出来之后：

Promise {<pending>}
__proto__
:
Promise
[[PromiseStatus]]
:
"resolved"
[[PromiseValue]]
:
Array(5)

是个这样的promise对象，我是百思不得其解，不知道如何获取里面的数据。
后来我查了下网上的es6箭头函数介绍，原来如此：

this指向
function传统定义的函数，this指向随着调用环境的改变而改变，而箭头 函数中的指向则是固定不变，一直指向定义环境的。

至于后面那个问题也得到了解释，promise对象也是es6里面的东西，它代表了异步执行可以得到的结果，里面存的是某个未来才会结束的事件，只是它是在未来才能得到。而外部得到的就是这么一个对象，虽然看着有数据但是并没有什么用，它无法被改变，无法被获取。
promise对象具有3种状态，pending(进行中),fulfilled(已成功)和rejected(已失败)。只有从pending状态变为fulfilled或者rejected，状态才会凝固，这时称为resolved(已定型),这时再对promise添加回调函数就能立即得到结果，而所谓回调函数就是then。promise实例都具有then方法和catch方法，这两个方法是定义在原型上的，使用then捕获成功后的结果，而使用catch捕获失败的结果。
更具体的内容可以到这看：http://es6.ruanyifeng.com/#do...

scss

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
如果你想使用scss，需要先做一些准备：
(1)sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby
(2)安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v
//如安装成功会打印
ruby 2.5.0p0 (2017-12-25 revision 61468) [x64-mingw32]

(3)如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。（使用淘宝的gem源https://ruby.taobao.org/）如下：

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** current SOURCES ***
https://ruby.taobao.org/

如果要在vue组件里的style内写scss需要声明：

<style lang="scss" scoped="scoped">

scoped是限制此页内的样式不会影响到其他页面的样式。
这时运行vue项目会发现缺少两个依赖：

这时到项目的目录下运行cmd,手动地安装这2个依赖项：

cnpm install sass-loader
cnpm install node-sass

完成之后，重新npm run dev项目，就能正常使用了。
相比普通的css，使用scss来书写能减少代码量，增强结构性，想想，把csS写的跟html结构代码似的有很强的结构性，这样一看就知道哪些代码控制哪个元素。比如：

.seArch-box{
    .top{
        width: 100%;
        height: 2.5rem;
        text-align: left;
        background-color: #C62f2F;
        .back{
            display: inline-block;
            transform: rotate(90deg);
            color: #fff;
            line-height: 2.5rem;
            margin-left: 0.7rem;
        }
    }
}

示例写的结构很简单，看起来和普通的css貌似没有太大区别，但是如果页面内容很多，css代码一长串时，当你想找跟某个元素相关的所有样式时，你会发现，太累了，眼花缭乱，自从我用了scss写样式之后老眼昏花啥的都没有出现过~~

• 变量定义与使用
  在scss中，是可以定义变量的。比如要在很多地方用到一个相同的颜色，这时定义一个颜色：

  @H_777_512@ $highlight-color:#f90; .txt{ color: $highlight-color; }

  这样是不是方便很多？只要记住想要的变量名，不用再去复制粘贴具体是什么样式了~

• 嵌套规则
  上面已经说过了~

• 父选择器标志符&
  在嵌套的样式规则中，可以用&符号来代表嵌套到当前层次的所有父选择器，可用于伪类选择器，如：

   article a{
       color: blue;
       &:hover{color: red;}
   }

• 群组选择器
  scss也能像css一样用群组选择器

• 子组合选择器和同层组合选择器

   >:离的最近的一代子元素
   +:同级最近的下一个兄弟
   ~:选择所有同层的元素
   均可应用到sass的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边
   article{
       ~ article{border-top:1px solid #ccc}
       > section{background:#eee}
       dl>{
           dt{color:#333;}
           dd{color: #555;}
       }
   }

• 属性嵌套

   nav{
       border:{
           style:solid;
           width: 1px;
           color: #ccc;
       }
   }

• 设置默认值

   //在某些值被重复设置时，可设置一个默认值，若有新的声明则用新的，若没有则使用默认值
   $fancybox-width:400px !default;
   .fancybox{
       width: $fancybox-width;
   }

• 嵌套导入

   //有一个叫_blue-theme.scss的局部文件，在导入时会直接嵌在导入的位置，还可省略下划线
   .blue-theme{@import "blue-theme"}

• 混合器mixin

   //若网站中有几处样式类似，可使用统一变量来处理。但若有大量复杂的代码时，可使用混合器
   //混合器以@mixin标识符定义，这个标志符给一大段样式赋予一个名字，就可以使用这个名字重复这段样式。
   @mixin rounded-corners{
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
   }
   //然后使用@include来引用,它会直接把内容嵌入相应的位置
   .notice{
       background-color: green;
       border:2px solid #00aa00;
       @include rounded-corners;
   }

  注意：若能为混合器内的样式取一个好的名字，那么往往能构建一个合适的混合器，若不能，也许这段样式不适合写成混合器。

   //混合器还可以传值，这样混合器生成的代码也不一定一样
   @mixin link-colors($normal,$hover,$visited){
       color: $normal;
       &:hover{color: $hover;}
       &:visited{color: $visited;}
   }
   a{
       @include link-colors(blue,yellow,red);
   }

• 继承样式

   //一个选择器可以继承另一个选择器的样式，可以精简代码
   .error{
       border: 1px solid red;
       background-color: #fdd;
   }
   .seriousError{
       @extend .error;
       border-width: 3px;
   }
   

心得体会

基础知识差不多也就这么多了，接下来就是不断的钻研。本文意在帮助和我一样的新手童鞋上路，高手请绕道o(╯□╰)o