近萬字Vue詳細基礎教程

目錄

1.1、概念(基于vue2)

1.2、vue/cli腳手架

1.2.1 創建專案啟動服務

1.2.2 專案目錄講解（可略過）

1.2.3 自定義配置

1.2.4 eslint

1.2.5 單vue檔案

1.3、插值運算式

1.4 、MVVM設計模式

1.5、Vue指令（重點，拿小本本記著）

1.5.1 概念

1.5.2 v-bind

1.5.3 v-on 系結事件

1.5.4 v-on事件修飾符

1.5.5 v-on按鍵修飾符

1.5.6 v-model

1.5.7 v-text和v-html

1.5.8 v-show和v-if

1.5.9 v-for

1.1、概念(基于vue2)

vue：vue是一個JavaScript的漸進式框架（漸進式是逐漸使用，集成更多的功能）

那庫跟框架又有啥區別呢？

庫是方法的集合，而框架是一套擁有自己的規則的語法

1.2、vue/cli腳手架

為啥要這個腳手架呢？

腳手架顧名思義就猶如蓋房子的腳手架，干啥的嘞，方便搭結構啊，webpack自己配置環境很麻煩, 下載@vue/cli包,用vue命令創建腳手架專案，

@vue/cli是Vue官方提供的一個全域模塊包(得到vue命令), 此包用于創建腳手架專案腳手架是為了保證各施工程序順利進行而搭設的作業平臺

好處：

• 開箱即用，開袋即食
• 0配置webpack打包工具（babel支持、css和less支持、開發服務器支持）

全域安裝命令：

• yarn global add @vue/cli
• npm install -g @vue/cli

安裝有時候有點慢，推薦用鏡像，快下完卡了那就真卡了，重下吧！！！

1.2.1 創建專案啟動服務

注意：專案名不能帶大寫字母，中文和特殊符號

創建vue專案步驟：

1、創建專案：vue create vuecli-demo（終端運行）

vue和create是命令, vuecli-demo是檔案夾名vue create vue-demo

2、選擇模板：

• 上下箭頭控制進行選擇vue版本，弄錯了 ctrl+c 重來
• 選擇用什么方式下載腳手架專案所有的依賴包（有人下載了其他終端，這里需要選擇）

3、回車等待生成專案檔案夾+檔案+下載必須的第三方包

4、進入腳手架專案下，啟動內置的熱更新本地服務器

1. cd vuecil-demo（你在終端創建好了也會有提示的）
2. npm run serve或者yarn serve

   ---

   

   上圖一是選擇版本，圖二是選擇終端 ；

熱更新：簡單理解就是實時加載，作業區代碼發生改變，服務器重新渲染頁面

5、終端熱更新本地服務器成功圖片

這邊埠號是8888，默認埠號是8080，可以更改，

1.2.2 專案目錄講解（可略過）

 vuecil-demo        // 專案目錄
    ├── node_modules // 專案依賴的第三方包
    ├── public       // 靜態檔案目錄
      ├── favicon.ico// 瀏覽器小圖示
      └── index.html // 單頁面的html檔案(網頁瀏覽的是它)
    ├── src          // 業務檔案夾
      ├── assets     // 靜態資源
        └── logo.png // vue的logo圖片
      ├── components // 組件目錄
        └── HelloWorld.vue // 歡迎頁面vue代碼檔案 
      ├── App.vue    // 整個應用的根組件
      └── main.js    // 入口js檔案
    ├── .gitignore   // git提交忽略配置
    ├── babel.config.js  // babel配置
    ├── package.json  // 依賴包串列
    ├── README.md    // 專案說明
	└── yarn.lock    // 專案包版本鎖定和快取地址

重要的檔案：

• node_modules下都是下載的第三方包
• public/index.html – 瀏覽器運行的網頁
• src/main.js – webpack打包的入口檔案
• src/App.vue – vue專案入口頁面
• package.json – 依賴包串列檔案

專案框架運行圖解

1.2.3 自定義配置

src并列處新建vue.config.js

/* 覆寫webpack的配置 */
module.exports = {
  devServer: { // 自定義服務配置
    open: true, // 自動打開瀏覽器
    port: 3000  //埠號（可改）
  }
}

1.2.4 eslint

eslint它是一個代碼檢查工具（建議新手前期還是關閉這東西，不然會一堆報錯，為什么呢，你代碼沒寫錯，它覺得你沒按照它的規范，哎就是錯了）

關閉eslint（可選，個人需求）

