Vue
Vue是遵循MVVW架構模式實作的前端框架
npm匯入路徑：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
MVVM架構 Model資料 View模板 ViewModel處理資料
ES6的常用語法：
變數的定義，var，let，const
- Var 變數的提升，函式作用域 全域作用域，重新定義不會報錯，可以重新賦值
- let 塊級作用域 { }，重新定意會報錯，可以重新賦值
- const 定義不可修改的常量，不可以重新賦值
箭頭函式的this取決于當前的背景關系環境：類似于python的匿名函式
this指當前函式最近的呼叫者，距離最近的呼叫者
解構：
字典解構 {key,key,...} 注：要使用key才行
陣列結構 [x,y,.....]
let obj = {
a:1,
b:2
};
let hobby = ["吹牛", "特斯拉", "三里屯"];
let {a,b} = obj;
let [hobby1,hobby2,hobby3] = hobby;
console.log(a);
console.log(b);
console.log(hobby1);
console.log(hobby2);
console.log(hobby3);
Vue的核心思想是資料驅動視圖
Vue的常用指令
v-text：獲取文本內容
v-html：獲取html內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-text="name"></h2>
<h3 v-text="age"></h3>
<div v-html="hobby"></div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
name:"PDD",
age:18,
hobby:"<ul><li>學習</li><li>刷劇</li><li>Coding</li></ul>"
}
});
</script>
</body>
</html>
v-for：回圈獲取陣列
v-for：回圈獲取字典
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>
<li v-for="(item,index) in one" :key="index">
{{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
course_list:["classname","teacher","student"],
one:[{name:"eric",age:"18",hobby:"music"},
{name:"bob",age:"18",hobby:"dance"}]
}
})
</script>
</body>
</html>
v-bind：自定制顯示樣式，動態系結屬性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.my_app{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{my_app:is_show}">
</div>
<img :src="my_src" alt=""> <!-- v-bind: 可以簡寫為 : -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
is_show:true, //true表示顯示style樣式，false不顯示style樣式
my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg"
}
})
</script>
</body>
</html>
v-on@事件名：事件系結
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<body>
