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

image-20211216123133686

或者在我上傳的資源里去找。

實際上還是本地加載比線上要快很多。下載下來放到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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM