Vue3.x --基本功能快速預覽 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # Vue3.x --基本功能快速預覽 ~~~ 1.采用cdn形式進行案例，案例根據官方文檔閱讀整理，只對和'3.x'改動地方會做特殊說明，其他內容均需要你具備'2.x' 基本知識 ~~~ >[info] ## 創建Vue 實例 ~~~ 1.'2.x' 和 '3.x' 整體創建形式有了很大的更改，在'3.x' 不在使用通過'new Vue' 形式創建Vue 實例,而是改用 'createApp'，并且'3.x' 不在是通過'el' 和'$mount' 將數據渲染和dom綁定，而是通過新的'mount' 形式 2.'3.x' data 組件選項聲明不再接收純 JavaScript object，而需要 function 聲明 ~~~ >[danger] ##### 2.x 創建的形式 ~~~ 1.Vue2.x 創建通過new Vue 形式，綁定dom有兩種形式一種是內部的'el' 屬性，一種是通過'$mount' 進行綁定 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document2</title> </head> <body> <div id="app"> <div> Counter:{{counter}} -- 計數功能 </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script> <script> var vm = new Vue({ // el:'#app', 或者使用el形式不使用$mount data: { counter: "10" } }).$mount('#app') </script> </body> </html> ~~~ >[danger] ##### 3.x ~~~ 1.'3.x' 通過'createApp' 和'mount',并且data 只能是function形式 ~~~ ~~~ <!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 id="app"> <div> Counter:{{counter}} -- 計數功能 </div> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {createApp} = Vue const Counter = { data() { return { counter: 10 } } } createApp(Counter).mount('#app') </script> </body> </html> ~~~ >[info] ## 常用的基本使用 ~~~html <!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 id="app">  <span :title="msg">鼠標停留</span><br/>  <button @click="reverseMsg">{{buttonText}}</button><br/>  {{inputMsg}} <input v-model="inputMsg"/><br/>  <span v-if="flag">v-if 控制顯示隱藏</span><br/>  <ul> <li v-for="todo in todos">{{todo.text }}</li> </ul> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {createApp} = Vue const Counter = { data() { return { msg: "使用指令", buttonText:'增加點擊事件反轉title', inputMsg:'雙向綁定', flag:true, todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }, methods: { reverseMsg(){ this.buttonText = this.buttonText.split('').reverse().join('') } } } createApp(Counter).mount('#app') </script> </body> </html> ~~~ >[info] ## 組件 ~~~ 1.'2.x' 和'3.x'創建全局組件上 1.1.'2.x'在注冊之后可以用在任何新創建的 Vue 根實例全局組件，產生這種效果的原因是都從同一個 'Vue' 構造函數創建的每個根實例共享相同的全局配置 1.2.'2.x' 這種多個'vue實例共享'產生的問題，全局配置很容易意外地污染其他測試用例 2.通過下面案例注意，需要'3.x' 最后在鏈式調用的時候綁上'mount'即 const app = createApp(Counter) app.component({...}).mount(...) ~~~ >[danger] ##### 通過代碼解釋 * vue2.x ~~~ // 這會影響兩個根實例 Vue.component({ /* ... */ }) const app1 = new Vue({ el: '#app-1' }) const app2 = new Vue({ el: '#app-2' }) ~~~ * vue3.x ~~~ import { createApp } from 'vue' const app = createApp(Counter) app.component({ /* ... */ }) ~~~ >[danger] ##### 2.x 創建案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document2</title> </head> <body> <div id="app"> <ul> <todo-item v-for='todo in todoLs' :todo=todo /> </ul> <my-Com></my-Com> </div>  <template id="my-com"> <h1>全局組件</h1> </template> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script> <script> // vue2.x 是在Vue 上創建 Vue.component('todo-item',{ props: { todo:Object }, template:`<li>{{todo.text}}</li>` }) // 創建組件模板在html template聲明 Vue.component('myCom',{ template:'#my-com' }); var vm = new Vue({ data: { todoLs: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }).$mount('#app') </script> </body> </html> ~~~ >[danger] ##### 3.x 創建案例 ~~~ 1.'3.x' 是通過'createApp' 創建返回'應用實例' 調用component 和'2.x' 在vue構造函數增加'component' 是不同的 ~~~ ~~~ <!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 id="app"> <ul> <todo-item v-for='todo in todoLs' :todo=todo /> </ul> <my-Com></my-Com> </div>  <template id="my-com"> <h1>全局組件</h1> </template> <script src="https://unpkg.com/vue@next"></script> <script> const {createApp} = Vue const Counter = { data() { return { todoLs: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }, } const app = createApp(Counter) // 創建組件 app.component('todo-item',{ props: { todo:Object }, template:`<li>{{todo.text}}</li>` }) // 創建組件模板在html template聲明 app.component('myCom',{ template:'#my-com' }); app.mount('#app') </script> </body> </html> ~~~