什么是Vue.js菲茬？
?Vue.js是目前最火的一個(gè)前端框架来庭。React是最流行的前端框架（都可以進(jìn)行手機(jī)App的開(kāi)發(fā)）；
?Vue.js是一套構(gòu)建用戶界面的框架舵变，只關(guān)注視圖層记焊，易于上手逸月；
?Vue.js主要負(fù)責(zé)MVC中的V這一層，主要與界面打交道遍膜，來(lái)制作頁(yè)面效果碗硬。
框架與庫(kù)的區(qū)別
?框架：是一套完整的解決方案，對(duì)項(xiàng)目的侵入性較大瓢颅，項(xiàng)目如果需要更換框架恩尾，則需要重新架構(gòu)整個(gè)項(xiàng)目。
?庫(kù)（插件）：提供某一個(gè)小功能挽懦，對(duì)項(xiàng)目的侵入性較小翰意。
Node（后端）中的MVC 與 前端中的MVVM之間的區(qū)別?
?MVC——M-Model層： 處理數(shù)據(jù)的CRUD增加(Create)、讀取查詢(Retrieve)、更新(Update)和刪除(Delete)冀偶；
...................V：視圖層醒第，前端頁(yè)面；
...................C：業(yè)務(wù)邏輯層进鸠，controller控制層：登錄稠曼、注銷等；
后端MVC思想.png
?MVVM——是前端視圖層的概念客年，分為Model霞幅，View，VM-ViewModel量瓜。
前端MVVM思想.png
Vue.js基本代碼和MVVM之間的對(duì)應(yīng)關(guān)系
<body>
<!-- 將來(lái)new的Vue實(shí)例司恳，會(huì)控制這個(gè)元素中的所有內(nèi)容 -->
<!-- ******Vue實(shí)例所控制的元素區(qū)域，就是我們的V -->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
// 2.創(chuàng)建一個(gè)Vue的實(shí)例
// 當(dāng)我們導(dǎo)入包之后绍傲，在瀏覽器的內(nèi)存中扔傅，就多了一個(gè)Vue構(gòu)造函數(shù)
// ******注意：我們new出來(lái)的這個(gè)VM 對(duì)象，就是我們MVVM中VM 的調(diào)度者
var vm = new Vue({
el:'#app', //表示當(dāng)前我們new的這個(gè)vue實(shí)例唧取，要控制頁(yè)面上的哪個(gè)區(qū)域
// *******這里的data就是MVVM中的 M 铅鲤，專門(mén)保存每個(gè)頁(yè)面的數(shù)據(jù)的
data:{ //data屬性中，存放的是el中要用到的數(shù)據(jù)
msg:'歡迎學(xué)習(xí)Vue' //通過(guò)Vue提供的指令枫弟，很方便就能把數(shù)據(jù)渲染到頁(yè)面上，程序員不再手動(dòng)操作DOM元素了
}
})
</script>
</body>
v-cloak鹏往、v-text淡诗、v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 v-cloak 能夠解決 插值表達(dá)式閃爍的問(wèn)題，可以顯示++++ -->
<p v-cloak>++++++{{msg}}+++++</p>
<!-- 1.默認(rèn) v-text 是沒(méi)有閃爍問(wèn)題的 -->
<!-- 2.v-text伊履、v-html會(huì)覆蓋元素中原本的內(nèi)容韩容，不會(huì)顯示“******”和“12345678” -->
<h4 v-text="msg">************</h4>
<!-- 3.v-html可以把內(nèi)容當(dāng)做html來(lái)顯示出來(lái),其他方式會(huì)連帶標(biāo)簽 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">12345678</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'yuyu',
msg2:'<h1>小魚(yú)兒與花無(wú)缺<h1>'
}
})
</script>
</body>
</html>
02對(duì)應(yīng)結(jié)果圖.png
v-bind指令
<body>
<div id="app">
<!-- v-bind：是Vue中提供的用于綁定屬性的命令 -->
<input type="button" value="按鈕" v-bind:title="mytitle+'123'">
<!-- 注意：v-bind: 指令可以被簡(jiǎn)寫(xiě)為 :要綁定的屬性 -->
<!-- v-bind中 也可以寫(xiě)合法的JS表達(dá)式 -->
<input type="button" value="按鈕" :title="mytitle+'123'">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
mytitle:'自己定義的title'
}
})
</script>
</body>
v-on指令
<body>
<div id="app">
<!-- Vue 中提供了v-on：事件綁定機(jī)制 -->
<input type="button" value="按鈕" v-on:click="show">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
mytitle:'自己定義的title'
},
// 這個(gè)methods屬性中定義了當(dāng)前Vue實(shí)例中所有可用的方法
methods:{
show:function(){
alert('hello');
}
}
})
</script>
</body>
跑馬燈效果
分析：
1、給【浪起來(lái)】按鈕唐瀑，綁定一個(gè)點(diǎn)擊事件 v-on || 簡(jiǎn)寫(xiě)@
2群凶、 在按鈕的事件處理函數(shù)中，寫(xiě)相關(guān)的業(yè)務(wù)邏輯代碼：拿到msg字符串哄辣，然后 調(diào)用 字符串的substring來(lái)進(jìn)行字符串的截取操作请梢，把第一個(gè)字符串取出來(lái)，放到最后一個(gè)位置即可力穗；
3毅弧、為了實(shí)現(xiàn)點(diǎn)擊一下按鈕，自動(dòng)截取的功能当窗，需要把步驟2中的代碼够坐，放到一個(gè)定時(shí)器中。
<body>
<div id="app">
<input type="button" value="浪起來(lái)" @click="lang">
<input type="button" value="停止" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
// 注意：在VM實(shí)例中，如果想要獲取data中的數(shù)據(jù)元咙，或者想要調(diào)用methods中的方法梯影，必須通過(guò)this.數(shù)據(jù)屬性名 或 this.方法名
// 來(lái)進(jìn)行訪問(wèn)，這里的this庶香，就表示我們new出來(lái)的VM實(shí)例對(duì)象
var vm = new Vue({
el:'#app',
data:{
msg:'猥瑣發(fā)育光酣，別浪~~~',
intervalId:null //在data上定義 定時(shí)器ID
},
methods:{
lang(){
// 箭頭函數(shù)能夠使內(nèi)部的this和外部的this永遠(yuǎn)保持一致，解決this指向的問(wèn)題
if(this.intervalId != null) return;
this.intervalId = setInterval( () => {
// 獲取到頭的第一個(gè)字符
var start = this.msg.substring(0,1)
// 獲取到后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串脉课，并賦值給this.msg
this.msg = end + start
},200)
// 注意：VM實(shí)例會(huì)監(jiān)聽(tīng)自己身上data中所有數(shù)據(jù)的改變救军，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把最新的數(shù)據(jù)倘零，從data上同
// 步到頁(yè)面中去唱遭；【不需要考慮如何重新渲染DOM頁(yè)面】
},
// 終止定時(shí)器
stop(){
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
</body>
事件修飾符
<body>
<div id="app">
<!-- 使用.stop阻止向上冒泡 -->
<div class="inner" @click="yuyu">
<input type="button" value="我愛(ài)你" @click.stop="leilei">
</div>
<!-- 使用.prevent阻止默認(rèn)事件 -->
<a @click.prevent="love">有問(wèn)題找百度</a>
<!-- 使用.captrue實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制 -->
<div class="inner" @click.capture="yuyu">
<input type="button" value="我愛(ài)你" @click="leilei">
</div>
<!-- 使用.self實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素才會(huì)觸發(fā)事件處理函數(shù) -->
<div class="inner" @click.self="yuyu">
<input type="button" value="我愛(ài)你" @click="leilei">
</div>
<!-- 使用.once只觸發(fā)一次事件處理函數(shù) -->
<a @click.prevent.once="love">有問(wèn)題找百度</a>
<!-- .stop 和 .self的區(qū)別 -->
<div class="yulei" @click="yulei">
<div class="inner" @click="yuyu">
<input type="button" value="我愛(ài)你" @click.stop="leilei">
</div>
</div>
<!-- .self只會(huì)阻止自己身上冒泡行為的觸發(fā)，并不會(huì)真正阻止冒泡行為 -->
<div class="yulei" @click="yulei">
<div class="inner" @click.self="yuyu">
<input type="button" value="我愛(ài)你" @click="leilei">
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
yuyu(){
alert('魚(yú)魚(yú)');
},
leilei(){
alert('磊磊')
},
love(){
alert('I Love You')
},
yulei(){
alert('魚(yú)魚(yú)love磊磊')
}
}
})
</script>
</body>
v-model雙向數(shù)據(jù)綁定
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- 使用v-model可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向綁定 -->
<!-- 注意：v-model只能運(yùn)用在表單元素中 -->
<!-- input（radio呈驶，text拷泽，address，email..)select checkbox textarea -->
<input type="text" v-model="msg" style="width: 100%">
<!-- v-bind只能實(shí)現(xiàn)數(shù)據(jù)的單向綁定袖瞻，從M自動(dòng)綁定到V -->
<!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'v-model數(shù)據(jù)雙向綁定'
}
})
</script>
</body>
v-model簡(jiǎn)易計(jì)算器demo
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="count">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
opt:'+',
result:0
},
methods:{
count(){
// 邏輯：
switch(this.opt){
case '+':
this.result = parseInt(this.n1)+parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1)-parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1)*parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1)/parseInt(this.n2)
break;
}
// 注意：這是投機(jī)取巧的方法司致，正式開(kāi)發(fā)中，盡量少用
var sum = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
this.result = eval(sum);
}
}
})
</script>
</body>
Vue中的class樣式
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<!-- 第一種方式聋迎，直接傳遞一個(gè)數(shù)組脂矫，注意：這里的class需要使用v-bind做數(shù)據(jù)綁定 -->
<h2 :class="['red','thin','italic']">小魚(yú)兒與花無(wú)缺</h2>
<!-- 在數(shù)組中使用三元表達(dá)式 -->
<h2 :class="['red','thin','italic',flag?'active':'']">小魚(yú)兒與花無(wú)缺</h2>
<!-- 在數(shù)組中使用 對(duì)象來(lái)代替三元表達(dá)式，提高代碼可讀性 -->
<h2 :class="['red','thin','italic',{'active':flag}]">小魚(yú)兒與花無(wú)缺</h2>
<!-- 在為class使用 v-bind 綁定對(duì)象的時(shí)候霉晕，對(duì)象的屬性是類名庭再，由于 對(duì)象的屬性可帶引號(hào)，也可不帶引號(hào)牺堰，所以 這里我沒(méi)寫(xiě)引號(hào)拄轻；屬性值是一個(gè)標(biāo)識(shí)符 -->
<h2 :class="classObj">小魚(yú)兒與花無(wú)缺</h2>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{red:true,thin:true,italic:false,active:true}
},
})
</script>
</body>
Vue中的內(nèi)聯(lián)樣式
<body>
<div id="app">
<!-- 對(duì)象就是無(wú)序鍵值對(duì)的集合 -->
<!-- <h1 :style="{color:'red','font-weight':'200'}">這是一個(gè)h1</h1> -->
<h1 :style="styleObj1">這是一個(gè)h1</h1>
<h1 :style="[styleObj1,styleObj2]">這是一個(gè)h1</h1>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
styleObj1:{color:'red','font-weight':'200'},
styleObj2:{'font-style':'italic'}
}
})
</script>
</body>
Vue指令值v-for 和 key屬性
<body>
<div id="app">
<!-- v-for循環(huán)普通數(shù)組 -->
<p v-for="(item,index) in list">索引值{{index}}---對(duì)應(yīng)值{{item}}</p>
<!-- v-for循環(huán)對(duì)象數(shù)組 -->
<p v-for="(item,index1) in list1">ID:{{item.id}}---名字：{{item.name}}</p>
<!-- v-for循環(huán)對(duì)象 -->
<p v-for="(item,key,index2) in list2">信息:{{item}}---鍵值：{{item.name}}---索引：{{index2}}</p>
<!-- 如果使用v-for迭代數(shù)字的話，前面的count值從1開(kāi)始 -->
<p v-for="count in 10">這是第{{count}}次循環(huán)</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6],
list1:[
{id:1,name:'yuyu1'},
{id:2,name:'yuyu2'},
{id:3,name:'yuyu3'},
{id:4,name:'yuyu4'},
],
list2:{
id:1,
name:'yuer',
sex:'女'
}
}
})
</script>
</body>
Vue指令值v-for 和 key屬性 的 使用
<body>
<div id="app">
<label>
ID:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<!-- 循環(huán)的時(shí)候伟葫，key屬性只能使用number獲取string -->
<!-- key在使用的時(shí)候恨搓，必須使用v-bind屬性綁定的形式，指定key的值 -->
<!-- 在組件中使用v-for循環(huán)的時(shí)候筏养，或者在一些特殊的情況中斧抱，如果v-for有問(wèn)題，必須在使用v-for的同時(shí)撼玄，指定唯一的 字符串/數(shù)字 類型 :key值 -->
<p v-for="item in user" :key="item.id">
<input type="checkbox">
{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
user:[
{id:1,name:'yuyu1'},
{id:2,name:'yuyu2'},
{id:3,name:'yuyu3'},
{id:4,name:'yuyu4'},
]
},
methods:{
add(){
this.user.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
v-if 和 v-show 的使用
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- v-if：每次都會(huì)重新刪除或創(chuàng)建元素 -->
<h3 v-if="flag">這是用v-if控制的元素</h3>
<!-- v-show：只是切換了元素的display：none 樣式 -->
<h3 v-show="flag">這是用v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
})
</script>
</body>
