初學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;
 }