/* 覆寫webpack的配置 */
module.exports = {
  devServer: { // 自定義服務配置
    open: true, // 自動打開瀏覽器
    port: 3000  //埠號（可改）
  },
  lintOnSave:false//關閉exlint檢查
}

1.2.5 單vue檔案

單vue檔案好處, 獨立作用域互不影響

<!-- template必須, 只能有一個根標簽, 影響渲染到頁面的標簽結構 -->
<template>
  <div>歡迎使用vue</div>  <!--其它標簽只能放入div中-->
</template>

<!-- js相關 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 當前組件的style樣式, 設定scoped, 可以保證樣式只對當前頁面有效 -->
<style scoped>
</style>

vue檔案配合webpack, 把他們打包起來插入到index.html，然后在瀏覽器運行（用的時候記得清下不要的代碼，也就是vue宣傳代碼等）

1.3、插值運算式

在dom標簽中, 直接插入內容，又叫宣告式渲染文本插值，

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 17 ? '成年' : '未成年' }}</h3> //不能用if陳述句，{{}}這里面只能放運算式
  </div>
</template>

<script>
export default {
  data() { // 函式，格式固定, 定義vue資料之處
    return {  // 需要回傳一個物件，key相當于變數名
      msg: "張三簡介",
      obj: {
        name: "小三三",
        age: 3
      }
    }
  }
}
</script>
<style></style>

注意:dom中插值運算式賦值, vue的變數必須在data里宣告（這里的data是函式不是物件，回傳的是物件）

1.4 、MVVM設計模式

注意：用資料驅動視圖改變, 操作dom的事,在vue原始碼內干了

好處：大大減少了DOM操作, 提高開發效率

MVVM，一種軟體架構模式，決定了寫代碼的思想和層次

• M： model資料模型 (data里定義)
• V： view視圖 （html頁面）
• VM： ViewModel視圖模型 (vue.js原始碼)

MVVM通過資料雙向系結讓資料自動地雙向同步 不再需要操作DOM

• V（修改視圖） -> M（資料自動同步）
• M（修改資料） -> V（視圖自動同步）

注意：

1. 在vue中，不推薦直接手動操作DOM！！！
2. 在vue中，通過資料驅動視圖，不要在想著怎么操作DOM，而是想著如何操作資料！！(思想得轉變)

1.5、Vue指令（重點，拿小本本記著）

1.5.1 概念

給標簽屬性設定vue變數的值實質上就是特殊的 html 標簽屬性, 特點: v- 開頭，

總結：把vue變數的值, 賦予給dom屬性上, 影響標簽顯示效果，

注意：事件里面的this代表export default后面的組件物件(下屬有data里return出來的屬性)

1.5.2 v-bind

語法：v-bind:屬性名="vue變數"

簡寫：:屬性名="vue變數"

<!-- vue指令-v-bind屬性動態賦值 -->

<a v-bind:href="url">我是a標簽</a>
<!--或-->
<img :src="imgSrc">

<template>
  <div>
    <a v-bind:href="hrefUrl">百度</a>
    <img :src="imgUrl">
  </div>
</template>

<script>

export default {
//data后面是函式不是物件
  data(){
    return {
      hrefUrl:'http://www.baidu.com',
      imgUrl:'https://webpack.docschina.org/site-logo.1fcab817090e78435061.svg'
    }
  }
}
</script>

<style>

</style>

1.5.3 v-on 系結事件

語法：

1. v-on:事件名="要執行的少量代碼"
2. v-on:事件名="methods中的函式"
3. v-on:事件名="methods中的函式(實參)"

簡寫：@事件名="methods中的函式"

<template>
  <div>
      <p>商品數量：{{count}}</p>
      <button v-on:click="count=count+1">增加1</button>
      <button v-on:click="addFn">增加1</button>
      <button v-on:click="se_addFn(5)">增加5</button>
      <button @click="count=0">清零</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            count:1
        }
    },
    methods: {    //methods與data并列
        addFn(){
            this.count++;
        },
        se_addFn(number){
            this.count += number; 
        }
    },
}
</script>

<style>

</style>

常用@事件名, 給dom標簽系結事件

事件物件：vue事件處理函式中, 拿到事件物件

無傳參, 通過形參直接接收傳參, 通過$event指代事件物件傳給事件處理函式

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <!--如果傳入了其他形參，那么獲取事件物件的形參必須是$event-->
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

在這悄咪咪告訴你們，其實是有簡寫的，哈哈哈哈！！！

