Vue2+Vue3學習筆記

Vue基礎介紹

下載并安裝vue.js

https://v2.cn.vuejs.org/https://v2.cn.vuejs.org/

https://v3.cn.vuejs.org/ 會重定向到Vue.js - 漸進式 JavaScript 框架 | Vue.jsVue.js - 漸進式的 JavaScript 框架https://cn.vuejs.org/

從v2過渡到v3

在F盤創建v2+v3學習筆記

并用VSCODE打開

第一個VUE程序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一個Vue程序</title><!-- 引入Vue.js 直接下載并用 <script> 標簽引入，Vue 會被注冊為一個全局變量。 --><script src="../js/vue.js"></script>
</head><body><div id="app"></div><script>// 創建一個簡單的 Vue 實例/*第一步：創建Vue實例1. 為什么要用 new Vue()，直接調用 Vue() 函數不行嗎？不行，因為直接調用 Vue() 函數，不創建實例的話，會出現以下錯誤：Vue is a constructor and should be called with the `new` keyword2. 關于 Vue 構造函數的參數：options？options 翻譯為選項。options 翻譯為多個選項。Vue框架要求這個 options 參數必須是一個純粹的 JS 對象：{}在 {} 對象中可以編寫大量的 key:value 對。一個 key:value 對就是一個配置項。主要是通過 options 這個參數來給 Vue 實例指定多個配置項。3. 關于 template 配置項：template 翻譯為：模板。template 配置項用來指定什么？用來指定模板語句，模板語句是一個字符串形式的。什么是模板語句？ 模板語句里可以有{{}}Vue 框架自己制定了一些具有特殊含義的特殊符號。Vue 的模板語句是 Vue 框架自己搞的一套語法規則。我們寫 Vue 模板語句的時候，不能亂寫，要遵守 Vue 框架的模板語法規則。模板語句可以是一個純粹的 HTML 代碼，也可以是 Vue 中的特殊規則。也可以是 HTML 代碼 + Vue 的特殊規則。*/var app = new Vue({template: '<h1>hhhh</h1>'})//  第二步：$mount方法 將vue實例 掛載 到指定的元素上app.$mount('#app')</script>
</body></html>

?直接點的寫法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一個Vue程序</title><!-- 引入Vue.js 直接下載并用 <script> 標簽引入，Vue 會被注冊為一個全局變量。 --><script src="../js/vue.js"></script>
</head><body><div id="app">{{message}}</div><script>var app = new Vue({el:'#app',data:{message:'Hello Vue'}    })</script>
</body></html>

