前言:這一章主要是vue的介紹、安裝、以及如何創建一個vue實例。
一、vue介紹
vue3中文官網:建議先自己看官網。
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.
或者在我上傳的資源里去找。
實際上還是本地加載比線上要快很多。下載下來放到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>