vue入門文章

stray發表於2018-10-29

本來想自己寫一篇關於vue入門的文章。但是看到連結的文章後，覺得寫得太詳細了，實在有儲存下來的必要。後面可能在這篇文章基礎上，有所內容的增加。

CSS前處理器

定義了一種新的專門的程式語言，編譯後成正常的CSS檔案。為CSS增加一些程式設計的特性，無需考慮瀏覽器的相容問題，讓CSS更加簡潔，適應性更強，可讀性更佳，更易於程式碼的維護等諸多好處。
CSS前處理器語言：scss（sass）、LESS等；
2.Sass和SCSS的區別
副檔名不同：“.sass”和“.scss”；
Sass是以嚴格縮排式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。
3.Sass安裝（Windows版）
先安裝ruby：Ruby 的官網（http://rubyinstaller.org/down…）下載對應需要的 Ruby 版本
Paste_Image.png
安裝sass：
方法一（通過命令安裝sass）：開啟命令終端，輸入：gem install sass
方法二（本地安裝sass）：從http://rubygems.org/gems/sass 下載sass安裝包，然後在終端輸入: “gem install <把下載的安裝包拖到這裡>” 然後直接額回車即可安裝成功。
4.scss語法格式
css程式碼：

body {
        font: 100% Helvetica, sans-serif;
        color: #333;
    }

使用scss程式碼：

$font-stack: Helvetica, sans-serif;
    $primary-color: #333;
    body {
        font: 100% $font-stack;
        color: $primary-color;
    }

tip:如果使用sass舊語法（sass語法），檔案字尾名應為“.sass”；如果使用sass新語法（scss語法），檔案字尾名應為”.scss“語法，否則編譯時編譯不出來。

sass編譯

5.1 sass編譯的方法：
命令編譯
GUI工具編譯
自動化編譯
5.1.1 sass命令編譯（在命令終端輸入sass指令來編譯sass，最直接，最簡單）
單檔案編譯：

sass <要編譯的Sass檔案路徑>/style.scss:<要輸出CSS檔案路徑>/style.css

多檔案編譯：

sass sass/:css/

上面的命令表示將專案中“sass”資料夾中所有“.scss”(“.sass”)檔案編譯成“.css”檔案，並且將這些 CSS 檔案都放在專案中“css”資料夾中。

缺點及解決方法：
缺點：每次儲存scss檔案後都要重新編譯太麻煩；
解決方法：開啟“watch”功能：

sass --watch <要編譯的Sass檔案路徑>/style.scss:<要輸出CSS檔案路徑>/style.css

tip:檔案路徑不要帶中文，如果有中文，watch功能無法正常使用。
6.sass巢狀輸出方式nested
只要在編譯的時候帶上引數“ –style nested”:

sass --watch test.scss:test.css --style nested

7.sass展開輸出方式expanded
在編譯的時候帶上引數“ –style expanded”:

sass --watch test.scss:test.css --style expanded

8.sass展開輸出方式compact

在編譯的時候帶上引數“ –style compact”:

sass --watch test.scss:test.css --style compact

9.sass展開輸出方式compressed
在編譯的時候帶上引數“ –style compressed”:

sass --watch test.scss:test.css --style compressed

10.sass變數宣告
$+變數名+：+變數值；

$width:200px;
11.普通變數和預設變數
普通變數宣告後可以在全域性範圍內使用；
預設變數僅需在值後面加上!default 即可；
預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式是在預設變數之前重新宣告下變數即可。預設變數的價值在進行元件化開發的時候會非常有用。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body {
       line-height: $baseLineHeight;
}

編譯後的CSS程式碼：

body {
        line-height:2;
}

12.區域性變數和全域性變數
區域性變數：在元素裡面宣告的變數；
全域性變數：在元素外面定義的變數；
全域性變數的影子：和全域性變數名字相同的區域性變數叫做全域性變數的影子。

$color:green;//全域性變數
$width:200px;//全域性變數
$height:200px;//全域性變數
body {
    background-color:$color;//呼叫全域性變數
}
div {
    $color:yellow;//定義區域性變數，全域性變數$color的影子
    .div {
    background-color:$color;//呼叫區域性變數
    width:$width;//呼叫全域性變數
    height:$height;//呼叫全域性變數
    }
}

