一、Vue簡介?
Vue是一套用于構建用戶界面的漸進式框架。
所謂漸進式就是循序漸進，不一定非得把Vue中的所有API都學完才能開發Vue，可以學一點開發一點。
Vue2官網地址：https://v2.cn.vuejs.org/
Vue3官網地址：https://cn.vuejs.org/
二、安裝與創建第一個Vue實例
注意：在寫代碼之前要安裝node.js和VS Code編輯器，這里省略。
創建Vue實例，初始化渲染的核心步驟：
1.準備容器
2.引包(官網)- 開發版本/生產版本 ?開發版本：學習時使用開發版本，報錯更詳細；也可以直接下載vue.js文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>生產版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>3.創建Vue實例 new Vue()
4.指定配置項 el ?data => 渲染數據
? ?el? ? ? 指定掛載點，選擇器指定控制的是哪個盒子
? ?data ?提供數據?
創建第一個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 class="box"></div><div class="box2"></div><div id="app"><!-- 這里將來會編寫一些用于渲染的代碼邏輯 --><h1>{{msg}}</h1><a href="###">{{count}}</a></div><script src="/day01/vue/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> --><script>const app = new Vue({// 通過el配置選擇器，指定Vue管理的是哪個盒子el: "#app",// 通過data提供數據data: {msg: "Hello World",count: 6666,},});</script></body>
</html>
三、插值表達式
1.插值表達式概述
????????插值表達式是一種Vue的模板語法，我們可以用插值表達式渲染出Vue提供的數據。
上面代碼的<h1>{{msg}}</h1>就是插值表達式
2.語法
<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>3.錯誤用法
1.在插值表達式中使用的數據 必須在data中進行了提供
<p>{{hobby}}</p> //如果在data中不存在 則會報錯2.支持的是表達式，而非語句，比如：if for ...
<p>{{if}}</p>3.不能在標簽屬性中使用 {{ }} 插值 (插值表達式只能標簽中間使用)
<p title="{{username}}">我是P標簽</p>4.代碼示例
<body><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname + '你好'}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p><p :title="friend.desc">我是李四</p></div><script src="/day01/vue/vue.js"></script><script>const app = new Vue({el: "#app", //綁定id是app的元素(又稱：容器)// 通過data提供數據data: {nickname: "Hello World",age: 18,friend: {name: "張三",desc: "熱愛學習vue",},},});</script>
</body>
四、響應式
響應式簡單理解就是數據變，視圖對應變。
① 訪問數據： "實例.屬性名"
② 修改數據： "實例.屬性名"= "值"
<body><div id="app">{{msg}} {{count}}</div><!-- <script src="/day01/vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {// 響應式數據msg: "你好",count: 100,},});</script>
</body>
五、Vue開發者工具安裝——Vue.js Devtools
(一)Edge瀏覽器中安裝
在擴展中直接搜素vue，Vue.js.devtools就是，點擊獲取安裝
勾選上紅框的內容?
使用VS Code打開瀏覽器時F12就會有Vue標志了
(二)Google瀏覽器安裝
參考文章：Vue的開發者調試工具（devtools5.3.4）安裝
安裝之后可以F12后看到多一個Vue的調試面板
六、Vue指令
(一)v-show與v-if
????????條件判斷指令，用來輔助開發者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是： ?
1.v-show
- 作用： 控制元素顯示隱藏
- 語法： v-show = "表達式" 表達式值為 true 顯示， false 隱藏
- 原理： 切換 display:none 控制顯示隱藏
- 場景：頻繁切換顯示隱藏的場景
2.v-if?
- 作用： 控制元素顯示隱藏（條件渲染）
語法： v-if= "表達式" 表達式值 true顯示， false 隱藏
原理： 基于條件判斷，是否創建 或 移除元素節點
場景： 要么顯示，要么隱藏，不頻繁切換的場景?
<div id="app"><div v-show="flag" class="box">我是v-show控制的盒子</div><div v-if="flag" class="box">我是v-if控制的盒子</div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false}})
</script>(二)v-on與v-bind
1.v-on與v-bind語法
- <button v-on:事件名="內聯語句">按鈕</button>
- <button v-on:事件名="處理函數">按鈕</button>
- <button v-on:事件名="處理函數(實參)">按鈕</button>
- `v-on:` 簡寫為 **@**
- v-bind：動態設置html的標簽屬性 比如：src、url、title
- v-bind: 可以簡寫成 => :標簽屬性注意：
事件處理函數應該寫到一個跟data同級的配置項（methods）中
methods中的函數內部的this都指向Vue實例
代碼示例：?
<body><div id="app"><p v-if="gender == 1">性別：男</p><p v-else>性別：女</p><button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button><hr /><button @click="fn">切換顯示隱藏</button><h1 v-show="isShow">hello world</h1><!-- v-on調用傳參 --><hr /><div class="box"><h3>自動售貨機</h3><button @click="buy(5)">可樂5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>銀行卡余額：{{money}}元</p><!-- v-bind:src => :src --><hr /><img :src="imgUrl" :title="msg" /></div></body><script src="/day01/vue/vue.js"></script><script>const app = new Vue({el: "#app",data: {gender: 2,count: 100,isShow: true,money: 100,imgUrl: "imgs/11-02.gif",msg: "hello",},methods: {fn() {console.log("執行了fn");// app.isShow= !app.isShow;this.isShow = !this.isShow;},buy(price) {this.money -= price;},},});</script>2.v-bind對樣式控制的增強-操作class
為了方便開發者進行樣式控制， Vue 擴展了 v-bind 的語法，可以針對 class 類名 和 style 行內樣式 進行控制 。
2.1語法
<div> :class = "對象/數組">這是一個div</div>2.2對象語法
當class動態綁定的是對象時，鍵就是類名，值就是布爾值，如果值是true，就有這個類，否則沒有這個類
<div class="box" :class="{ 類名1: 布爾值, 類名2: 布爾值 }"></div>適用場景：一個類名，來回切換
2.3數組語法
當class動態綁定的是數組時 → 數組中所有的類，都會添加到盒子上，本質就是一個 class 列表
<div class="box" :class="[ 類名1, 類名2, 類名3 ]"></div>使用場景：批量添加或刪除類
<body><div id="app"><ul><liv-for="(item, index) in list":key="item.id"@click="activeIndex = index"><a :class="{active:index === activeIndex}" href="#">{{item.name}}</a></li></ul></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- <script src="./vue/vue.js"></script> --><script>const app = new Vue({el: "#app",data: {activeIndex: 0, // 記錄高亮，給出默認的索引位置list: [{ id: 1, name: "京東秒殺" },{ id: 2, name: "每日特價" },{ id: 3, name: "品類秒殺" },],},});</script>
<style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}
</style>
?
思路：
1.基于數據，動態渲染tab（v-for）
2.準備一個下標 記錄高亮的是哪一個 tab
3.基于下標動態切換class的類名
3.v-bind對有樣式控制的增強-操作style
語法：
<div class="box" :style="{ CSS屬性名1: CSS屬性值, CSS屬性名2: CSS屬性值 }"></div>
?
(三)v-for
v-for 用來輔助開發者基于一個數組來循環渲染一個列表結構。
v-for 指令需要使用(item, index) in arr形式的特殊語法，也可以遍歷對象和數字，其中：
item 是數組中的每一項
index 是每一項的索引，不需要可以省略
arr 是被遍歷的數組
<body><div id="app"><ul><li v-for="(item, index) in list" :key="index">{{item}}</li></ul><hr /><ul><li v-for="(book, index) in booksList" :key="book.id"><span>{{book.name}}</span><span>{{book.author}}</span><!-- 注冊點擊事件-> 通過id進行刪除數組中的對應項 盡量不使用index刪除，因為id更穩定 --><button @click="deleteBook(book.id)">刪除</button></li></ul> </div></body><!-- <script src="vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {list: ["張三", "李四", "王五", "jack"],booksList: [{ id: 1, name: "《紅樓夢》", author: "曹雪芹" },{ id: 2, name: "《西游記》", author: "吳承恩" },{ id: 3, name: "《水滸傳》", author: "施耐庵" },{ id: 4, name: "《三國演義》", author: "羅貫中" },],},methods: {deleteBook(id) {console.log(id);this.booksList = this.booksList.filter((item) => item.id !== id);}, },});</script>
v-for中的key
語法： key="唯一值"
作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。
為什么加key：Vue 的默認行為會嘗試原地修改元素（就地復用）
注意：
key 的值只能是字符串 或 數字類型
key 的值必須具有唯一性
推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應）
(四)v-model
<body><div id="app"> 賬戶：<input type="text" v-model="username" /><br />密碼：<input type="password" v-model="password" /><br /><button @click="login">登錄</button><button @click="reset">重置</button></div></body><!-- <script src="vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: { username: "",password: "",},methods: { login() {console.log(this.username, this.password);},reset() {this.username = "";this.password = "";console.log(this.username, this.password);},},});</script>
v-model在其他表單元素的使用 ?
常見的表單元素都可以用 v-model 綁定關聯 → 快速 獲取 或 設置 表單元素的值
它會根據 控件類型 自動選取 正確的方法 來更新元素
輸入框 ?input:text ? ——> value
文本域 ?textarea?? ? ——> value
復選框 ?input:checkbox ?——> checked
單選框 ?input:radio ? ——> checked
下拉菜單 select ? ?——> value
...
<body><div id="app"><h3>xx學習網</h3>姓名：<input type="text" v-model="username" /><br /><br />是否單身：<input type="checkbox" v-model="isSingle" /><br /><br /><!-- 1. name: 給單選框加上 name 屬性 可以分組 → 同一組互相會互斥2. value: 給單選框加上 value 屬性，用于提交給后臺的數據-->性別:<input v-model="gender" type="radio" name="gender" :value="1" />男<input v-model="gender" type="radio" name="gender" :value="2" />女<br /><br /><!-- 1. option 需要設置 value 值，提交給后臺2. select 的 value 值，關聯了選中的 option 的 value 值-->所在城市:<select v-model="cityId" ><option value="1">北京</option><option value="2">上海</option><option value="3">成都</option><option value="4">南京</option></select> {{cityId}}<br /><br />自我描述：<textarea v-model="desc"></textarea><button>立即注冊</button></div><script src="./vue/vue.js"></script><script>const app = new Vue({el: "#app",data: {username: "789",isSingle: true,gender: 1,cityId: '3',desc: "",},methods: {fun() {console.log(this.cityId);},},});</script></body>?
(五)綜合案例——記事本
<body><!-- 主體區域 --><section id="app"><!-- 輸入框 --><header class="header"><h1>記事本</h1><input placeholder="請輸入任務" class="new-todo" v-model="todoName" /><button class="add" @click="addTodo">添加任務</button></header><!-- 列表區域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="index"><div class="view"><span class="index">{{index+1}}</span><label>{{item.name}}</label><button class="destroy" @click="del(item.id)"></button></div></li></ul></section><!-- 統計和清空 --><footer class="footer" v-show="this.list.length > 0"><!-- 統計 --><span class="todo-count">合 計:<strong> {{list.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="resetToDo">清空任務</button></footer></section></body><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {todoName: "",list: [{ id: 1, name: "跑步十公里" },{ id: 2, name: "跑步五公里" },{ id: 3, name: "跑步三公里" },],isShow: true,},methods: {del(id) {this.list = this.list.filter((item) => item.id !== id);},addTodo() {if (this.todoName.trim() !== "") {this.list.push({id: +new Date(),name: this.todoName,});// 添加完成后要清空輸入框this.todoName = "";} else {return;}console.log(this.list);},resetToDo() {this.list = [];},},});</script>
七、指令修飾符
所謂指令修飾符就是通過“.”指明一些指令后綴 不同的后綴封裝了不同的處理操作 —> 簡化代碼
1.按鍵修飾符
@keyup.enter —>當點擊enter鍵的時候才觸發
<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>
<header class="header"><h1>記事本</h1><input@keyup.enter="addTodo"placeholder="請輸入任務"class="new-todo"v-model="todoName"/><button class="add" @click="addTodo">添加任務</button>
</header>此時，點擊添加按鈕和回車，都能觸發addTodo函數
小tips：通過函數的形參，可以拿到事件綁定的對象
<body><div id="app"><button @click="handleClick">點擊我</button></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {},methods: {handleClick(event) {console.log(event); // 這里可以訪問到事件對象console.log(event.target);console.log(event.type);console.log(event.pageX);// 可以訪問 event.target, event.type, event.pageX 等屬性},},});</script>
2.v-model修飾符
v-model.trim —>去除兩端空格
v-model.number —>轉數字
姓名:<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
年齡<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>3.事件修飾符
@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默認行為
@事件名.stop.prevent —>可以連用 即阻止事件冒泡也阻止默認行為?
)
