目錄
局部使用vue框架步驟
簡單案例1
簡單案例2【?結構化賦值語法】
簡單案例3【使用模塊化開發模式】
基本數據的簡單應用，對象的簡單應用
數組的簡單應用
局部使用vue框架步驟
1 引用 vue框架的核心文件和 涉及ES6語法的文件
注意：這里文件，我建議先下載到本地，在應用到文件中
vue核心文件
鏈接：
https://unpkg.com/vue@3.5.13/dist/vue.global.js
https://unpkg.com/vue@3/dist/vue.esm-browser.js操作同上
2 在創建簡單的web項目，在html文件的請求頭中引用
3 創建createApp函數使用，
4 在html文件請求頭中使用插值表達式引用函數中定義的變量
簡單案例1
案例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head>
<body><div id="app"> {{ message }} </div></body>
<script>Vue.createApp({setup() {return {message: 'Hello Vue!'}}}).mount('#app')
</script>
</html>運行啟動，選中合適的瀏覽器打開
簡單案例2【?結構化賦值語法】
注意：簡單案例2 在案例1 的基礎上進行了更新
結構化賦值語法
關于 “結構化賦值語法”?
上一個案例，使用createApp函數 ，使用Vue.createApp 這種形式。這種，可以看似成java中 類名.靜態方法形式 進行理解。
基于?重復使用Vue.某函數這樣的，在語法上進行了優化 使用?結構化賦值語法
在前端 使用?結構化賦值語法，是把Vue抽離出來，減少重復使用Vue.某函數這樣的，只要聲明一次 該函數屬于Vue,后期使用可以直接調用該函數！
如：Vue.createApp({....})==const { createApp }=Vue;?createApp({....}
案例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head>
<body><div id="app"> {{ message }} </div></body>
<script>// 結構化賦值語法const { createApp }=VuecreateApp({setup() {return {message: 'Hello Vue!!!!!!!!!!!!!'}}}).mount('#app')
</script>
</html>運行啟動，選中合適的瀏覽器打開
簡單案例3【使用模塊化開發模式】
注意：簡單案例3 在案例2 的基礎上進行了更新
使用模塊化開發模式
關于 “ 使用模塊化開發模式”
使用模塊化開發模式有兩步
- 1 在script 標簽中，添加type屬性，屬性值為module
- 2 導入es6文件
案例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./vue.global.js"></script>
</head>
<body><div id="app"> {{name}} </div><script type="module">// 模塊化開發模式import{reactive,createApp,ref} from './vue.esm-browser.js'createApp({setup(){return{name: 'Hello Vue'}}}).mount('#app')</script>
</body>
</html>測試結果
分析：
你會發現它拋出了一個錯誤，因為 ES 模塊不能通過 file:// 協議工作，也即是當你打開一個本地文件時瀏覽器使用的協議。
由于安全原因，ES 模塊只能通過 http:// 協議工作，也即是瀏覽器在打開網頁時使用的協議。為了使 ES 模塊在我們的本地機器上工作，我們需要使用本地的 HTTP 服務器，通過 http:// 協議來提供 index.html。
解決辦法：下載插件：Live Server(本地服務器）
在擴展中找到?Live Server，下載，重啟使用
重啟成功后，鼠標右擊看到
基本數據的簡單應用，對象的簡單應用
ref函數：用于基本數據類型的定義
reactive函數 常用于對象的定義
注意：
1 無論是對象還是基本數據類型都被使用在setup函數中
2 在return 中返回出去，（可以理解為java中return方法返回值）
案例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./vue.global.js"></script>
</head>
<body><div id="app"> {{name}} <h5>名字：{{objData.name}}，年齡：{{objData.age}}</h5><p>{{a}}</p></div><script type="module">// 模塊化開發模式import{reactive,createApp,ref} from './vue.esm-browser.js'createApp({setup(){const objData = reactive({"name": 'objData','age':20})const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")return{name: 'Hello Vue',objData,a}}}).mount('#app')</script>
</body>
</html>測試結果
數組的簡單應用
常在return 中定義數組元素
示例
export default {data() {return {fruits: ["蘋果", "香蕉", "橙子"]};}
};案例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <title>Document</title><script src="./vue.esm-browser.js"></script> --><script src="./vue.global.js"></script>
</head>
<body><div id="app"> {{name}} <h5>名字：{{objData.name}}，年齡：{{objData.age}}</h5><p>{{array[0]}},{{array[1]}},{{array[2]}}</p><p>{{a}}</p></div><script type="module">// 模塊化開發模式import{reactive,createApp,ref} from './vue.esm-browser.js'createApp({setup(){const objData = reactive({"name": 'objData','age':20})const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")return{name: 'Hello Vue',objData,array:[11,22,33],a}}}).mount('#app')</script>
</body>
</html>測試結果