13.sass巢狀
13.1 選擇器巢狀

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">page</a>
    </nav>
</header>
css:

    nav a {
        color:red;
    }
    header nav a {
        color:green;
    }
scss:

nav {
  a {
    color: red;
    
    header & {
      color:green;
    }
  }  
}

13.2 屬性巢狀(有相同的屬性字首)

css:

.box {
     font-size: 12px;
     font-weight: bold;
}
scss:

.box {
  font: {
   size: 12px;
   weight: bold;
  }  
}

13.3 偽類巢狀

scss:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}
css:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

sass混合巨集

14.1 宣告混合巨集

@mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

@mixin :宣告混合巨集的關鍵詞；
border-radius:混合巨集的名稱；
大括號內：複用的樣式程式碼；

14.2 呼叫混合巨集

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}//宣告混合巨集border-radius
button {
    @include border-radius;
}//呼叫混合巨集border-radius

編譯為CSS：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

14.3 混合巨集的引數
不帶任何值的引數

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}//宣告一個帶有引數$radius的混合巨集
.box {
  @include border-radius(3px);//呼叫混合巨集並給混合巨集傳引數“3px”
}
傳一個帶值引數（傳入一個預設值）
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}//宣告一個傳入了預設引數值的混合巨集
.btn {
  @include border-radius;//使用預設引數值的混合巨集
}
.box { 
  @include border-radius(50%);//可以自己傳入引數值
}

編譯出來的CSS：

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

傳多個引數值

@mixin size($width,$height){
  width: $width;
  height: $height;
}
.box-center {
  @include size(500px,300px);
}

編譯出來的css：

.box-center {
  width: 500px;
  height: 300px;
}

15.sass 繼承
scss：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

編譯出來後：

.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
 }
.btn-primary {
  background-color: #f36;
  color: #fff; 
}

在sass中的繼承，可以繼承類樣式塊中所有樣式程式碼，而且編譯出來的css會將選擇器合併在一起，形成組合選擇器。

16.sass佔位符%
用佔位符宣告的程式碼，如果不被@extend呼叫就不會被編譯。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  color:red;
}

編譯後：

.btn {
    color:red;
}//%佔位符宣告的程式碼沒有被編譯產生css程式碼

使用@extend呼叫：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;//使用@extend呼叫佔位符程式碼
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

編譯後的css程式碼：

.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}

通過@extend呼叫的佔位符，編譯出來的程式碼會將相同的程式碼合併在一起，程式碼變得十分簡潔。

17.sass插值

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {//對每個在$properties中的$prop,即$properties中的margin、padding
        #{$prop}-#{$side}: $value;//$prop連線引數$side，值為引數$value
    }
}
.login-box {
    @include set-value(top, 14px);//呼叫混合巨集
}

編譯出來的css：

.login-box {
  margin-top: 14px;
  padding-top: 14px; 
}

不可以：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

也不可以：

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

可以在使用@extend時使用插值：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

sass 註釋
/註釋內容/ :會在編譯出來的css檔案中顯示
//註釋內容：不會在編譯出來的css檔案中顯示
//定義一個佔位符
%mt5 {
margin-top: 5px;
}
/呼叫一個佔位符/
.box {
@extend %mt5;
}

編譯出來的css：

.box {
  margin-top: 5px;
}

/呼叫一個佔位符/

sass運算

19.1 sass 加法/減法
變數或屬性中都可以做加法/減法運算

.box {
  width: 20px + 8in;
  height:20px - 5px;
}

編譯出來的css：

.box {
  width: 788px;
  height:25px;
}

不用型別的單位做加法/減法會報錯：

.box {
  width: 20px + 1em;//不同型別單位不能做加法
}

19.2 sass 乘法
這樣子會有問題：

.box {
  width:10px * 2px;  
}

應該這樣子：

.box {
  width: 10px * 2;
}

編譯出來的css：

.box {
  width: 20px;
}

