一、Vue介紹
1、什么是Vue
可以獨立完成前后端分離式web項目的JAVAScript框架
2、學習Vue的原因
三大主流框架之一：Angular React Vue
先進的前端設計模式：MVVM
可以完全脫離服務器端，以前端代碼復用的方式渲染整個頁面：組件化開發(fā)
3、Vue的特點
單頁面web應用
數(shù)據(jù)驅動
數(shù)據(jù)的雙向綁定
虛擬DOM
二、Vue使用一
2.1 第一個Vue頁面與事件
<div id="App">
<h1>{{ msg }}</h1>
<h2 v-on:click="clickAction">這是一條內容</h2>
<h2 v-on:mouseover="clickAction">這是一條內容</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"> 點擊變換文字顏色1</p>
<p v-on:click="btnClick" v-bind:style="v_style"> 點擊變換文字顏色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:' 點擊變換文字顏色3',
msg2: '其實是偷偷給你換了字！',
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)">第一個li</li>
<li @click="liAction(200)">第二個li</li>
<li @click="liAction(300)">第三個li</li>
</ul>
<!-- 鼠標事件的對象：直接寫函數(shù)名，默認將鼠標事件對象傳入 -->
<div @click="func1">function1</div>
<!-- 鼠標事件的對象， 一旦添加()，就必須手動傳參，$event就代表鼠標事件對象 -->
<div @click="func2">function2</div>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['這是msg里面的第一個值', '這是msg里面的第二個值'],
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綁定屬性，將屬性內容交給vue處理 -->
<!-- 語法：v-bind:屬性名="變量" (v-bind: 可以簡寫為 :) -->
<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屬性 -->
<!-- 一個變量：該變量值為{}，{}內部完成一個個屬性的設置 -->
<p class="gDiv" :style="s1"> 這是測試style屬性 </p>
<!-- 一個{}：{}內一個個屬性有一個個變量單獨控制 -->
<p class="gDiv" :style="{fontSize:fs, color: c}"> 這也是測試style屬性 </p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['這是msg里面的第一個值', '這是msg里面的第二個值'],
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綁定的變量是單選框中某一個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>
<!-- 復選框 v-model綁定的變量是一個列表，列表存存放0到任一個復選框的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'],
推薦閱讀：
前端開發(fā)框架Vue中Vuex的使用原理分享
前端開發(fā)之Vue模板學習
前端框架VUE面試基礎問答
