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> ~~~