同加法減法一樣，不同型別單位做乘法也會報錯。
19.3 sass除法
如果除式中沒有變數或者不是在一個數學表示式中（有加法減法等），就要將除式運算用小括號括起來，否則“/”不會被當做除號運算。

p {
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 1000px;
  width: $width/2;            // 使用了變數，是除法運算
  width: round(1.5)/2;        // 使用了函式，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

編譯出來的css：

p {
  font: 10px/8px;//這種是無意義的css
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

除法中相同單位相除不會報錯，會產生一個無單位的值：

.box {
  width: (1000px / 100px);
}

編譯出來的css：

.box {
  width: 10;
}

19.4 sass 變數計算

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
  width: $content-width + $sidebar-width + $gutter;
}

編譯出來的css：

.container {
  width: 960px;
}

19.5 sass數字運算

.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

編譯出來的css：

.box {
  width: 60px;
}

19.6 sass顏色運算
所有算術運算都支援顏色值，並且是分段計算的。

p {
  color: #010203 + #040506;
}

計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，並且被合成為：

p {
  color: #050709;
}

數字和顏色一起運算：

p {
  color: #010203 * 2;
}

計算公式為 01 2 = 02、02 2 = 04 和 03 * 2 = 06，並且被合成為：

p {
  color: #020406;
}

19.7 sass 字元運算
用“+”對字串進行連線：

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

編譯出來的css：

.box:before {
  content: " Hello Sass! ";
}

可以使用“+”直接連線字元：

div {
  cursor: e + -resize;
}

編譯出來的css：

div {
  cursor: e-resize;
}

有引號的字串和沒有引號的字串相加，看哪個在“+”號的左邊，如果有引號的在左邊，結果為有引號的；如果沒有引號的在左邊，結果為沒有引號的：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

編譯出來的css：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

作者：恰皮
連結：https://www.jianshu.com/p/fa3…
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

TensorFlow入門文章
2024-06-01
VUE入門
2020-06-18
Vue
vue教程-vue入門
2019-03-05
Vue
Vue入門——Vue的核心
2019-02-16
Vue
Vue 入門指南
2018-07-11
Vue
vue入門教程
2019-04-01
Vue
Vue快速入門
2022-04-10
Vue
Vue入門指南(快速上手vue)
2019-03-30
Vue
Flink從入門到精通系列文章
2019-03-10
一篇文章入門Netty
2018-04-25
Netty
vue入門筆記
2018-10-17
Vue筆記
parcel+vue入門
2018-11-09
Vue
vue 入門總結
2018-11-21
Vue
Vue 3入門指南
2024-05-23
Vue
Vue入門淺析
2023-05-15
Vue
前端-vue入門案例
2020-10-30
前端Vue
Vue快速入門（二）
2022-04-13
Vue
Vue入門學習
2021-04-27
Vue
Vue簡單入門
2021-02-05
Vue
WordPress入門06-WordPress釋出新文章和管理文章
2018-07-08
Vue入門（三）Vue生命週期
2024-09-01
Vue
vue 快速入門系列 —— vue-router
2021-10-09
Vue
vue 快速入門系列 —— vue loader 上
2021-07-01
Vue
vue 快速入門系列 —— vue loader 下
2021-07-05
Vue
Vue-vue基礎快速入門
2020-12-11
Vue
Vue入門到關門之元件
2024-05-02
Vue元件
Vue入門到關門之Vue3學習
2024-05-09
Vue
Vue入門到關門之Vue介紹與使用
2024-04-30
Vue
Vue-cli 3.0入門
2018-07-31
Vue
Vue入門到跑路---Vuex
2020-11-03
Vue
Vue.js快速入門
2020-11-04
Vue.js
Vue入門記錄（一）
2024-07-26
Vue
vue 快速入門系列 —— 模板
2022-01-12
Vue
VUE_入門講義
2021-01-05
Vue
vue 快速入門系列 —— vue-cli 下
2021-08-17
Vue
vue 快速入門系列 —— vue-cli 上
2021-08-11
Vue
Vue入門到關門之前端引入
2024-04-30
Vue前端
Vue入門到關門之Vue3專案建立
2024-05-09
Vue

vue入門文章

相關文章