文章目錄
- Vue 快速上手
- 1、Vue.js 官網 & Vue.js 的獲取
- 2、創建 Vue 實例，初始化渲染
- 3、插值表達式
- 安裝 Vue 開發者工具：裝插件調試 Vue 應用
- Vue 指令
- 1、v-show 指令
- 2、v-if
- 3、v-else & v-else-if
- 4、v-on
- v-on 調用傳參
- 5、v-bind
- v-bind 對于樣式控制的增強 - 操作class
- 6、v-for
- v-for 中的 key
- 7、v-model
Vue 快速上手
1、Vue.js 官網 & Vue.js 的獲取
? Vue3 官網：Vue.js - 漸進式 JavaScript 框架 | Vue.js
? Vue2 官網：Vue.js
? 本系列將以如下的 Vue.js 版本為大家進行實例的演示與講解
<!-- 引入的是開發版本包 - 包含完整的注釋和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
2、創建 Vue 實例，初始化渲染
創建 Vue 實例，初始化渲染的核心步驟：
- 準備容器 (Vue所管理的范圍)
- 引包 (開發版本包 / 生產版本包) 官網
- 創建實例
- 添加配置項 => 完成渲染
創建一個 vue 實例：
const app = new Vue({el: '#app',//el 指定掛載點，選擇器指定控制的是哪個盒子data: {//data 提供數據message: '迪幻',count: 2386},})
完整的代碼：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{message}}{{count}}</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '迪幻',count: 2386},})
</script></html>
3、插值表達式
插值表達式是一種 Vue 的模板語法
效果圖
1. 作用:
利用表達式進行插值，渲染到頁面中
表達式：是可以被求值的代碼，JS引擎會將其計算出一個結果
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()
2. 語法：
{{ 表達式 }}
<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>
3. 注意點：
（1）使用的數據必須存在（data）
（2）支持的是表達式，而非語句，比如：if for…
（3）不能在標簽屬性中使用{{ }} 插值
安裝 Vue 開發者工具：裝插件調試 Vue 應用
（1）通過谷歌應用商店安裝 （國外網站）
（2）極簡插件: 下載 → 開發者模式 → 拖拽安裝 → 插件詳情允許訪問文件
下載地址：https://chrome.zzzmh.cn/index
打開 Vue 運行的頁面，調試工具中 Vue 欄，即可查看修改數據，進行調試。
Vue 指令
1、v-show 指令
- 作用： 控制元素顯示隱藏
- 語法： v-show = “表達式” 表達式值 true 顯示， false 隱藏
- 原理： 切換 display:none 控制顯示隱藏
- 場景： 頻繁切換顯示隱藏的場景
2、v-if
- 作用： 控制元素顯示隱藏（條件渲染）
- 語法： v-if = “表達式” 表達式值 true 顯示， false 隱藏
- 原理： 基于條件判斷，是否 創建 或 移除 元素節點
- 場景： 要么顯示，要么隱藏，不頻繁切換的場景
注意：v-show 和 v-if 最大的區別：
- v-show 只是控制元素的顯示與隱藏，但是元素是一直存在的
- v-if 是只有在其表達式為真時才會創建相應的標簽，而為假時則不會創建此標簽
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div v-show="flag">這是v-show控制的盒子</div><div v-if="flag">這是v-if控制的盒子</div></div>
</body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag: true}})
</script></html>
3、v-else & v-else-if
- 作用： 輔助 v-if 進行判斷渲染
- 語法： v-else v-else-if = “表達式”
- 注意： 需要緊挨著 v-if 一起使用
例如：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><p v-if="gender===1">男生</p><p v-else>女生</p><p v-if="score>90">grade-A</p><p v-else-if="score>80">grade-B</p><p v-else-if="score>70">grade-C</p><p v-else="score>60">grade-D</p></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {gender: 1,score: 79}})
</script></html>
4、v-on
- 作用： 注冊事件
- 語法： ① v-on:事件名 = “內聯語句” ② v-on:事件名 = “methods中的函數名”
- 簡寫：@事件名 = 添加監聽 + 提供處理邏輯
- 注意：methods函數內的 this 指向 Vue 實例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><button @click="login">{{message}}</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '迪幻登錄',},methods: {login() {alert(this.message)}}})</script></html>
v-on 調用傳參
例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>余額：</h1>{{money}}</h1><button @click="buy(price1)">{{title1}}</button><button @click="buy(price2)">{{title2}}</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {money: 100,price1: 5,price2: 10,title1: '可樂5元',title2: '蛋糕10元'},methods: {buy(price) {this.money -= price}},})
</script></html>
5、v-bind
- 作用：動態的設置html的標簽屬性 → src url title …
- 語法：v-bind:屬性名=“表達式”
- 注意：簡寫形式 :屬性名=“表達式”
v-bind 對于樣式控制的增強 - 操作class
語法 :class = “對象/數組”
① 對象 → 鍵就是類名，值是布爾值。如果值為 true，有這個類，否則沒有這個類
<div class="box" :class="{ 類名1: 布爾值, 類名2: 布爾值 }"></div>
適用場景：一個類名，來回切換
② 數組 → 數組中所有的類，都會添加到盒子上，本質就是一個 class 列表
<div class="box" :class="[ 類名1, 類名2, 類名3 ]"></div>
:class="['pink', 'big']"
適用場景：批量添加或刪除類
注意：如果沒有 img 標簽沒有 v-bind 屬性的話，src就會只會被認為是 url 這個字面量，而不是一個變量
實例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- v-bind:src => :src --><img src="imgUrl" v-bind:title="msg" alt=""><img :src="imgUrl" :title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {imgUrl: './imgs/10-02.png',msg: 'hello 迪幻'}})</script>
</body></html>
6、v-for
-
作用： 基于數據循環， 多次渲染整個元素
-
-
遍歷數組語法： v-for = “(item, index) in 數組”
-
item 每一項， index 下標
-
省略 index: v-for = “item in 數組” → 數組、對象、數字…
-
v-for 中的 key
- 語法：key屬性 = “唯一標識”
- 作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。
v-for 的默認行為會嘗試 原地修改元素 （就地復用）
-
key作用： 給元素添加的唯一標識，便于Vue進行列表項的正確排序復用。
-
注意點：
-
- key 的值只能是 字符串 或 數字類型
- key 的值必須具有 唯一性
- 推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應）
7、v-model
- 作用: 給 表單元素 使用, 雙向數據綁定 ① 數據變化 → 視圖自動更新 ② 視圖變化 → 數據自動更新
- 語法: v-model = ‘變量’
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><input type="text" v-model="username"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {username: 'dihuan',},})
</script></html>
常見的表單元素都可以用 v-model 綁定關聯 → 快速 獲取 或 設置 表單元素的值
v-model 應用于其他表單元素
它會根據 控件類型 自動選取 正確的方法 來更新元素
本次分享就到這里，感謝大家的支持與觀看，若有謬誤請各位諒解與指出，我們下期再見
_在線模型訓練)
