vue基本指令與腳手架基本配置

25氪發表於2021-10-20
Vue

腳手架(@vue/cli)建立專案啟動服務

1、建立專案
    vue create 專案名字
2、啟動專案

進入專案根目錄，執行以下命令

	yarn serve
3、腳手架目錄程式碼分析
 ├── 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  # 依賴包列表
 |—— vue.config.js # 覆蓋 webpack 的配置,檔案自己新增
 ├── README.md    # 專案說明
 └── yarn.lock    # 專案包版本鎖定和快取地址
4、主要檔案及含義
node_modules下都是下載的第三方包
public/index.html – 瀏覽器執行的網頁
src/main.js – webpack打包的入口檔案
src/App.vue – vue專案入口頁面
package.json – 依賴包列表檔案
vue.config.js # 覆蓋 webpack 的配置,檔案自己新增
5、腳手架自定義配置
  • src 並列新建 vue.config.js
/* 覆蓋webpack的配置 */
module.exports = {
devServer: { // 自定義服務配置
 open: true, // 自動開啟瀏覽器
 port: 3000
}
}
6、關閉程式碼檢查工具
module.exports = {
    // ...其他配置
    lintOnSave: false
}
7、打包壓縮配置
 module.exports = {
    // ...其他配置
    mode: 'development' // 開發環境, 不壓縮, 不混淆 打包速度非常快,不設定預設壓縮
}

Vue 指令

1、插值表示式

語法：{{ 表示式 }}

    <h1>{{ msg }}</h1>
2. v-bind 屬性動態賦值

語法：v-bind: 屬性名 = '變數'
簡寫：:屬性名 = 'vue 變數'

<!-- vue指令-v-bind屬性動態賦值 -->
<a v-bind:href="url">我是a標籤</a>
<img :src="imgSrc">
3. v-on 事件指令

語法：v-on: 事件名 = '少量程式碼/函式/函式(實參)'
簡寫：@事件名 = '少量程式碼/函式/函式(實參)'

<button v-on:click="count = count + 1">增加1</button>
<button @click="addFn">增加1個</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
4、 v-on 事件物件

無傳參：通過形參直接接收
有傳參：通過固定值 $event 指代事件物件傳給事件處理函式

<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>

 two(num, e){  // num = 10 ; e = 事件物件 a
   e.preventDefault()
 }
5、 v-on 修飾符

語法：@事件名.修飾符 = 'methods 裡的函式'

.stop - 阻止自身而引起事件冒泡
.prevent - 阻止預設行為
.once - 程式執行期間, 只觸發一次事件處理函式
.capture - 有3個div事件冒泡會3-2-1，如果給div2加上關鍵字順序為2-3-1
.self 忽略其他元素冒泡或者捕獲事件，只侷限於自身
-------------------------------------
<button @click.stop="btn">.stop阻止事件冒泡</button>  
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止預設行為</a> 
 <button @click.once="btn">.once程式執行期間, 只觸發一次事件處理函式</button>
6、 v-on 按鍵修飾符·

語法：@keyup.按鍵名字 /按鍵數字編碼

      <input type="text" @keydown.enter="enterFn"> // 按下了Enter鍵

更多按鍵參考 [vue 官網](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81)
###### 7、系統修飾符

使用以下修飾符，對應按鍵處於按下狀態才會觸發滑鼠或者鍵盤監聽

修飾符：.ctrl .alt .shift .meta

<button @click.shift='btnf'></button>  // 只有當按下 shift 鍵才可以觸發點選事件
8、v-model 表單指令

雙向資料繫結：

資料變化 => 檢視自動同步
檢視變化 => 資料自動同步

演示：

<input type="text" v-model="username" />

<select v-model="from">  // 下拉框繫結在select上
     <option disabled value="">請選擇</option>  //disabled 禁用選項
     <option value="天津市">天津</option>
   </select>
   
   <input type="checkbox" v-model="hobby" value="抽菸">抽菸  //核取方塊變數 hobby 是陣列
9、v-model 表單修飾符

.number 以 parseFloat 轉成數字型別
.trim 去除首尾空白字元
.lazy 游標離開表單輸送

演示：

	<input type="text" v-model.number="age">
10、v-text和v-html插值

注意：會覆蓋插值表示式

語法：
v-text = 'vue 資料變數'
v-html = 'vue 資料變數'

 <p v-text="str"> <span>我是一個span標籤</span> </p>
 <p v-html="str"> 我是一個span標籤 </p>
 
 str: "<span>我是一個span標籤</span>"
11、v-show 和 v-if 隱藏移除

語法：
v-show = 'vue 變數' //變數 true 為隱藏 false 為顯示
v-if = 'vue 變數' //變數 true 為隱藏 false 為顯示

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

高階：
v-else 使用

<p v-if="age > 18">我成年了</p>
<p v-else>還得多吃飯</p>  // 顯示
     
age:15
12、v-for 迴圈指令

語法：
v-for = '(值，索引) in 目標結果'
v-for = '值 in 目標結構'

目標結構：
可以遍歷陣列、物件、數字、字串、(可遍歷結構)

演示：

// 遍歷陣列 item 值，index 索引
<li v-for="(item, index) in arr" :key="item">

//遍歷物件 value 值，key 屬性名
<div v-for="(value, key) in arr" :key="value">

遍歷整數，假設 arr:5 ,那麼{{i}} 為 1，2，3，4，5
 <div v-for="i in arr" :key="i">{{ i }}</div>

**PS: **誰迴圈，v-for 語句寫在誰身上

相關文章