目錄
Vue框架學習--Part1
一、前端框架介紹
前台框架：angular(facebook)、react(github)、vue(尤雨溪)
vue從前兩大框架中衍生而來。
目前react和vue應用的比較多。
二、vue框架簡介
vue特點：有前兩大框架優點，擯棄缺點；但沒有前兩個框架健全
vue優點：中文API、單頁面應用、組件化開發、數據雙向綁定、虛擬DOM、
數據驅動思想(相比DOM驅動)
三、vue使用初體驗
1. vue如何在頁面中引入
- 通過script標簽引入vue.js環境。
- 創建vue實例。
- 通過el進行掛載（直接將標簽名與el對應即可掛載，該標簽即為掛載點）。
- 為了與div進行區分，選擇用section作為根塊級標簽，它跟div的作用是一樣的，就是名字不一樣。
<body>
<section>
<div id="d1">
{{ msg }} 這里的msg為一個變量值，通過vue給其傳值
<p v-on:click="pClick" v-bind:style="pStyle">
{{ info }}
</p>
</div>
<hr>
<div class="d2">
{{}} 不加空格就不會被vue識別，會直接在瀏覽器中渲染出來
</div>
<hr>
<div class="d2">
{{ }}
</div>
</section>
</body>
<script src="js/vue.js"></script> 加載vue框架
<script>
let app = new Vue({
el: 'section',
data: { // data為掛載點內部提供數據
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
});
// 實例外部需要訪問實例內部的屬性，需要將實例用一個變量接收
console.log(app.msg)
</script>
注意：
- 通常掛載點都采用id選擇器（掛載點采用的是css3選擇器語法，但是只能匹配第一次檢索到的結果，因此使用具有唯一性的id作為選擇器）。
- html與body標簽不能作為掛載點。
- 掛載點采用的是css3選擇器語法，但是只能匹配第一次檢索到的結果。
聲明的實例是否用一個變量接收
- 在實例內部不需要，用this就代表當前vue實例本身。
- 在實例外部或其他實例內部需要，定義一個變量接收new Vue()產生的實例
2. 插值表達式
插值表達式由{}組成，其內部可以放入變量且可以進行一些簡單的運算或操作。
<div id="app">
<p>{{ msg }}</p>
<p>{{ num * 10 }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '信息',
num: 10
}
})
</script>
# 實際頁面：
信息
100
信息10
息
[ "信", "息" ]
3. 文本指令
1. {{ }}
2. v-text：不能解析html語法的文本，會原樣輸出
3. v-html：能解析html語法的文本
4. v-once：處理的標簽的內容只能被解析一次
-----------------------------------------------
<body>
<div id="app">
<p>{{ msg.split('') }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p>
<hr>
<p v-on:click="pClick" v-once>{{ msg + info }}</p>
<p>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
info: '<i>info</i>'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
</script>
4. 方法指令(事件指令)
事件指令： v-on:事件名="方法變量"
簡寫： @事件名="方法變量"
事件加括號就是告訴系統我要自己傳參，不加括號自動傳事件對象。
<body>
<div id="app">
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<!--mouseover對應mouseenter | mouseout對應mouseleave-->
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!-- 事件變量，不添加()，默認會傳事件對象: $event -->
<!-- 事件變量，添加()，代表要自定義傳參，系統不再傳入事件對象，但是可以手動傳入事件對象 -->
<p @click="f8($event, '第一個')">{{ info }}</p>
<p @click="f8($event, '第二個')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '點擊切換',
action: '鼠標事件',
info: '確定點擊者'
},
methods: {
f1 () {
this.msg = '點擊了'
},
f2 () {
this.action = '懸浮';
console.log('懸浮')
},
f3 () {
this.action = '離開'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移動';
console.log('移動')
},
f7 () {
this.action = '右鍵';
},
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '點擊了';
}
}
})
</script>
5. 屬性指令
屬性指令： v-bind:屬性名="變量"
簡寫： :屬性名="變量"
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<!--屬性指令： v-bind:屬性名="變量"
簡寫： :屬性名="變量"
-->
<p style="color: red" class="dd1" abc="def" title="懸浮提示">紅色字體</p>
<!--1、簡單使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">簡單使用</p>
<!--<img :src="img_src" alt="">-->
<!--2、class屬性綁定-->
<!--c1變量的值就是類名-->
<p :class="c1"></p>
<!--多類名可以用[]語法，采用多個變量來控制-->
<p :class="[c2, c3]"></p>
<!--選擇器位可以設置為變量，也可以設置為常量-->
<p :class="['d1', c4]"></p>
<!--{類名: 布爾值}控制某類名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多種語法混用-->
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
<!--3、style屬性綁定(了解)-->
<p :style="myStyle">樣式屬性</p>
<p :style="{width: w,height: h, backgroundColor: bgc}">樣式屬性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '簡單使用',
def: '自定義屬性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
四、js數據類型補充
1.js數據類型
js中數據類型主要有：undefiend、null、string、number、boolean、object(Array)、function等。
js用來聲明數據變量的關鍵字有：var、let、const、不寫 這四種。
其中：
let不是用來替換var的；
let、const定義的變量不能重新定義；
且let只能作用於塊級作用域(大括號內就是塊級作用域)；
不加聲明詞定義全局變量。
function f() {
d = 40; // 全局變量
}
f(); // 必須運行函數才會執行里面的代碼
console.log(d);
// 40
const c = 30; // 常量
console.log(c);
// 30
if (1) {
// 大括號里面屬於塊級作用域
var a = 10;
let b = 20; // let、const定義的變量不能重復定義，且作用於塊級作用域
console.log(b);
// 20
}
console.log(a); // 10
console.log(b); // not defind
for (var i = 0; i < 5; i++) {
console.log(i);
}
// 0、1、2、3、4
console.log(i); // 5
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0、1、2、3、4
console.log(i); // 5
2. js函數
箭頭函數和普通函數有本質區別：
箭頭函數沒有函數體，只有結果，可以不寫大括號和return。
而且箭頭函數沒有原型，內部調用this會被父級變量的this捕獲。
// js定義函數有三種方法
// 第一種
function f1() {
console.log('f1 run');
}
// 第二種
let f2 = function () {
console.log('f2 run');
};
f2();
// 第三種
let f3 = () => {
console.log('f3 run');
};
f3();
箭頭函數的定義可以簡寫：
// 如果箭頭函數沒有函數體，只有返回值，可以不寫{}
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
// 如果箭頭函數參數列表只有一個，可以不寫()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
重點：function、箭頭函數、方法都具有本質區別！
類中定義箭頭函數，該箭頭函數無法訪問類實例化對象的this屬性。
let obj = {
// 類的屬性
name: 'Jerry',
// function普通函數
eat: function (food) {
console.log(this);
console.log(this.name + '在吃' + food)
// {name: "Jerry", eat: ƒ}
// Jerry在吃food
},
// 箭頭函數
eat: food => {
console.log(this);
console.log(this.name + '在吃 + food)
// Window {parent: Window, postMessage: ƒ,…}
// 在吃food
// 發現無法訪問this
},
// 類的方法
eat(food) { // 方法的語法
console.log(this);
console.log(this.name + '在吃' + food)
// {name: "Jerry", eat: ƒ}
// Jerry在吃food
}
};
obj.eat('food');