Vue
- 1、創建一個 html 源代碼
- 2、引入 Vue
- 3、html 檔案的簡單使用及 Vue 的體驗
1、創建一個 html 源代碼
- 第一步：桌面新建檔案夾并拖入到此軟體進行打開操作
- 第二步：右鍵創建檔案（以 .html 為后綴）
- 第三步：英文輸入法狀態下，輸入 !（感嘆號）并按回車即可出現如下代碼
2、引入 Vue
引入 Vue 有二種方法（參考官方教程）
- 其一：引入本地的 vue.js 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 加載本地的 vue.js 檔案 -->
<script src="vue.js"></script>
</head>
<body>
</body>
</html>
- 其二：引入線上的 vue.js 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 加載線上的 vue.js 檔案 -->
<!-- 1. 最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 2. 對于生產環境, 推薦鏈接到一個明確的版本號和構建檔案, 以避免新版本造成的不可預期的破壞 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
</body>
</html>
3、html 檔案的簡單使用及 Vue 的體驗
- html 源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 讓瀏覽器上面顯示字串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1. 固定結構 -->
<div id="box">
<!-- 2. 一級標題 -->
<h1>i love you</h1>
<!-- 3. 普通文本 -->
<a>da zhu zhu</a>
<!-- 4. 二級標題 -->
<h2>me too</h2>
</div>
</body>
</html>
- 使用 Vue 來使資料顯示出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<!-- 1. 以標題 1 顯示文本 -->
<h1>hello world</h1>
<!-- 2. 只顯示 msg (因為當作成字串) -->
<h1>msg</h1>
<!-- 3. 將資料展示在頁面上, 需要借助運算式,語法:{{變數名}} -->
<h1>{{msg}}</h1>
</div>
<script>
// 4. 創建 vue 物件
var vm = new Vue({
// 5. 在 {} 中填寫 vue 實體的配置項
el:"#box",
data:{
msg:"hello yong"
}
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/278021.html
標籤：其他
上一篇：php反序列化字串逃逸