1. 概述
老話說的好：沒有別人混的好，是因為自己能力欠佳，因此越是混的差，越要努力提升自己。
言歸正傳，現在 jquery 用的越來越少，大部分公司都使用 VUE 技術，今天我們也來聊聊 VUE3。
2. 安裝開發工具 Visual Studio Code
前端頁面通常使用 Visual Studio Code 工具進行開發。
可以到官網進行下載並安裝：https://code.visualstudio.com/
3. VUE3 入門
3.1 引入 VUE3
在 HTML 頁面引入 <script src="https://unpkg.com/vue@next"></script> 即可。
<!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>title</title> <!-- 引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> </body>
3.2 在元素中追加內容
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 template: '<div>hello 追風人!</div>' }).mount('#myDiv'); // 綁定id為myDiv的元素 </script>
在 id 為 myDiv 的元素中，追加 <div>hello 追風人!</div>
3.3 元素綁定數據
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 data() { return { content: 'hello' // content 的值會替換 {{content}} 的值 } }, template: '<div>{{content}}</div>' }).mount('#myDiv'); // 綁定id為myDiv的元素
content 對應的值，會顯示在追加的元素中，替換 {{content}}
3.4 動態修改元素的內容
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 data() { return { content: 'hello 追風人' // content 的值會替換 {{content}} 的值 } }, methods : { myClick() { this.content = 'hello zhuifengren'; } }, template: ` <div> {{content}} <button v-on:click="myClick">修改文字</button> </div> ` }).mount('#myDiv'); // 綁定id為myDiv的元素 </script>
增加按鈕元素，在按鈕中使用 v-on:click 為按鈕增加 onClick 事件，在 methods 中增加事件方法，事件方法中修改數據 content 的值，元素中 {{content}} 的值會同步變化
點擊按鈕前：
點擊按鈕后：
3.5 動態隱藏或顯示元素
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 data() { return { isShow: true } }, methods : { myClick() { this.isShow = !this.isShow } }, template: ` <div> <span v-if="isShow">hello 追風人</span> <button v-on:click="myClick">顯示/隱藏</button> </div> ` }).mount('#myDiv'); // 綁定id為 myDiv 的元素
在元素中使用 v-if="數據" 來控制元素是否顯示，數據為 true 顯示，false 為不顯示
顯示：
隱藏：
3.6 遍歷數據集合展示列表元素
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 data() { return { list: ['hello', 'world', 'zhuifengren'] } }, template: ` <ul> <li v-for="(item, index) of list">{{item}} {{index}}</li> </ul> ` }).mount('#myDiv'); // 綁定id為 myDiv 的元素 </script>
3.7 獲得input元素的值
<body> <div id="myDiv"></div> </body> <script> Vue.createApp({ // 創建一個vue實例 data() { return { inputValue : '', } }, methods: { myClick() { alert(this.inputValue); } }, template: ` <div> <input v-model="inputValue" /> <button v-on:click="myClick">顯示input</button> </div> ` }).mount('#myDiv'); // 綁定id為 myDiv 的元素 </script>
通過 v-model="數據"，綁定數據和input元素
4. 綜述
今天聊了一下 VUE3 入門，希望可以對大家的工作有所幫助
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java干貨。
5. 個人公眾號
追風人聊Java，歡迎大家關注