第二個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><script src="../js/vue.js"></script>
</head><body><!-- 指定掛載位置 --><div id="app"></div><!-- Vue程序 --><script>/*關于template配置項：1. template后面指定的是模板結構，但是模板結構的行為只有留一個替補位。2. 只要data中的數據發生變化，模板中的{{}}一定會重新賦值。（只要data變，template就會重新解析，重新渲染）3. 使用template配置項目,指定掛載單位的元素會被替換,且template中的內容只能有一個根元素。*/new Vue({// 傳統的// template: '<h1>{{msg}}</h1><h1>動力節點老杜</h1>',template: `<div><h1>{{msg}}</h1><h1>{{name}}</h1></div>`,data: {msg: 'Hello Vue!!',name: '動力節點老杜！！'}}).$mount("#app")</script>
</body></html>

第三個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><script src="../../js/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><script>/*不適用template,效果是一樣的*/var app=new Vue({el:  '#app',data:{msg:'Hello Vue!'},})</script></body>
</html>

解決控制臺提示問題

就是說你在開發模式下

第一種方式引入生產環境的js即可

第二種方式使用Vue全局配置

偶爾會失效

Vue Devtools插件安裝

可視化地查看 Vue 應用內部的結構

然后把版本7的插件關閉或者移除

簡單使用Vue devtools

暗的時候,說明前端不是Vue寫的? ?亮的時候就是Vue寫的

F12可以看到多了Vue選項卡

一個app下可能有多個組件? Root是根組件? ?注意有時候數據含有中文時候第三個數據有可能顯示不出來,可能插件對于中文不是很友好

Vue實例和容器的關系:1V1

容器，指的是 HTML 頁面中，Vue 要控制的那個元素。

上面的例子中

<div id="app"></div>

這里的 <div id="app"></div> 就是Vue實例的容器。
Vue 程序啟動后，會接管這個 div，然后在這個范圍內操作頁面、渲染數據、綁定事件。?

代碼示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue實例和容器關系:一夫一妻制</title><script src="../js/vue.js"></script>
</head><body><div id="app"></div><div id="app2"></div><script>var app = new Vue({el: '#app',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})var app2 = new Vue({el: '#app2',data: {msg: 'Hello Vue!'},template: `<div><h1>{{msg}}</h1></div>`})</script></body></html>

Vue核心技術

模板語法之插值表達式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板語法之插值語法{{}}</title><script src="../js/vue.js"></script>
</head><body><div id="app"><h1>{{ name }}</h1><h2>{{ age }}</h2></div><script>/*在 Vue 中，data里的每一個屬性（比如 name 和 age）都會被單獨跟蹤（響應式）。當你修改 age 時，Vue 只會重新渲染那些用了 {{age}} 的地方的DOM節點。用到 {{name}} 的部分，因為 name 沒有變化，Vue 就不會重新渲染這部分 DOM。*/var app = new Vue({el: '#app',data: {name: '張三',age: 18}})</script>
</body></html>

模板語法之指令 v-xxx

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02.模板語法之指令V-XXX</title><script src="../js/vue.js"></script>
</head><body><!--指令	功能簡述v-text	設置文本內容v-html	設置 HTML 內容v-show	控制元素顯示/隱藏（通過 display）v-if / v-else-if / v-else	條件判斷渲染v-for	遍歷數組或對象v-on	綁定事件監聽，比如點擊v-bind	動態綁定屬性（如 src、href）v-model	雙向數據綁定（表單控件）v-slot	插槽（子組件插入內容）v-pre	跳過編譯，直接原樣輸出v-cloak	避免 Vue 未編譯時閃爍v-once	只渲染一次，之后數據改變也不更新--><!-- 準備容器 --><div id="app"><!-- v-text：設置文本內容 --><h2 v-text="textMsg"></h2><!-- v-html：設置 HTML 內容 --><div v-html="htmlMsg"></div><!-- v-show：通過 display 顯示/隱藏元素 --><p v-show="isShow">v-show 顯示的內容</p><!-- v-if / v-else-if / v-else：條件渲染 --><div v-if="score >= 90">優秀</div><div v-else-if="score >= 60">及格</div><div v-else>不及格</div><!-- v-for：遍歷列表 --><ul><li v-for="(item, index) in list" :key="index">{{ item }} &nbsp {{index}}</li></ul><!-- v-on：綁定事件 --><button v-on:click="clickMe">點擊按鈕</button><hr>hr是分割線<hr><br>br是換行<br><!-- v-bind：動態綁定屬性 --><img v-bind:src="imgUrl" alt="圖片示例" width="200"><br><!-- _self	默認值，在當前窗口/標簽頁打開鏈接	本頁面跳轉_blank	在新窗口/新標簽頁打開鏈接	新頁面打開，不影響當前頁面_parent	在父框架（iframe 父窗口）打開鏈接	少用，主要用于嵌套頁面_top	在最頂層框架打開鏈接（跳出所有 iframe）	少用，跳出多層嵌套其他自定義名字（如 frameName）	打開到指定的 <iframe> 窗口	用于多窗口控制（高            級用法）--><a v-bind:href="url" target="_blank">點擊跳轉到百度</a><!-- v-model：表單雙向綁定 --><input type="text" v-model="inputValue"><p>你輸入了：{{ inputValue }}</p><!-- v-slot：插槽 (基礎用法) --><child-component><template v-slot:default><p>我是插入到子組件里的內容</p></template></child-component><!-- v-pre：跳過編譯 --><h1>下面的{{}}表達式不會被解析</h1><div v-pre>{{ textMsg }}</div><!-- v-cloak：防止閃現未編譯的 Mustache 標簽 --><div v-cloak>{{ cloakedText }}</div><!-- v-once：只渲染一次 --><h2 v-once>{{ onceText }}</h2></div><script>Vue.component('child-component', {template: '<div><slot></slot></div>'});new Vue({el: '#app',data: {textMsg: 'Hello v-text',htmlMsg: '<strong style="color: red;">Hello v-html</strong>',isShow: true,url: 'https://www.baidu.com',score: 75,list: ['蘋果', '香蕉', '橘子'],imgUrl: 'https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg',inputValue: '',cloakedText: '這段文字被 v-cloak 控制',onceText: '只渲染一次的內容'},methods: {clickMe() {alert('按鈕被點擊了！');}}});</script></body></html>

v-bind說明

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="app"><!-- v-bind 指令后面的參數屬性可以隨便寫(語法是通過的,但是該標簽里有沒有該屬性,是否被瀏覽器識別就是問題了) 頁面上不會展示任何內容雖然可以隨便寫,但是瀏覽器識別不了,就沒有意義--><span v-bind:xyz="msg"></span><span xyz="msg"></span></div><script>/*v-bind 指令詳解1. 這個指令是干啥的？它可以讓 HTML 標簽的某個屬性的值產生動態的效果。2. v-bind 指令的語法格式：<HTML 標簽 v-bind:參數 = "表達式"></HTML 標簽>3. v-bind 指令的編譯原理？編譯前：<HTML 標簽 v-bind:參數 = "表達式"></HTML 標簽>編譯后：<HTML 標簽 參數 = "表達式的執行結果"></HTML 標簽>注意兩項：第一：在編譯的時候 v-bind 后面的 “參數名” 會被編譯為 HTML 標簽的 “屬性名”第二：表達式會關聯 data，當 data 發生改變之后，表達式的執行結果就會發生變化。所以，連帶的就會產生動態效果。*/new Vue({el: '#app',data: {msg: 'Hello Vue!'}})</script>
</body></html>

v-model說明

????????v-bind 和 v-model 的區別和聯系
? ? ? ? 1. v-bind單向綁定,v-model雙向綁定
? ? ? ? 2. v-model只能使用在
? ? ? ? ? ? <input> ?
? ? ? ? ? ? <select>
? ? ? ? ? ? <textarea>
? ? ? ? ? ? components

<!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>v-model指令詳解</title><!-- 安裝 Vue --><script src="../js/vue.js"></script>
</head><body><!-- v-bind 和 v-model 的區別和聯系1. v-bind單向綁定,v-model雙向綁定2. v-model只能使用在<input>  <select><textarea>components--><!-- 準備一個容器 --><div id="app"><!-- v-bind 指令 --><input type="text" v-bind:value="name1"><br><!-- v-model 指令 --><input type="text" v-model:value="name2"><br><!-- v-model 指令 --><input type="text" v-model="name3"></div><!-- vue 程序 --><script>new Vue({el: '#app',data: {name1: 'zhangsan',name2: 'wangwu',name3: 'lisi'}})</script></body></html>

簡述前端MVVM分層思想

<!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>初識MVVM分層思想</title><script src="../js/vue.js"></script>
</head><body><!-- V --><div id="app">{{message}}</div><!-- 1. MVVM 是什么？M：Model（模型/數據）V：View（視圖）VM：ViewModel（視圖模型），VM 是 MVVM 中的核心部分。（它起到一個核心的非常重要的作用。）MVVM 是目前前端開發領域當中非常流行的開發思想。（一種架構模式。）目前前端的大部分主流框架都實現了這個 MVVM 思想，例如 Vue、React 等。2. Vue 框架遵循 MVVM 嗎？雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發。Vue 框架本身也是符合 MVVM 思想的。3. MVVM 模型當中倡導了 Model 和 View 進行分離，為什么要分離？假如 Model 和 View 不分離，使用最原始的原生的 JavaScript 代碼寫項目：如果要數據發生任意的改變，接下來我們需要編寫大量繁瑣的操作 DOM 元素的 JS 代碼。將 Model 和 View 分離之后，出現了一個核心 VM，這個 VM 把所有的臟活累活給做了。也就是說：當 Model 發生改變之后，VM 自動去更新 View。當 View 發生改動之后，VM 自動去更新 Model。我們再也不需要編寫操作 DOM 的 JS 代碼了。
--><script>//vue實例VMvar app = new Vue({el: '#app',//Mdata: {message: 'Hello Vue!'}})</script>
</body></html>

Vue實例的屬性

<!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>Vue實例的屬性</title><script src="../js/vue.js"></script>
</head><body><!-- 1. 通過 Vue 實例都可以訪問哪些屬性？(通過 app 都可以 app.什么)Vue 實例中的屬性很多，有的是以 $ 開頭，有的是以 _ 開頭。所有以 $ 開頭的屬性：可以看做是公開的屬性，這些屬性是供程序員使用的。所有以 _ 開頭的屬性：可以看做是私有的屬性，這些屬性是 Vue 框架底層使用的。一般我們程序員很少使用。通過 app 也可以訪問 Vue 實例對象的原型對象上的屬性，例如：app.$delete ...2. app指的是Vue的引用,可以是任何名字  隨便自己定義,不一定要用app, vm  xxx都可以--><div id="app"><h1>{{ msg }}</h1></div><script>let dataObj = {msg: 'Hello Vue!'}const app = new Vue({el: '#app',data: dataObj})// 按說 msg 是 dataObj 對象的屬性console.log('dataObj 的 msg:', dataObj.msg);// 為什么 msg 屬性可以通過 vm 來訪問呢？// 這是因為 Vue 框架底層使用了 “數據代理機制”// 要想搞明白數據代理機制,必須有一個基礎知識點學會:Object.defineProperty()console.log('app 的 msg:', app.msg);</script></body></html>