vscode-插件補充

vue文件代碼高亮插件-vscode中安裝

在這里插入圖片描述

代碼提示插件-vscode中安裝

在這里插入圖片描述

知識點自測

想學會今天的內容, 先測測這幾個會不會

表達式, 變量是什么
new的作用和含義
實例化對象
什么是對象上的, 屬性和方法
對象的賦值和取值
this的指向
npm/yarn是什么, package.json干什么的, 下載包的命令是什么, 什么是模塊化開發
函數的形參實參, 得馬上反應過來, 哪個是變量哪個是值, 誰傳給誰了

如果通不過, 請記住口訣:

變量是一個容器, 表達式原地都有返回結果

var a = 10;
console.log(a); // a就是變量, 運行后使用變量里的值再原地打印
console.log(10 + 50); // 10 + 50 就是表達式
console.log(a > 9); // 這叫判斷表達式, 原地結果是true

new 類名() - 原地得到一個實例對象 - 對象身上有key(或叫屬性, 叫鍵都行), 對應的值是我們要使用的
實例化對象就是new 類名() 創造出來的對象, 身上包含屬性(key, 鍵) 對應的值

什么是屬性和方法(固定格式)

let obj = { // 屬性指的是a, b, c, d, e這些名字a: 10,b: [1, 2, 3],c: function(){},d () {},e: () => {} // 值是冒號:右邊的值
}
// 這個格式是固定的, 必須張口就來, 張手就寫, 準確率100%

對象的復制和取值(固定格式)

有=(賦值運算符) 就是賦值, 沒有就是取值

let obj = {a: 10,b: 20
}
console.log(obj.a); // 從obj對象的a上取值, 原地打印10
obj.b = 100; // 有=, 固定把右側的值賦予給左側的鍵, 再打印obj這個對象, b的值是100了

this指向口訣

在function函數中, this默認指向當前函數的調用者調用者.函數名()

在箭頭函數中, this指向外層"函數"作用域this的值

學習目標

能夠理解vue的概念和作用
能夠理解vuecli腳手架工程化開發
能夠使用vue指令

1. Vue基本概念

1.0_為何學Vue

目標: 更少的時間,干更多的活. 開發網站速度, 快

在這里插入圖片描述

例如: 把數組數據-循環鋪設到li中, 看看分別如何做的?

原生js做法

<ul id="myUl"></ul>
<script>let arr = ["春天", "夏天", "秋天", "冬天"];let myUl = document.getElementById("myUl");for (let i = 0; i < arr.length; i++) {let theLi = document.createElement("li");theLi.innerHTML = arr[i];myUl.appendChild(theLi);}
</script>

Vue.js做法

