掛載#app
<div id="app"></div> <script src="../js/vue.js"></script> <script> Vue.createApp({ template: `<h2>你好啊, 李銀河</h2>` }).mount("#app"); </script>
問題一：在箭頭函數中不綁定this，函數調用this為window，（bind綁定不修改原函數，返回一個新函數）
data: function() { return { message: "Hello World", counter: 100 } //data在vue3必須是個函數，然后返回一個對象
下載源碼：第一節課1：56：00 未懂第二節課43分鍾
snippet generator (snippet-generator.app)生成代碼片段的網站
//methods掛載@click時，在template中掛載@click="shift" ,然后在methods中定義shift的函數。 <template id="why"> <button @click='shift'>切換</button> </template> methods: { shift() { this.isshow = !this.isshow } }
v-once用於指定元素或者組件只渲染一次：
當數據發生變化時，元素或者組件以及其所有的子元素將視為靜態內容並且跳過；
該指令可以用於性能優化； (只在第一個加載時渲染，后續操作不改變v-once組件的元素)
很少用 v-test
v-pre:不渲染這個標簽，顯示最原始的值
v-bind:動態綁定
<div id="what"></div>
<template id='why'>
<h2>{{message}}</h2>
<a :href="aaa">百度一下</a>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#why',
data: function () {
return { message: "hello world", aaa: 'https://www.baidu.com' }
},
methods: {
}
}
Vue.createApp(App).mount('#what')
<style> .active { color: red } </style> <body> <div id="what"></div> <template id='why'> <h2 :class="{active:isActive}">{{message}}</h2> //對象語法：{active ："boolean"} true為綁定 false為不綁定 <a :href="aaa">百度一下</a> <button @click='shift'>切換</button> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#why', data: function () { return { message: "hello world", aaa: 'https://www.baidu.com', isActive: true } }, methods: { shift() { this.isActive = !this.isActive } } } Vue.createApp(App).mount('#what') </script> </body>
動態綁定屬性：v-bind
<div :[name]='value'>123</div> template: '#why', data: function () { return { name: 'zhuyq', value: '666', } },
v-on綁定事件：
div id="app"></div>
<template id="my-app">
<!-- 完整寫法: v-on:監聽的事件="methods中方法" -->
<button v-on:click="btn1Click">按鈕1</button>
<div class="area" v-on:mousemove="mouseMove">div</div>
<!-- 語法糖 -->
<button @click="btn1Click">按鈕1</button>
<!-- 綁定一個表達式: inline statement -->
<button @click="counter++">{{counter}}</button>
<!-- 綁定一個對象 -->
<div class="area" v-on="{click: btn1Click, mousemove: mouseMove}"></div>
<div class="area" @="{click: btn1Click, mousemove: mouseMove}"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
counter: 100
}
},
methods: {
btn1Click() {
console.log("按鈕1發生了點擊");
},
mouseMove() {
console.log("鼠標移動");
}
}
}
v-on參數傳遞
<button @click="btn2Click($event, 'coderwhy', 18)">按鈕2</button> btn2Click(event, name, age) { console.log(name, age, event); }
v-on修飾符
template與v-if結合使用：
<template id="my-app"> <template v-if="isShowHa"> <h2>哈哈哈哈</h2> <h2>哈哈哈哈</h2> <h2>哈哈哈哈</h2> </template> <template v-else> <h2>呵呵呵呵</h2> <h2>呵呵呵呵</h2> <h2>呵呵呵呵</h2> </template> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { isShowHa: true } } }
v-for遍歷
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li> //v-for遍歷對象，value,key，index的順序不能變化 <li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li> //遍歷數組
template和v-for結合使用
<template v-for="(value, key) in info">
<li>{{key}}</li>
<li>{{value}}</li>
<li class="divider"></li>
</template>
計算屬性computed:本質上是有緩存的，當我們多次使用計算屬性時，計算屬性的運算只會執行一次。
計算屬性的實現原理：
計算屬性的setter和getter： 直接調用為getter方法，
computed: { // 計算屬性是有緩存的, 當我們多次使用計算屬性時, 計算屬性中的運算只會執行一次. // 計算屬性會隨着依賴的數據(firstName)的改變, 而進行重新計算. fullName() { console.log("computed的fullName中的計算"); return this.firstName + " " + this.lastName; } },
計算屬性的setter：
fullName: { get: function() { rxeturn this.firstName + " " + this.lastName; }, set: function(newValue) { console.log(newValue); const names = newValue.split(" "); this.firstName = names[0]; this.lastName = names[1]; } }
偵聽器watch:跟鍵值對
<template id="my-app"> 您的問題: <input type="text" v-model="question"> <!-- <button @click="queryAnswer">查找答案</button> --> </template> <script src="../js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { // 偵聽question的變化時, 去進行一些邏輯的處理(JavaScript, 網絡請求) question: "Hello World", anwser: "" } }, watch: { // question偵聽的data中的屬性的名稱 // newValue變化后的新值 // oldValue變化前的舊值 question: function(newValue, oldValue) { console.log("新值: ", newValue, "舊值", oldValue); this.queryAnswer(); } }, methods: { queryAnswer() { console.log(`你的問題${this.question}的答案是哈哈哈哈哈`); this.anwser = ""; } } }
默認情況下偵聽器只會偵聽數據本身的改變（內部發生的變化是不能偵聽的）
watch: { // 默認情況下我們的偵聽器只會針對監聽的數據本身的改變(內部發生的改變是不能偵聽) // info(newInfo, oldInfo) { // console.log("newValue:", newInfo, "oldValue:", oldInfo); // } // 深度偵聽/立即執行(一定會執行一次) info: { handler: function(newInfo, oldInfo) { console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name); }, deep: true, // 深度偵聽 // immediate: true // 立即執行 } },
監聽數組中對象的屬性，在子組件中監聽 20分鍾時講
對象的淺拷貝：只對低層次的鍵值對進行拷貝，對對象內的對象還是保存相同的引用地址
<!-- 2.對象的淺拷貝 --> <script> const info = {name: "why", age: 18, friend: {name: "kobe"}}; const obj = Object.assign({}, info); //創建一個拷貝的新對象，用obj來接收拷貝的對象， // lodash const obj = _.clone(info); // info.name = "kobe"; // console.log(obj.name); //kobe // info.friend.name = "james"; // console.log(obj.friend.name); //james </script>
對象的深拷貝： 先將info借助JSON轉換成字符串 JSON.stringify(info) ,然后將生成的字符串還原 JSON.parse(JSON.stringify(info)) ,從而生成一個新的對象，JSON不能拷貝undefine、function、RegExp
const info = {name: "why", age: 18, friend: {name: "kobe"}};
const obj = JSON.parse( JSON.stringify(info) );
info.friend.name = "james";
console.log('obj.friend.name') //kobe
v-model:在input、textarea、select中創建雙向綁定
首尾
注冊全局組件：
<template id="my-app">
<component-a></component-a>
</template>
<template id="component-a"> <h2>{{title}}</h2> <p>{{desc}}</p> <button @click="btnClick">按鈕點擊</button> </template> //寫模板 const App = { template: "#my-app", }; //根組件 const app = Vue.createApp(App); app.component("component-a", { //創建全局組件 template: "#component-a", data() { return { title: "我是標題", desc: "我是內容, 哈哈哈哈哈", }; }, methods: { btnClick() { console.log("按鈕的點擊"); }, }, }); app.mount("#app"); //掛載app（div）
注冊局部組件：
<template id="my-app">
<h2>{{message}}</h2>
<component-a></component-a>
</template>
<template id="component-a">
<h2>我是組件A</h2>
<p>我是內容, 哈哈哈哈</p>
</template>
const ComponentA = {
template: "#component-a" }
紅色為組件名稱，藍色為組件對象
const App = {
template: '#my-app',
components: {
// key: 組件名稱
// value: 組件對象
ComponentA: ComponentA
},
data() {
return {
message: "Hello World"
}
}
}
webpack5打包圖片
devserve不懂
for of 遍歷屬性值（用於數組）， for in 遍歷屬性（用於對象但只遍歷可枚舉對象）
keep-alive
將import寫成函數形式，打包時會進行分包操作！（對於一些不是立即需要用到的東西，可以進行分包操作）
緩存組件的生命周期
元素上v-model的原理
組件v-model的原理:第13節課 最后部分
全局混入mixin，是在main.js中進行混入 app.mixin({ 這里寫全局mixin})
watch computed 動畫 生命周期