vue3知识点1.介绍、如何创建vue实例
前⾔：这⼀章主要是vue的介绍、安装、以及如何创建⼀个vue实例。
⼀、vue介绍
vue3中⽂官⽹：建议先⾃⼰看官⽹。
vue是渐进式框架，渐进式指的就是可以在你的项⽬已经有js，jquery等框架后还可以嵌⼊vue框架。可以只⽤我的⼀部分，⽽不是⼀个项⽬必须全部由我开发。
安装
将 Vue.js 添加到项⽬中主要有四种⽅式：
1.以的形式导⼊。
<script src="unpkg/vue@next"></script>
那么cdn是什么？
CDN 是vue⽂件在线上的地址。例如https:…/vue…
我们在访问项⽬时，⾸先通过域名到服务器的ip（⼀台电脑/服务器），看看你的项⽬是什么web框架（例如django)，然后到分配的路由，然后就到了vue.js⽂件。所以说是要有⼀个过程的，那么cdn的作⽤就是加速这个过程。
CDN能够加速⽤户的访问速度。
我们的服务器分为华南、华北等⼏个区域，如果⽤户是华北区的，那么要访问华北区的服务器⽐较快，当⽤户第⼀次访问华北区的服务器，那么服务器会把数据缓存在华北（边缘）服务器上，访问项⽬慢实际是访问项⽬资源（图⽚、视频等）的快慢。那么下⼀个⼈访问的时候直接读取这个华北服务器的缓存，所以访问速度会加快。
2.下载 js ⽂件并。
django项目实例
官⽹没有给出js下载地址。我们可以把上边的cdn在线地址放到浏览器运⾏，ctrl+s保存就是vue.js.
或者在我上传的资源⾥去。
实际上还是本地加载⽐线上要快很多。下载下来放到js⾥引⼊即可。
3.使⽤安装它。
这个我们暂时不⽤。应⽤⼤型项⽬可以⽤npm。
有空再写。可在我的vue专栏看到这篇。
4.使⽤官⽅的来构建⼀个项⽬。
它为现代前端⼯作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提⽰等等)。
有空再写。可在我的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实例，关联容器，ateApp({}).mount(’#app’)数据层：
const data = { a: 1 }
视图层：
const app={
data() {
return data
}，
}
创建vue实例：
const vm =ateApp(app)
关联app容器
或者合起来写：
const data = { a: 1 }
const vm = ateApp({
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 = ateApp({
data() {
return data
},
})
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。