一、Vue介紹
1、什么是Vue
可以獨(dú)立完成前后端分離式web項(xiàng)目的JAVAScript框架
2、學(xué)習(xí)Vue的原因
三大主流框架之一：Angular React Vue
先進(jìn)的前端設(shè)計(jì)模式：MVVM
可以完全脫離服務(wù)器端，以前端代碼復(fù)用的方式渲染整個(gè)頁(yè)面：組件化開(kāi)發(fā)
3、Vue的特點(diǎn)
單頁(yè)面web應(yīng)用
數(shù)據(jù)驅(qū)動(dòng)
數(shù)據(jù)的雙向綁定
虛擬DOM
二、Vue使用一
2.1 第一個(gè)Vue頁(yè)面與事件
<div id="App">
<h1>{{ msg }}</h1>
<h2 v-on:click="clickAction">這是一條內(nèi)容</h2>
<h2 v-on:mouseover="clickAction">這是一條內(nèi)容</h2>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!'
},
methods:{
clickAction:function () {
alert('123123')
}
}
})
</script>
2.2 Vue操作樣式與文本操作
<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style"> 點(diǎn)擊變換文字顏色1</p>
<p v-on:click="btnClick" v-bind:style="v_style"> 點(diǎn)擊變換文字顏色2</p>
<p v-on:click="changeword">{{ msg1 }}</p>
<p v-on:click="changeWord" v-once="msg1">{{ msg1 }}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!',
msg1:' 點(diǎn)擊變換文字顏色3',
msg2: '其實(shí)是偷偷給你換了字！',
v_style:{
color:'green'
}
},
methods:{
btnClick:function () {
if (this.v_style.color == 'green'){
this.v_style.color = 'red';
}else{
this.v_style.color = 'green';
}
},
changeWord:function () {
this.msg1 = this.msg2;
}
},
});
</script>
2.3 Vue事件指令
<div id="app">
<p v-on:click="eventAction1" v-bind:style="v_style">{{ msg[0] }}</p>
<p @click="eventAction2">{{ msg[1] }}</p>
<ul>
<li @click="liAction(100)">第一個(gè)li</li>
<li @click="liAction(200)">第二個(gè)li</li>
<li @click="liAction(300)">第三個(gè)li</li>
</ul>
<!-- 鼠標(biāo)事件的對(duì)象：直接寫函數(shù)名，默認(rèn)將鼠標(biāo)事件對(duì)象傳入 -->
<div @click="func1">function1</div>
<!-- 鼠標(biāo)事件的對(duì)象， 一旦添加()，就必須手動(dòng)傳參，$event就代表鼠標(biāo)事件對(duì)象 -->
<div @click="func2">function2</div>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['這是msg里面的第一個(gè)值', '這是msg里面的第二個(gè)值'],
v_style:{
color:'green',
}
},
methods:{
eventAction1:function () {
console.log('this is eventAction1');
},
eventAction2:function () {
console.log('this is eventAction2');
},
liAction: function (num, msg) {
console.log(num, msg)
},
func1: function (ev) {
console.log(ev)
},
func2: function (ev, msg) {
console.log(ev);
console.log(msg)
}
},
});
</script>
2.4 屬性指令
<div id="app">
<!-- 屬性指令：用vue綁定屬性，將屬性內(nèi)容交給vue處理 -->
<!-- 語(yǔ)法：v-bind:屬性名="變量" (v-bind: 可以簡(jiǎn)寫為 :) -->
<p class="" style="" v-bind:theFirst="F" :theSecond="S">1</p>
<!-- class屬性 -->
<p :class="c1" @click="action1">2</p>
<!-- 多類名 -->
<p :class="[c1,c2]">3</p>
<!-- 'br' 固定寫死的數(shù)據(jù)，不再是變量 -->
<p :class="[c1, 'br']">4</p>
<!-- style屬性 -->
<!-- 一個(gè)變量：該變量值為{}，{}內(nèi)部完成一個(gè)個(gè)屬性的設(shè)置 -->
<p class="gDiv" :style="s1"> 這是測(cè)試style屬性 </p>
<!-- 一個(gè){}：{}內(nèi)一個(gè)個(gè)屬性有一個(gè)個(gè)變量單獨(dú)控制 -->
<p class="gDiv" :style="{fontSize:fs, color: c}"> 這也是測(cè)試style屬性 </p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['這是msg里面的第一個(gè)值', '這是msg里面的第二個(gè)值'],
v_style:{
color:'green',
},
F: 'First',
S: 'Second',
c1: 'rDiv',
c2: 'br',
s1: {
// 'font-size': '20px'
fontSize: '20px',
color: 'pink'
},
fs: '15px',
c: 'orange'
},
methods:{
action1:function () {
if(this.c1 == 'rDiv'){
this.c1 = 'gDiv';
}else{
this.c1 = 'rDiv';
}
},
},
});
</script>
<div id="app">
<form action="">
<p> <input type="text" v-model="val" name="user"> </p>
<p> <input type="text" v-model="val"> </p>
<!-- 單選框 v-model綁定的變量是單選框中某一個(gè)input的value -->
<p>
男: <input v-model="r_val" value="male" type="radio" name="sex">
女: <input v-model="r_val" value="female" type="radio" name="sex">
</p>
<!-- 復(fù)選框 v-model綁定的變量是一個(gè)列表，列表存存放0到任一個(gè)復(fù)選框的value -->
<p>
男: <input v-model="c_val" value="m" type="checkbox" name="h">
女: <input v-model="c_val" value="f" type="checkbox" name="h">
哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
</p>
<button type="submit">提交</button>
</form>
</div>
new Vue里面的data下：
val: '',
r_val: 'female',
c_val: ['m','mf'],
推薦閱讀：
前端開(kāi)發(fā)框架Vue中Vuex的使用原理分享
前端開(kāi)發(fā)之Vue模板學(xué)習(xí)
前端框架VUE面試基礎(chǔ)問(wèn)答
