初学vue.js记录（二）

时间 2019-12-07

标签初学 vue.js vue 记录栏目 JavaScript 繁體版

原文原文链接

前言

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

正文

vue-router

路由嵌套html

最近选择了一个网易云音乐的app来模仿着练习，目前才开始不久~
在刚开始时先把静态的主要几个页面搭建起来，在这过程当中我发现单单一个主页面的路由显示区域貌似不太够用，由于有时须要在不改变大页面的状况下去改变当前页面其中的一部分区域，这时就须要用到路由嵌套了。大体有如下几个步骤：
(1)在控制当前页面的组件内须要嵌入路由的位置添加router-view：vue
```
<head-tab></head-tab>
   <router-view></router-view>
   <my-foot></my-foot>
```
(2)新建组件，这是在嵌套的路由中显示的内容，而后导出；这些子页面的存放位置看我的喜爱，不过最好仍是新建一个与主组件同名的文件夹，把子组件都放进去。
(3)在配置路由的js文件中找到主页面对应的对象，在对象内添加一个叫children的数组，数组内存放下一级的路由名字及控制的组件，这样当访问子路由的路径时不会渲染在大的router-view上，而只在对应页面的对应router-view内改变。node
```
path: '/index',
 name: 'homePage',
 component: homePage,
 children:[
     {
         path:'/index/music',
         component:music
     },
     {
         path:'/index/social',
         component:social
     }
 ]
```
关于子路由的命名，官方文档内是直接/name，我我的以为最好是把它的上一级路由也写上更好，如/index/name。固然，仍是看我的喜爱~~ios

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

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，以下：web
```
{path:'/',redirect: "/index"}
```

axios

若是想用axios的话，若是是在正常的html文档内，可直接用script标签引入连接，若是是cmd内使用vue命令生成的项目能够在命令行内输入cnpm install axios，添加模块到项目内。
下面就讲讲基本的使用。vue-router

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

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

.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中，是能够定义变量的。好比要在不少地方用到一个相同的颜色，这时定义一个颜色：
```
$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