Vue3.x –基本功能快速预览
最后更新于：2022-04-02 08:13:00
[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' 进行绑定
~~~
~~~
Document2
~~~
>[danger] ##### 3.x
~~~
1.'3.x' 通过'createApp' 和'mount',并且data 只能是function形式
~~~
~~~
Document
~~~
>[info] ## 常用的基本使用
~~~html
Document
Document2
Document
';
Counter:{{counter}} -- 计数功能
Counter:{{counter}} -- 计数功能
鼠标停留
{{inputMsg}}
v-if 控制显示隐藏
~~~
>[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 创建案例
~~~
{{inputMsg}}
v-if 控制显示隐藏
- {{todo.text }}