<li v-for="item in arr">{{item}}</li>
<script>new Vue({// ...data: {arr: ["春天", "夏天", "秋天", "冬天"] }})
</script>

注意: 雖然vue寫起來很爽, 但是一定不要忘記, vue的底層還是原生js

開發更加的效率和簡潔, 易于維護, 快!快!快!就是塊 (甚至測試, Java, Python工程師都要學點vue, 方便與前端溝通)

現在很多項目都是用vue開發的

在這里插入圖片描述

市場上90%工作都要求會vue, 會vue拿高薪, 甚至java或測試都要學點vue

在這里插入圖片描述

1.1_Vue是什么

在這里插入圖片描述

漸進式javacript框架, 一套擁有自己規則的語法

官網地址: https://cn.vuejs.org/ (作者: 尤雨溪)

什么是漸進式

漸進式: 逐漸進步, 想用什么就用什么, 不必全都使用

在這里插入圖片描述

Vue漸進式: Vue從基礎開始, 會循序漸進向前學習, 如下知識點可能你現在不明白, 但是學完整個vue回過頭來看, 會很有幫助

在這里插入圖片描述

什么是庫和框架

補充概念:

庫: 封裝的屬性或方法 (例jquery.js)

框架: 擁有自己的規則和元素, 比庫強大的多 (例vue.js)
在這里插入圖片描述

在這里插入圖片描述

1.2_Vue學習的方式

傳統開發模式：基于html/css/js文件開發vue

在這里插入圖片描述

工程化開發方式：在webpack環境中開發vue，這是最推薦, 企業常用的方式

Vue如何學

每天的知識點自測最好做到了如指掌 - 做不到只能花30分鐘去記住結論和公式
記住vue指令作用, 基礎語法 - 弄一個字典(一一映射關系)
在課上例子, 練習, 案例, 作業, 項目中, 反復磨煉使用
學會查找問題的方式和解決方式(弄個報錯總結.md, 避免反復進坑)

總結: vue是漸進式框架, 有自己的規則, 我們要記住語法, 特點和作用, 反復磨煉使用, 多總結

2. @vue/cli腳手架

2.0_@vue/cli 腳手架介紹

目標: webpack自己配置環境很麻煩, 下載@vue/cli包,用vue命令創建腳手架項目

@vue/cli是Vue官方提供的一個全局模塊包(得到vue命令), 此包用于創建腳手架項目

腳手架是為了保證各施工過程順利進行而搭設的工作平臺

在這里插入圖片描述

@vue/cli的好處

開箱即用

0配置webpack

babel支持

css, less支持

開發服務器支持

2.1_@vue/cli安裝

目標: 把@vue/cli模塊包按到全局, 電腦擁有vue命令, 才能創建腳手架工程

全局安裝命令

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天沒動靜(95%都是網速問題), 可以ctrl c

停止重新來
換一個網繼續重來

查看vue腳手架版本

vue -V

總結: 如果出現版本號就安裝成功, 否則失敗

2.2_@vue/cli 創建項目啟動服務

目標: 使用vue命令, 創建腳手架項目

注意: 項目名不能帶大寫字母, 中文和特殊符號

創建項目

# vue和create是命令, vuecli-demo是文件夾名
vue create vuecli-demo

選擇模板

可以上下箭頭選擇, 弄錯了ctrl+c重來

在這里插入圖片描述

? 選擇用什么方式下載腳手架項目需要的依賴包
在這里插入圖片描述

回車等待生成項目文件夾+文件+下載必須的第三方包們

在這里插入圖片描述

進入腳手架項目下, 啟動內置的熱更新本地服務器

cd vuecil-demonpm run serve
# 或
yarn serve

只要看到綠色的 - 啊. 你成功了(底層node+webpack熱更新服務)

在這里插入圖片描述

打開瀏覽器輸入上述地址

在這里插入圖片描述

總結: vue命令創建工程目錄, 項目內置webpack本地熱更新服務器, 幫我們打包項目預覽項目

2.3 @vue/cli 目錄和代碼分析

目標: 講解重點文件夾, 文件的作用, 以及文件里代碼的意思

 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 – 依賴包列表文件

2.4_@vue/cli 項目架構了解

目標: 知道項目入口, 以及代碼執行順序和引入關系

在這里插入圖片描述

2.5_@vue/cli 自定義配置

目標：項目中沒有webpack.config.js文件，因為@vue/cli用的vue.config.js

src并列處新建vue.config.js

/* 覆蓋webpack的配置 */
module.exports = {devServer: { // 自定義服務配置open: true, // 自動打開瀏覽器port: 3000}
}

2.6_eslint了解

目標: 知道eslint的作用, 和如何暫時關閉, 它是一個代碼檢查工具

例子: 先在main.js 隨便聲明個變量, 但是不要使用

在這里插入圖片描述

觀察發現, 終端和頁面都報錯了

記住以后見到這樣子的錯誤, 證明你的代碼不嚴謹

在這里插入圖片描述

方式1: 手動解決掉錯誤, 以后項目中會講如何自動解決

方式2: 暫時關閉eslint檢查(因為現在主要精力在學習Vue語法上), 在vue.config.js中配置后重啟服務

在這里插入圖片描述

2.7_@vue/cli 單vue文件講解

目標: 單vue文件好處, 獨立作用域互不影響

Vue推薦采用.vue文件來開發項目

template里只能有一個根標簽

vue文件-獨立模塊-作用域互不影響

style配合scoped屬性, 保證樣式只針對當前template內標簽生效

vue文件配合webpack, 把他們打包起來插入到index.html

<!-- template必須, 只能有一個根標簽, 影響渲染到頁面的標簽結構 -->
<template><div>歡迎使用vue</div>
</template><!-- js相關 -->
<script>
export default {name: 'App'
}
</script><!-- 當前組件的樣式, 設置scoped, 可以保證樣式只對當前頁面有效 -->
<style scoped>
</style>

最終: Vue文件配合webpack, 把他們打包起來插入到index.html, 然后在瀏覽器運行

2.8_@vue/cli 歡迎界面清理

目標: 我們開始寫我們自己的代碼, 無需歡迎頁面

src/App.vue默認有很多內容, 可以全部刪除留下框
assets 和 components 文件夾下的一切都刪除掉 (不要默認的歡迎頁面)

3. Vue指令

3.0_vue基礎-插值表達式

目的: 在dom標簽中, 直接插入內容

又叫: 聲明式渲染/文本插值

語法: {{ 表達式 }}

<template><div><h1>{{ msg }}</h1><h2>{{ obj.name }}</h2><h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3></div>
</template><script>
export default {data() { // 格式固定, 定義vue數據之處return {  // key相當于變量名msg: "hello, vue",obj: {name: "小vue",age: 5}}}
}
</script><style>
</style>

總結: dom中插值表達式賦值, vue的變量必須在data里聲明

3.1_vue基礎-MVVM設計模式

目的: 轉變思維, 用數據驅動視圖改變, 操作dom的事, vue源碼內干了

設計模式: 是一套被反復使用的、多數人知曉的、經過分類編目的、代碼設計經驗的總結。

演示: 在上個代碼基礎上, 在devtool工具改變M層的變量, 觀察V層(視圖的自動同步)

等下面學了v-model再觀察V改變M的效果

在這里插入圖片描述

MVVM，一種軟件架構模式，決定了寫代碼的思想和層次
- M： model數據模型 (data里定義)
- V： view視圖（html頁面）
- VM： ViewModel視圖模型 (vue.js源碼)

MVVM通過數據雙向綁定讓數據自動地雙向同步 不再需要操作DOM
- V（修改視圖） -> M（數據自動同步）
- M（修改數據） -> V（視圖自動同步）

在這里插入圖片描述

1. 在vue中，不推薦直接手動操作DOM！！！

2. 在vue中，通過數據驅動視圖，不要在想著怎么操作DOM，而是想著如何操作數據！！(思想轉變)

在這里插入圖片描述

總結: vue源碼內采用MVVM設計模式思想, 大大減少了DOM操作, 挺高開發效率

3.2_vue指令-v-bind

目標: 給標簽屬性設置vue變量的值

vue指令, 實質上就是特殊的 html 標簽屬性, 特點: v- 開頭

每個指令, 都有獨立的作用

語法：v-bind:屬性名="vue變量"
簡寫：:屬性名="vue變量"

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

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

3.3_vue指令-v-on

目標: 給標簽綁定事件

語法
- v-on:事件名=“要執行的少量代碼”
- v-on:事件名=“methods中的函數”
- v-on:事件名=“methods中的函數(實參)”
簡寫: @事件名=“methods中的函數”

<!-- vue指令:   v-on事件綁定-->
<p>你要買商品的數量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1個</button>
<button v-on:click="addCountFn(5)">一次加5件</button><button @click="subFn">減少</button><script>export default {// ...其他省略methods: {addFn(){ // this代表export default后面的組件對象(下屬有data里return出來的屬性)this.count++},addCountFn(num){this.count += num},subFn(){this.count--}}}
</script>

總結: 常用@事件名, 給dom標簽綁定事件, 以及=右側事件處理函數

3.4_vue指令-v-on事件對象

目標: vue事件處理函數中, 拿到事件對象

語法:
- 無傳參, 通過形參直接接收
- 傳參, 通過$event指代事件對象傳給事件處理函數

<template><div><a @click="one" href="http://www.baidu.com">阻止百度</a><hr><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>

3.5_vue指令-v-on修飾符

目的: 在事件后面.修飾符名 - 給事件帶來更強大的功能

語法:
- @事件名.修飾符=“methods里函數”
  - .stop - 阻止事件冒泡
  - .prevent - 阻止默認行為
  - .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>

總結: 修飾符給事件擴展額外功能

3.6_vue指令-v-on按鍵修飾符

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

語法:
- @keyup.enter - 監測回車按鍵
- @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>

總結: 多使用事件修飾符, 可以提高開發效率, 少去自己判斷過程

3.7__案例-文字反轉

目標: 點擊按鈕 - 把文字取反顯示 - 再點擊取反顯示(回來了)

提示: 把字符串取反賦予回去

效果演示:

在這里插入圖片描述

正確代碼:

<template><div><h1>{{ message }}</h1><button @click="btn">逆轉世界</button></div>
</template><script>
export default {data() {return {message: "HELLO, WORLD",};},methods: {btn(){this.message = this.message.split("").reverse().join("")}}
};
</script>

總結: 記住方法特點, 多做需求, vue是數據變化視圖自動更新, 減少操作DOM時間, 提高開發效率

3.8_vue指令 v-model

目標: 把value屬性和vue數據變量, 雙向綁定到一起

語法: v-model=“vue數據變量”
雙向數據綁定
- 數據變化 -> 視圖自動同步
- 視圖變化 -> 數據自動同步
演示: 用戶名綁定 - vue內部是MVVM設計模式

<template><div><!-- v-model:是實現vuejs變量和表單標簽value屬性, 雙向綁定的指令--><div><span>用戶名:</span><input type="text" v-model="username" /></div><div><span>密碼:</span><input type="password" v-model="pass" /></div><div><span>來自于: </span><!-- 下拉菜單要綁定在select上 --><select v-model="from"><option value="北京市">北京</option><option value="南京市">南京</option><option value="天津市">天津</option></select></div><div><!-- (重要)遇到復選框, v-model的變量值非數組 - 關聯的是復選框的checked屬性數組   - 關聯的是復選框的value屬性--><span>愛好: </span><input type="checkbox" v-model="hobby" value="抽煙">抽煙<input type="checkbox" v-model="hobby" value="喝酒">喝酒<input type="checkbox" v-model="hobby" value="寫代碼">寫代碼</div><div><span>性別: </span><input type="radio" value="男" name="sex" v-model="gender">男<input type="radio" value="女" name="sex" v-model="gender">女</div><div><span>自我介紹</span><textarea v-model="intro"></textarea></div></div>
</template><script>
export default {data() {return {username: "",pass: "",from: "",hobby: [], sex: "",intro: "",};// 總結:// 特別注意: v-model, 在input[checkbox]的多選框狀態// 變量為非數組, 則綁定的是checked的屬性(true/false) - 常用于: 單個綁定使用// 變量為數組, 則綁定的是他們的value屬性里的值 - 常用于: 收集勾選了哪些值}
};
</script>

總結: 本階段v-model只能用在表單元素上, 以后學組件后講v-model高級用法

3.9_vue指令 v-model修飾符

目標: 讓v-model擁有更強大的功能

語法:
- v-model.修飾符=“vue數據變量”
  - .number 以parseFloat轉成數字類型
  - .trim 去除首尾空白字符
  - .lazy 在change時觸發而非inupt時

<template><div><div><span>年齡:</span><input type="text" v-model.number="age"></div><div><span>人生格言:</span><input type="text" v-model.trim="motto"></div><div><span>自我介紹:</span><textarea v-model.lazy="intro"></textarea></div></div>
</template><script>
export default {data() {return {age: "",motto: "",intro: ""}}
}
</script>

總結: v-model修飾符, 可以對值進行預處理, 非常高效好用

3.10_vue指令 v-text和v-html

目的: 更新DOM對象的innerText/innerHTML

語法:
- 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標簽</span>"}}
}
</script>

總結: v-text把值當成普通字符串顯示, v-html把值當做html解析

3.11_vue指令 v-show和v-if

目標: 控制標簽的隱藏或出現

語法:
- v-show=“vue變量”
- v-if=“vue變量”
原理
- v-show 用的display:none隱藏 (頻繁切換使用)
- v-if 直接從DOM樹上移除
高級
- v-else使用

<template><div><h1 v-show="isOk">v-show的盒子</h1><h1 v-if="isOk">v-if的盒子</h1><div><p v-if="age > 18">我成年了</p><p v-else>還得多吃飯</p></div></div>
</template><script>
export default {data() {return {isOk: true,age: 15}}
}
</script>

總結: 使用v-show和v-if以及v-else指令, 方便通過變量控制一套標簽出現/隱藏

3.12_案例-折疊面板

目標: 點擊展開或收起時，把內容區域顯示或者隱藏

在這里插入圖片描述

此案例使用了less語法, 項目中下載模塊

yarn add less@3.0.4 less-loader@5.0.0 -D

只有標簽和樣式

<template><div id="app"><h3>案例：折疊面板</h3><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" >收起</span></div><div class="container"><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div></div>
</template><script>
export default {data() {return {}}
}
</script><style lang="less">
body {background-color: #ccc;#app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em;h3 {text-align: center;}.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {/* 鼠標改成手的形狀 */cursor: pointer;}}
}
</style>

正確答案:

<template><div id="app"><h3>案例：折疊面板</h3><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span></div><div class="container" v-show="isShow"><p>寒雨連江夜入吳, </p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div></div>
</template><script>
export default {data() {return {isShow: false}}
}
</script>

3.13_vue指令-v-for

目標: 列表渲染, 所在標簽結構, 按照數據數量, 循環生成

語法
- v-for="(值, 索引) in 目標結構"
- v-for=“值 in 目標結構”
目標結構:
- 可以遍歷數組 / 對象 / 數字 / 字符串 (可遍歷結構)
注意:

v-for的臨時變量名不能用到v-for范圍外

<template><div id="app"><div id="app"><!-- v-for 把一組數據, 渲染成一組DOM --><!-- 口訣: 讓誰循環生成, v-for就寫誰身上 --><p>學生姓名</p><ul><li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li></ul><p>學生詳細信息</p><ul><li v-for="obj in stuArr" :key="obj.id"><span>{{ obj.name }}</span><span>{{ obj.sex }}</span><span>{{ obj.hobby }}</span></li></ul><!-- v-for遍歷對象(了解) --><p>老師信息</p><div v-for="(value, key) in tObj" :key="value">{{ key }} -- {{ value }}</div><!-- v-for遍歷整數(了解) - 從1開始 --><p>序號</p><div v-for="i in count" :key="i">{{ i }}</div></div></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>

總結: vue最常用指令, 鋪設頁面利器, 快速把數據賦予到相同的dom結構上循環生成

知識點總結

Vue是什么
Vue-cli作用以及簡單使用
插值表達式
MVVM設計模式
v-bind作用
v-on作用和事件對象以及修飾符使用
v-model的作用以及雙向數據綁定解釋
v-if和v-show的區別和本質
v-for的作用和使用
vue的特點
- 漸進式
- 聲明式渲染
- 數據驅動視圖 (響應式)
- 極少的去寫DOM操作相關代碼
- 雙向綁定
- 組件系統
- 不兼容IE8及以下瀏覽器

常見面試題

1. Vue的最大優勢是什么?

? 簡單易學, 輕量級整個源碼js文件不大, 雙向數據綁定, 數據驅動視圖, 組件化, 數據和視圖分離,

? vue負責關聯視圖和數據, 作者中國人(尤雨溪), 文檔都是中文的, 入門教程非常多, 上手簡單.

? 相比傳統網頁, vue是單頁面可以只刷新某一部分

2. Vue和jQuery區別是什么?

? jQuery應該算是一個插件, 里面封裝了各種易用的方法, 方便你使用更少的代碼來操作dom標簽

? Vue是一套框架, 有自己的規則和體系與語法, 特別是設計思想MVVM, 讓數據和視頻關聯綁定, 省略了很多DOM操作. 然后指令還給標簽注入了更多的功能

3. mvvm和mvc區別是什么?

? MVC: 也是一種設計模式, 組織代碼的結構, 是model數據模型, view視圖, Controller控制器, 在控制器這層里編寫js代碼, 來控制數據和視圖關聯

? MVVM: 即Model-View-ViewModel的簡寫。即模型-視圖-視圖模型, VM是這個設計模式的核心, 連接v和m的橋梁, 內部會監聽DOM事件, 監聽數據對象變化來影響對方. 我們稱之為數據綁定

4. Vue常用修飾符有哪些?

? .prevent: 提交事件不再重載頁面；

? .stop: 阻止單擊事件冒泡；

? .once: 只執行一次這個事件

5. Vue2.x兼容IE哪個版本以上

? 不支持ie8及以下，部分兼容ie9 ，完全兼容10以上，因為vue的響應式原理是基于es5的Object.defineProperty(),而這個方法不支持ie8及以下。

6. 對Vue漸進式的理解

? 漸進式代表的含義是：主張最少, 自底向上, 增量開發, 組件集合, 便于復用

7. v-show和v-if的區別

? v-show和v-if的區別? 分別說明其使用場景?

? v-show 和v-if都是true的時候顯示，false的時候隱藏

? 但是：false的情況下，

? v-show是采用的display:none

? v-if采用惰性加載

? 如果需要頻繁切換顯示隱藏需要使用v-show

8. 說出至少4個Vue指令及作用

? v-for 根據數組的個數, 循環數組元素的同時還生成所在的標簽

? v-show 顯示內容

? v-if 顯示與隱藏

? v-else 必須和v-if連用不能單獨使用否則報錯

? v-bind 動態綁定作用：及時對頁面的數據進行更改, 可以簡寫成:分號

? v-on 給標簽綁定函數，可以縮寫為@，例如綁定一個點擊函數函數必須寫在methods里面

? v-text 解析文本

? v-html 解析html標簽

9. 為什么避免v-for和v-if在一起使用

? Vue 處理指令時，v-for 比 v-if 具有更高的優先級, 雖然用起來也沒報錯好使, 但是性能不高, 如果你有5個元素被v-for循環, v-if也會分別執行5次.

示例-1帥哥美女走一走

目標: 點擊按鈕, 改變3個li的順序, 在頭上的就到末尾.

提示: 操作數組里的順序, v-for就會重新渲染li

在這里插入圖片描述

正確代碼(先不要看)

<template><div id="app"><ul><li v-for="item in myArr" :key="item">{{ item }}</li></ul><button @click="btn">走一走</button></div>
</template><script>
export default {data() {return {myArr: ["帥哥", "美女", "程序猿"],};},methods: {btn() {// 頭部數據加入到末尾this.myArr.push(this.myArr[0]);// 再把頭部的數據刪除掉this.myArr.shift();},},
};
</script>

示例-2.加加減減

目標: 點擊生成按鈕, 新增一個li(隨機數字)和刪除按鈕, 點擊刪除按鈕, 刪除對應的li和值

提示: 數組渲染列表, 生成和刪除都圍繞數組操作

在這里插入圖片描述

正確代碼:(先不要看)

<template><div id="app"><ul><li v-for="(item, ind) in arr" :key="item"><span>{{ item }}</span><button @click="del(ind)">刪除</button></li></ul><button @click="add">生成</button></div>
</template><script>
export default {data() {return {arr: [1, 5, 3],};},methods: {add() {this.arr.push(Math.floor(Math.random() * 20));},del(index) {this.arr.splice(index, 1);},},
};
</script>

示例-3.購物車

目標: 完成商品瀏覽和刪除功能, 當無數據給用戶提示

需求1: 根據給的初始數據, 把購物車頁面鋪設出來
需求2: 點擊對應刪除按鈕, 刪除對應數據
需求3: 當數據沒有了, 顯示一條提示消息

在這里插入圖片描述

html+css和數據代碼結構(可復制接著寫)

<template><div id="app"><table class="tb"><tr><th>編號</th><th>品牌名稱</th><th>創立時間</th><th>操作</th></tr><!-- 循環渲染的元素tr --><tr><td>1</td><td>車名</td><td>2020-08-09</td><td><button>刪除</button></td></tr><tr><td colspan="4">沒有數據咯~</td></tr></table></div>
</template><script>
export default {data() {return {list: [{ id: 1, name: "奔馳", time: "2020-08-01" },{ id: 2, name: "寶馬", time: "2020-08-02" },{ id: 3, name: "奧迪", time: "2020-08-03" },],};},
};
</script><style>
#app {width: 600px;margin: 10px auto;
}.tb {border-collapse: collapse;width: 100%;
}.tb th {background-color: #0094ff;color: white;
}.tb td,
.tb th {padding: 5px;border: 1px solid black;text-align: center;
}.add {padding: 5px;border: 1px solid black;margin-bottom: 10px;
}
</style>

正確代碼(先不要看)

<template><div id="app"><table class="tb"><tr><th>編號</th><th>品牌名稱</th><th>創立時間</th><th>操作</th></tr><!-- 循環渲染的元素tr --><tr v-for="(item,index) in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.time}}</td><td><button @click="del(index)">刪除</button></td></tr><tr v-if="list.length === 0"><td colspan="4">沒有數據咯~</td></tr></table></div>
</template><script>
export default {data() {return {list: [{ id: 1, name: "奔馳", time: "2020-08-01" },{ id: 2, name: "寶馬", time: "2020-08-02" },{ id: 3, name: "奧迪", time: "2020-08-03" },],};},methods: {del(index) {// 刪除按鈕 - 得到索引, 刪除數組里元素this.list.splice(index, 1);},},
};
</script>

寫在最后

? $原創不易，還希望各位大佬支持一下\textcolor{blue}{原創不易，還希望各位大佬支持一下}$

👍 $點贊，你的認可是我創作的動力！\textcolor{green}{點贊，你的認可是我創作的動力！}$

?? $收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}$

?? $評論，你的意見是我進步的財富！\textcolor{green}{評論，你的意見是我進步的財富！}$