关于前端:vue3的介绍安装创建一个vue实例

前言：这一章次要是vue的介绍、装置、以及如何创立一个vue实例。

一、vue介绍

vue3中武官网：倡议先本人看官网。

https://v3.cn.vuejs.org/

vue是渐进式框架，渐进式指的就是能够在你的我的项目曾经有js，jquery等框架后还能够嵌入vue框架。能够只用我的一部分，而不是一个我的项目必须全副由我开发。

装置

将 Vue.js 增加到我的项目中次要有四种形式：

1.以 CDN 包的模式导入。

<script src="https://unpkg.com/vue@next"></script>

那么cdn是什么？

CDN 是vue文件在线上的地址。例如https:.../vue..

咱们在拜访我的项目时，首先通过域名找到服务器的ip（一台电脑/服务器），看看你的我的项目是什么web框架（例如django)，而后找到调配的路由，而后就找到了vue.js文件。所以说是要有一个过程的，那么cdn的作用就是减速这个过程。

CDN可能减速用户的访问速度。

咱们的服务器分为华南、华北等几个区域，如果用户是华北区的，那么要拜访华北区的服务器比拟快，当用户第一次拜访华北区的服务器，那么服务器会把数据缓存在华北（边缘）服务器上，拜访我的项目慢理论是拜访我的项目资源（图片、视频等）的快慢。那么下一个人拜访的时候间接读取这个华北服务器的缓存，所以访问速度会放慢。

2.下载 js 文件并自行托管。

官网没有给出js下载地址。咱们能够把上边的cdn在线地址放到浏览器运行，ctrl+s保留就是vue.js.

https://unpkg.com/vue@next

或者在我上传的资源里去找。

实际上还是本地加载比线上要快很多。下载下来放到js里引入即可。

3.应用 npm 装置它。

这个咱们临时不必。利用大型项目能够用npm。

有空再写。可在我的vue专栏看到这篇。

4.应用官网的 CLI 来构建一个我的项目。

它为古代前端工作流程提供了性能完备的构建设置 (例如，热重载、保留时的提醒等等)。

有空再写。可在我的vue专栏看到这篇。

应用vue开发的益处

1.因为vue采纳渐进式框架结构，MVVM（model view viewmodel)，数据层与视图层拆散，（响应式框架）通过vm把数据层的数据渲染到指定的标签外面。

2.响应式框架，数据层与视图层拆散，数据层数据变了，视图层的渲染就变了，缩小了dom操作，减少了页面加载速度。

3.组件化开发。

简洁来说就是：体积小，数据双向绑定，有很多成熟的组件。

二、根底

1.创立vue实例

步骤：

1）下载并引入vue.js

2）body里创立id=app 的div

3）Script 外面创立vue实例，关联容器，Vue.createApp({}).mount('#app')

数据层：

const data = { a: 1 }

视图层：

const app={

data() {

return data

}，

}

创立vue实例：

const vm =Vue.createApp(app)

关联app容器

vm.mount('#app')

或者合起来写：

const data = { a: 1 }

const vm = Vue.createApp({

data() {

return data

}}).mount('#app')

运行模板：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="js/vue.global.js"></script>    </head>    <body >        <div id="app">            Hello Vue        </div>    </body>    <script type="text/javascript">            const data = {                            }                        const vm = Vue.createApp({              data() {                return data              },            })            vm.mount('#app')                    </script></html>