一、Vue簡介
1.定義
Vue是一個基於JavaScript的漸進式框架。漸進式：可以控制一個頁面的一個標簽、一系列標簽、也可以控制整個頁面，甚至控制整個前台項目
2.vue的優勢
有指令（分支結構，循環結構），復用頁面結構
有實例成員（過濾器、監聽），可以對渲染的數據做二次格式化
有組件（模塊的復用和組合），可以快速搭建頁面
3.三大前端框架
- Angular （龐大）
- React （常用於移動端）
- Vue （吸取兩者優勢、輕量級）文檔是中文
二、Vue環境搭建
"""
1）cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>
2）本地導入
<script src="js/vue.js"></script>
"""
三、掛載點
Vue對象中，el表示掛載點
1.一個掛載點只能控制一個頁面結構
2.掛載點掛在的頁面標簽嚴格建議使用id屬性進行匹配
3.html標簽與body標簽不能作為掛載點
4.可以選擇用變量去接受實例化的vue對象
四、插值表達式
1.空插值表達式 {{ }},需要有空格
2.{{ }}中渲染的變量需要在data中初始化
3.插值表達式可以進行簡單運算
4.插值表達式與其他模版語法沖突時，可以用delimiters自定義
可以將delimiters插值表達式改為標識符為[{ }]。
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : '#app',
data : {
nums:[1,2,3,4]
},
delimiters:['[{','}]']
})
</script>
插值表達式里可以調用屬性、方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='app'>
<p>{{ nums[3] }}</p>
<p>{{ }}</p>
<p>{{ a + b }}</p>
<p>{{ a + b * 2}}</p>
<p>{{ msg.length + a }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : '#app',
data : {
a : 1,
b : 2,
msg : 'hello world',
nums:[1,2,3,4]
},
// delimiters:['[{','}]']
})
</script>
</html>
五、過濾器
1.用實例成員filters來定義過濾器
2.在頁面結構中，用|來標識並調用過濾器
3.過濾方法的返回值就是過濾器過濾后的結果
4.過濾器可以對1~n個變量進行過濾，同時還可以傳入輔助的變量。過濾器方法接收參數時按照傳入的位置從左到右。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ a,10|add|mutilply(10,20)}}</p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : "#app",
data : {
a : 1
},
filters:{
add : function(a,b){
return a + b
},
mutilply : function(a,b){
return a * b
}
}
})
</script>
</html>
# 過濾器可以串聯使用，從左到右執行。上一個過濾器的結果會當做下一個過濾器的參數傳入。如果參數不夠，則參數為undefined。如果參數太多，則多余的參數不會被接收。
<p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
六、文本指令
1.v-*是vue指令，會被vue解析，v-text="num"中的num表示一個變量，如果在data中未定義num，則會報錯。v-text="'num'"，則表示字符串。
2.v-text是原樣輸出渲染內容。
3.v-html可以解析渲染html語法的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
<p v-text="'msg'"></p>
<p v-text="true"></p>
<p v-text="false"></p>
<p v-text="111"></p>
<p v-html="msg_html"></p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el:"#app",
data:{
msg : 'hello world',
msg_html: "<h1>hello world</h1>"
}
})
</script>
</html>
七、js對象內容補充
1.js沒有字典類型，只有自定義對象，可以完全替代字典來使用。
2.js中對象的屬性名，都采用自字符串類型，所以就可以省略字符串的引號
3.對象中屬性值為函數時，稱之為方法，方法可以簡寫為: 方法名(){}
4.如果對象的屬性值是一個變量，且變量名與屬性名相同，則可以簡寫{屬性,}
let obj = {
'name' : "Bob",
'eat' : function(){
console.log("I'm eating...")
}
}
console.log(obj.name,obj['name'])
obj.eat()
簡寫
let obj1 = {
name:'Bob',
eat(){
console.log("I'm eating")
}
}
console.log(obj1.name,obj1['name'])
obj1.eat()
屬性簡寫
let height = 180
let obj2 = {
height,
name:'Bob',
}
console.log(obj2.height,obj2.name)
JS中類的聲明
prototype為類屬性賦值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let obj = {
'name' : "Bob",
'eat' : function(){
console.log("I'm eating...")
}
}
console.log(obj.name,obj['name'])
obj.eat()
// 方法簡寫
let obj1 = {
name:'Bob',
eat(){
console.log("I'm eating")
}
}
console.log(obj1.name,obj1['name'])
obj1.eat()
// 屬性簡寫
let height = 180
let obj2 = {
height,
name:'Bob',
}
console.log(obj2.height,obj2.name)
// js中聲明一個類
class People{
constructor(name) {
this.name = name
}
eat(){
console.log(this.name + " is eating...")
}
}
let obj3 = new People('Kimmy')
let obj4 = new People('David')
console.log(obj3.name,obj3.school)
console.log(obj4.name,obj4.school)
obj3.eat()
obj4.eat()
People.prototype.school = 'OldBoy'
console.log(obj3.name,obj3.school)
console.log(obj4.name,obj4.school)
// 第二種聲明方式
function Student(name){
this.age =18
this.name = name
this.fly = function(){
console.log(this.name + ' is flying')
}
}
let obj5 = new Student('Amy')
let obj6 = new Student('Daming')
console.log(obj5.name,obj5.age)
console.log(obj6.name,obj6.age)
obj5.fly()
obj6.fly()
</script>
</html>
八、js函數內容補充
函數的形參和調用時傳入的實參關系：傳入和接收的參數個數不需要一致，按位置進行賦值，不存在關鍵字參數，多余的實參不會被接收，沒有被賦值的形參會被賦值為undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 函數定義1
function fn1(a,b){
console.log(a+b)
return a + b
}
fn1(1,10)
// 函數定義2
let fn2 = function(a,b){
console.log(a+b)
return a + b
}
fn2(1,10)
// 箭頭函數
let fn3 = (a,b)=>{
console.log(a+b)
return a + b
}
fn3(1,10)
// 箭頭函數只有一條語句時可以省去{}
let fn4 = (a,b)=>console.log(a*b +10)
fn4(1,10)
// 當形參只有一個時，可省略()
let fn5 = a => console.log(a*a)
fn5(10)
console.log(5)
console.log(10+ '5')
console.log('55555')
// 快速類型轉換 字符串 ---> 數字類型
console.log(+'55555')
</script>
</html>
九、事件指令
* 一、數據驅動
* 1）操作是一個功能，使用需要一個方法來控制 2）方法名是變量，所以控制變量就可以控制該方法
*
*
* 二、事件指令
* 1）在實例成員methods中聲明事件方法
* 2）標簽通過事件指令綁定聲明的方法： v-on:事件名="事件方法名" eg: <button v-on:click="btnClick">按鈕</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 直接綁定事件名默認傳入事件對象 -->
<button v-on:click="my_click">{{ btn }}</button>
<!-- 加括號手動傳入參數,$event可傳入事件對象-->
<p>{{ num }}</p>
<p v-text="msg"></p>
<button v-on:click="increase(btn1,$event)">{{ btn1 }}</button>
<button v-on:click="decrease(btn2,$event)">{{ btn2 }}</button>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
num: 0,
btn:'點我',
btn1:'增加',
btn2:'減少',
msg:'',
},
methods:{
my_click(ev){
console.log(ev)
},
increase(btn,ev){
this.num++
this.msg = '你點擊了' + btn
console.log(ev.clientX,ev.clientY)
},
decrease(btn){
this.num--
this.msg = '你點擊了' + btn
}
}
})
</script>
</html>