live-server使用
npm install live-server -g
live-server
一匀归、v-if & v-show
示例：
v-if
<div id="app">
<div v-if="isLogin">你好！Fang</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isLogin:true
}
})
</script>
這里我們?cè)趘ue的data里定義了isLogin的值阱扬，當(dāng)它為true時(shí)幽污，網(wǎng)頁(yè)就會(huì)顯示：你好！Fang咕痛，如果為false時(shí)痢甘，就顯示請(qǐng)登錄后操作。
v-show
調(diào)整css中display屬性茉贡，DOM已經(jīng)加載塞栅，只是CSS控制沒(méi)有顯示出來(lái)。
<div v-show="isLogin">你好：JSPang</div>
v-if 和v-show的區(qū)別：
v-if： 判斷是否加載块仆，可以減輕服務(wù)器的壓力构蹬，在需要時(shí)加載。
v-show：調(diào)整css dispaly屬性悔据，可以使客戶端操作更加流暢
二庄敛、v-for使用:
基本用法：
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
這是一個(gè)最基礎(chǔ)的循環(huán)，先在js里定義了items數(shù)組科汗，然后在模板中用v-for循環(huán)出來(lái)藻烤，需要注意的是，你需要那個(gè)html標(biāo)簽循環(huán)头滔，v-for就寫(xiě)在那個(gè)上邊怖亭。
數(shù)組如何排序：
我們已經(jīng)順利的輸出了我們定義的數(shù)組，但是我需要在輸出之前給數(shù)組排個(gè)序坤检，那我們就用到了Vue的computed:屬性兴猩。
computed:{
sortItems:function(){
return this.items.sort();
}
}
我們?cè)赾omputed里新聲明了一個(gè)對(duì)象sortItems，如果不重新聲明會(huì)污染原來(lái)的數(shù)據(jù)源早歇，這是Vue不允許的倾芝，所以你要重新聲明一個(gè)對(duì)象。
若只用sort方法是得不到想要的數(shù)據(jù)的,我們可以自己編寫(xiě)一個(gè)方法sortNumber箭跳，然后傳給我們的sort函數(shù)
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
function sortNumber(a,b){
return a-b
}
依次輸出：
18
19
20
23
32
41
54
56
65
對(duì)象循環(huán)輸出：
首先得定義一個(gè)數(shù)組晨另，數(shù)組里邊是對(duì)象數(shù)據(jù)
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
在模板中輸出
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
加入索引序號(hào)
<ul>
<li v-for="(student,index) in students">
{{index}}：{{student.name}} - {{student.age}}
</li>
</ul>
排序，我們先加一個(gè)原生的對(duì)象形式的數(shù)組排序方法
//數(shù)組對(duì)象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
有了數(shù)組的排序方法谱姓，在computed中進(jìn)行調(diào)用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
三借尿、v-text & v-html
<div id="app">
<span>{{ message }}</span> = <span v-text="message"></span><br/>
//如果在javascript中寫(xiě)有html標(biāo)簽，用v-text是輸出不出來(lái)的，這時(shí)候我們就需要用v-html標(biāo)簽
<span v-html="msgHtml"></span>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
注：在生產(chǎn)環(huán)境中動(dòng)態(tài)渲染HTML是非常危險(xiǎn)的路翻，因?yàn)槿菀讓?dǎo)致XSS攻擊狈癞。所以只能在可信的內(nèi)容上使用v-html，永遠(yuǎn)不要在用戶提交和可操作的網(wǎng)頁(yè)上使用帚桩。
四亿驾、v-model指令
1、一個(gè)最簡(jiǎn)單的雙向數(shù)據(jù)綁定代碼：
<div id="app">
原始文本信息：{{message}}
<br>
<h3>文本框</h3>
<p>v-model：
<input type="text" v-model="message">
</p>
<p>v-model.lazy：
<input type="text" v-model.lazy="message">
</p>
<p>v-model.number：
<input type="text" v-model.number="message">
</p>
<p>v-model.trim：
<input type="text" v-model.trim="message">
</p>
//JS
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
輸出：
文本框里的內(nèi)容改變?cè)嘉谋拘畔⒏淖?br>
修飾符
- .lazy：取代 imput 監(jiān)聽(tīng) change 事件账嚎。
- .number：輸入字符串轉(zhuǎn)為數(shù)字莫瞬。
- .trim：輸入去掉首尾空格。
2郭蕉、文本區(qū)域加入數(shù)據(jù)綁定
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
//JS
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
輸出：
3疼邀、多選按鈕綁定一個(gè)值
<h3>多選框綁定一個(gè)值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
//JS
var app=new Vue({
el:'#app',
data:{
isTrue: true
}
}
輸出：
4、多選綁定一個(gè)數(shù)組
<h3>多選框綁定數(shù)組</h3>
<p>
<input type="checkbox" id="Fang" value="Fang" v-model="webNames">
<label for="isTrue">Fang</label>
<input type="checkbox" id="Frank" value="Frank" v-model="webNames">
<label for="isTrue">Frank</label>
<input type="checkbox" id="Alice" value="Alice" v-model="webNames">
<label for="isTrue">Alice</label>
</p>
//JS
var app=new Vue({
el:'#app',
data:{
webNames:[]
}
}
輸出：
5召锈、單選按鈕綁定數(shù)據(jù)
<h3>單選框綁定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<br>
你選擇的性別是：{{sex}}
</p>
//JS
var app=new Vue({
el:'#app',
data:{
sex:''
}
}
輸出：
五旁振、v-on事件監(jiān)聽(tīng)
兩種綁定方法：
- v-on:click
<button v-on:click="bonusPoint">加分</button>
- @click
<button @click="deduction">減分</button>
//html
<div id="app">
本場(chǎng)比賽得分：{{count}}
<br/>
<button v-on:click="bonusPoint">加分</button>
<button @click="deduction">減分</button>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
count:0
},
methods:{
bonusPoint:function(){
this.count++
},
deduction:function(){
this.count--
}
}
})
</script>
我們除了綁定click之外，我們還可以綁定其它事件涨岁，比如鍵盤(pán)回車(chē)事件v-on:keyup.enter,現(xiàn)在我們?cè)黾右粋€(gè)輸入框拐袜，然后綁定回車(chē)事件，回車(chē)后把文本框里的值加到我們的count上梢薪。
綁定事件寫(xiě)法：
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
//綁定到鍵盤(pán)上的回車(chē)鍵
//JS代碼
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
可以根據(jù)鍵值表定義鍵盤(pán)事件：點(diǎn)擊查看
六蹬铺、v-bind指令
v-bind是處理HTML中的標(biāo)簽屬性的，例如<div></div>就是一個(gè)標(biāo)簽秉撇，<img>也是一個(gè)標(biāo)簽甜攀，我們綁定<img>上的src進(jìn)行動(dòng)態(tài)賦值。
//html
<div id="app">
[圖片上傳失敗...(image-c7ccbb-1524291892651)]
</div>
//js
var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})
在html中我們用v-bind:src=”imgSrc”的動(dòng)態(tài)綁定了src的值琐馆，這個(gè)值是在vue構(gòu)造器里的data屬性中找到的规阀。我們?cè)赿ata對(duì)象在中增加了imgSrc屬性來(lái)供html調(diào)用。
v-bind 縮寫(xiě)
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"></a>
<!-- 縮寫(xiě) -->
<a :href="url"></a>
綁定CSS樣式
在工作中我們經(jīng)常使用v-bind來(lái)綁定css樣式：
在綁定CSS樣式是瘦麸，綁定的值必須在vue中的data屬性中進(jìn)行聲明谁撼。
1、直接綁定class樣式
<div :class="className">1滋饲、綁定classA</div>
var app=new Vue({
el:'#app',
data:{
className:'classA
}
2彤敛、綁定classA并進(jìn)行判斷，在isOK為true時(shí)顯示樣式了赌，在isOk為false時(shí)不顯示樣式。
<div :class="{classA:isOk}">2玄糟、綁定class中的判斷</div>
var app=new Vue({
el:'#app',
data:{
isOK:false
}
3勿她、綁定class中的數(shù)組
<div :class="[classA,classB]">3、綁定class中的數(shù)組</div>
var app=new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
4阵翎、綁定class中使用三元表達(dá)式判斷
<div :class="isOk?classA:classB">4逢并、綁定class中的三元表達(dá)式判斷</div>
var app=new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
5之剧、綁定style
<div :style="{color:red,fontSize:font}">5、綁定style</div>
var app=new Vue({
el:'#app',
data:{
red:'red',
font:'20px'
}
6砍聊、用對(duì)象綁定style樣式
<div :style="styleObject">6背稼、用對(duì)象綁定style樣式</div>
//js
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
v-pre & v-cloak & v-once指令
v-pre指令
在模板中跳過(guò)vue的編譯，直接輸出原始值玻蝌。就是在標(biāo)簽中加入v-pre就不會(huì)輸出vue中的data值了蟹肘。
<div v-pre>{{message}}</div>
這時(shí)并不會(huì)輸出我們的message值，而是直接在網(wǎng)頁(yè)中顯示{{message}}
v-cloak指令
在vue渲染完指定的整個(gè)DOM后才進(jìn)行顯示俯树。它必須和CSS樣式一起使用帘腹，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once指令
在第一次DOM時(shí)進(jìn)行渲染，渲染完成后視為靜態(tài)內(nèi)容许饿，跳出以后的渲染過(guò)程阳欲。
<div v-once>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div>{{message}}</div>
上面的div將不會(huì)隨著input值改變一起改變 只改變下面div
