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>
這里我們在vue的data里定義了isLogin的值，當它為true時，網頁就會顯示：你好！Fang，如果為false時，就顯示請登錄后操作。
v-show
調整css中display屬性，DOM已經加載，只是CSS控制沒有顯示出來。
<div v-show="isLogin">你好：JSPang</div>
v-if 和v-show的區別：
v-if： 判斷是否加載，可以減輕服務器的壓力，在需要時加載。
v-show：調整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>
這是一個最基礎的循環，先在js里定義了items數組，然后在模板中用v-for循環出來，需要注意的是，你需要那個html標簽循環，v-for就寫在那個上邊。
數組如何排序：
我們已經順利的輸出了我們定義的數組，但是我需要在輸出之前給數組排個序，那我們就用到了Vue的computed:屬性。
computed:{
sortItems:function(){
return this.items.sort();
}
}
我們在computed里新聲明了一個對象sortItems，如果不重新聲明會污染原來的數據源，這是Vue不允許的，所以你要重新聲明一個對象。
若只用sort方法是得不到想要的數據的,我們可以自己編寫一個方法sortNumber，然后傳給我們的sort函數
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
function sortNumber(a,b){
return a-b
}
依次輸出：
18
19
20
23
32
41
54
56
65
對象循環輸出：
首先得定義一個數組，數組里邊是對象數據
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>
加入索引序號
<ul>
<li v-for="(student,index) in students">
{{index}}：{{student.name}} - {{student.age}}
</li>
</ul>
排序，我們先加一個原生的對象形式的數組排序方法
//數組對象方法排序:
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));
});
}
有了數組的排序方法，在computed中進行調用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
三、v-text & v-html
<div id="app">
<span>{{ message }}</span> = <span v-text="message"></span><br/>
//如果在javascript中寫有html標簽，用v-text是輸出不出來的，這時候我們就需要用v-html標簽
<span v-html="msgHtml"></span>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
注：在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在用戶提交和可操作的網頁上使用。
四、v-model指令
1、一個最簡單的雙向數據綁定代碼：
<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!'
}
})
輸出：
文本框里的內容改變原始文本信息跟著改變
修飾符
- .lazy：取代 imput 監聽 change 事件。
- .number：輸入字符串轉為數字。
- .trim：輸入去掉首尾空格。
2、文本區域加入數據綁定
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
//JS
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
輸出：
3、多選按鈕綁定一個值
<h3>多選框綁定一個值</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、多選綁定一個數組
<h3>多選框綁定數組</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、單選按鈕綁定數據
<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事件監聽
兩種綁定方法：
- v-on:click
<button v-on:click="bonusPoint">加分</button>
- @click
<button @click="deduction">減分</button>
//html
<div id="app">
本場比賽得分：{{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之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現在我們增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。
綁定事件寫法：
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
//綁定到鍵盤上的回車鍵
//JS代碼
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
可以根據鍵值表定義鍵盤事件：點擊查看
六、v-bind指令
v-bind是處理HTML中的標簽屬性的，例如<div></div>就是一個標簽，<img>也是一個標簽，我們綁定<img>上的src進行動態賦值。
//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”的動態綁定了src的值，這個值是在vue構造器里的data屬性中找到的。我們在data對象在中增加了imgSrc屬性來供html調用。
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
綁定CSS樣式
在工作中我們經常使用v-bind來綁定css樣式：
在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。
1、直接綁定class樣式
<div :class="className">1、綁定classA</div>
var app=new Vue({
el:'#app',
data:{
className:'classA
}
2、綁定classA并進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。
<div :class="{classA:isOk}">2、綁定class中的判斷</div>
var app=new Vue({
el:'#app',
data:{
isOK:false
}
3、綁定class中的數組
<div :class="[classA,classB]">3、綁定class中的數組</div>
var app=new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
4、綁定class中使用三元表達式判斷
<div :class="isOk?classA:classB">4、綁定class中的三元表達式判斷</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、用對象綁定style樣式
<div :style="styleObject">6、用對象綁定style樣式</div>
//js
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
v-pre & v-cloak & v-once指令
v-pre指令
在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了。
<div v-pre>{{message}}</div>
這時并不會輸出我們的message值，而是直接在網頁中顯示{{message}}
v-cloak指令
在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once指令
在第一次DOM時進行渲染，渲染完成后視為靜態內容，跳出以后的渲染過程。
<div v-once>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div>{{message}}</div>
上面的div將不會隨著input值改變一起改變 只改變下面div