1.5.4 v-on事件修飾符

在事件后面.修飾符名 ： 修飾符給事件擴展額外功能

語法：@事件名.修飾符="methods里函式"

修飾符類別：

1. .stop - 阻止事件冒泡
2. .prevent - 阻止默認行為
3. .once - 程式運行期間, 只觸發一次事件處理函式

<template>
  <div @click="fatherFn">
    <!-- vue對事件進行了修飾符設定, 在事件后面.修飾符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默認行為</a>
    <button @click.once="btn">.once程式運行期間, 只觸發一次事件處理函式</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被觸發");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

1.5.5 v-on按鍵修飾符

給鍵盤事件, 添加修飾符, 增強能力

語法：（不是只有下面這些）

1. @keyup.enter - 監測回車按鍵
2. @keyup.esc - 監測回傳按鍵

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回車按鍵了");
   },
   escFn(){
     console.log("esc按鍵了");
   }
 }
}
</script>

內置：

• .enter
• .tab
• .delete(捕獲洗掉和退格鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

有些按鍵（.esc以及所有方向鍵）在IE9有不同的key值，想支持IE9，這些內置的別名是首選

你還可以通過全域config.keyCodes物件自定義修飾符別名：

Vue.config.keyCodes.f1 = 112

新增系統修飾鍵：

• .ctrl
• .alt
• .shift
• .meta

太多了就不一一列舉了，不知道找度娘吧，哈哈哈哈！！！！

1.5.6 v-model

把value屬性和vue資料變數, 雙向系結到一起

• 資料變化 -> 視圖自動同步
• 視圖變化 -> 資料自動同步

語法：v-model="vue資料變數"

有修飾符語法：v-model.修飾符="vue資料變數"

• .number 以parseFloat轉成數字型別
• .trim 去除首尾空白字符
• .lazy 在change時觸發而非inupt時

<template>
  <div>
    <input type="text" placeholder="用戶名" value="" v-model.trim="user" />
    <input type="password" placeholder="密碼" value="" v-model.number.trim="password" />
    <hr>
    <textarea name=""  cols="30" rows="10" v-model.lazy="motto"></textarea>
  </div>
</template>

<script>
export default {
    data() {
        return {
            user:'',
            password:'',
            motto:""
        }
    },
};
</script>

<style>
</style>

1.5.7 v-text和v-html

語法：

• v-text="vue資料變數"
• v-html="vue資料變數"

<template>
  <div>
      <p v-text="str"></p>
      <p v-html="str"></p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            str:"<span>文本型別</span>"
        }
    },
}
</script>

<style>

</style>

運行結果如下：

1.5.8 v-show和v-if

語法：

• v-show="vue變數"
• v-if="vue變數"

原理（區別）：

• v-show 用的display:none隱藏 (頻繁切換使用)
• v-if 直接從DOM樹上移除

<template>
  <div>
      <p v-show="isOk1">沖沖沖</p>
      <p v-if="isOk2">沖沖沖</p>
      <div>
          <p v-if="age>18">ok</p>
          <p v-else>no</p>
      </div>
      
  </div>
</template>

<script>
export default {
    data() {
        return {
            isOk1:false,
            isOk2:false,
            age:19,
        }
    },
}
</script>

<style>

</style>

v-else使用：v-if判斷不通過就執行v-else

1.5.9 v-for

語法：

• v-for="(值, 索引) in 目標結構"
• v-for="值 in 目標結構"

<template>
  <div>
    <li v-for="(value, index) in arr" :key="index">
      {{ value }}-------{{ index }}
    </li>
    <hr />
    <li v-for="(value, index) in tObj" :key="index">
      {{ index }}------{{ value }}
    </li>
    <hr />
    <li v-for="obj in stuArr" :key="obj.id">
      <span>{{ obj.name }}</span>
      <span>{{ obj.sex }}</span>
      <span>{{ obj.hobby }}</span>
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小歡歡", "大黃"],
      stuArr: [
        {
          id: 1001,
          name: "孫悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "豬八戒",
          sex: "男",
          hobby: "背媳婦",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

<style></style>

v-for有個好玩的，有些會使頁面更新，有些不會：

• 陣列變更方法就會導致v-for更新，并且頁面更新；
• 陣列非變更方法，回傳新陣列，就不會導致v-for更新，可采用覆寫陣列或this.$set()

變更的陣列方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

非變更方法：

• slice()
• filter()
• concat()

基本指令已經差不多啦，后期繼續更新，拜拜咯！！！