關於前陣子的文章錯誤有點多所以從新修改了並添加了一些在官方腳手架vue-cli開發時需要注意的事項， Vue.js是一個輕巧、高性能、可組件化的MVVM庫。Vue 的核心庫只關注視圖層，並且非常容易學習，同時擁有非常容易上手的API（中英文都有提供），vue-router以及組件間的通信請使勁的敲這里：敲敲敲
Vue快速入門
准備：
- Vue.js 地址：http://cn.vuejs.org/
- Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download
沒錯就只需要這兩個就可以開發了 vue是核心文件，bootstrap在這里只是為了提高開發效率而引用的，是可選的。 現在建個html文件引入剛下載好的兩個文件這里我們只需要引用bootstrap的css樣式文件即可，現在是這樣的：
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
.......
</div>
</div>
</div>
<script src="./public/image/vue.js"></script>
</body>
</html>現在我們來先看段代碼：
<div id="app">
<div>{{message}}</div> </div>
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});這個例子在瀏覽器解析時會輸出hello vue.js。
我們先不管為什么，我們先理解他的邏輯。 在這個例子里我們的
<div id="app">
<div>{{message}}</div> </div>就是視圖層，而
new Vue({ el:'#app', data: { message:'hello vue.js.' }
});就是數據層，在使用Vue.js之前，我們都需要先像這樣實例化一個Vue對象。 里面有四個常用的屬性，el、data、methods、components。
- el:聲明vuejs管理的邊界，類似於angular的ng-app，把數據綁定給誰。 上面的例子中將數據綁定給了#app。
- data:專門存儲一些數據的屬性，數據一定是對象格式。 上面的例子中給message賦值hello vue.js!
- methods:專門放置我們的事件的方法
- components:創建組件
回到上面的例子el指定了#app，data存放了數據message，然后利用表達式{{}}將數據顯示到頁面。
接下來再看個例子：
<div id="app">
<p>{{ message }}</p> <input v-model="message"> </div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})這里用到了新的指令v-model，其作用就是接收用戶輸入的一些數據，直接就可以將這些數據 掛載到data屬性里面，使得實現雙向數據綁定更加容易。
接下來介紹一些常用的指令：
- v-if:通過判斷加載內容，若為真加載，為假時刪除元素
<div id="app">
<p v-if="seen">Now you see me</p>
</div>
new Vue({
el: '#app',
data: {
seen: true
}
})- v-for:控制html元素的循環，實現數據列表
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
- v-show:元素會始終渲染並保持在dom中，並且安全性沒有v-if高，因為v-show 用法和v-if相同，只是v-show將元素display設置成none，並不是將元素直接移除
- v-else:元素必須緊跟在v-if或v-show元素的后面——否則它不能被識別。
<div v-if="a"></div>
<div v-else></div>- v-bind:給頁面中html屬性進行綁定，擁有縮寫“:”，也推薦使用縮寫
<img v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:'red',fontSize:'30px'}
}可以縮寫成這樣
<img :src="img" />
<div :style="styles">style</div>- v-on:對頁面中的事件進行綁定,使用方法 v-on:click="函數名稱",函數就是存放在methods屬性里的方法名，例如
<button v-on:click="oclick()">點擊</button>
methods:{
oclick:function(){
alert(1);
}
}也有縮寫“@”
<button @click="oclick()">點擊</button>效果是一樣的
- $event:事件對象，如同我們原聲js中的event
<div @click="show($event)">點我</div>
methods:{
show:function(ev){
alert(ev.clientX)
}
}結果：
- stop:阻止事件冒泡
//原聲:ev.cancelBubble=true;
@click.stop="show()"- prevent:阻止默認事件
//原聲:ev.preventDefault();
@click.prevent="show()"- self:當事件在該元素本身觸發時觸發回調
@click.felf="show()"- capture:添加事件偵聽器時使用事件捕獲模式
@click.capture="show()"- 鍵盤事件:
//原聲：ev.keyCode (13回車)
/*@keydown:任意鍵按下 @keyup:任意鍵抬起
//方向鍵：.up:上 .down:下 .right:右 .left:左 .enter:回車
//鍵碼：.13:回車
<div @keydown="get()">啦啦啦~</div>
<div @keyup.enter="get()">啦啦啦~</div>看上面例子就注意到vue支持鍵碼
- 過濾器：
<p>{{ jiexige|uppercase }}</p> //uppercase 大寫、 lowercase 小寫、 capitalize 首字母大寫、currency 參數:"￥" 錢幣以上是vue基本使用，接下來講講vue-cli的需要注意的格式，最后做個經典例子“TODOLIST”
- vue對象里不能有縮進，一般縮進用兩個空格代替
- 冒號后面要跟一個空格
- 逗號后面也要跟一個空格
- 存放鏈接需要使用require
- 數據只能用單引號包着
{ url: require('./assets/images/img4.png'), }目前只注意到這些，將不定期更新，下面來做個例子：我先前做好了可以點擊此處看演示TODOLIST， 下面我來講解下
我的數據層
window.onload = function(){
new Vue({
el: "#todu",
data: {
myData: [],
username: "",
ages: "",
nowindex: 1,
m: false
},
methods: {
addData:function(){
if(this.$refs.sele.value==""){
alert("請填滿資料！")
}else{
this.myData.push({
name:this.username,
age:this.ages
});
this.username="",
this.ages=""
}
},
noindex:function(n){
if(n==-1){
this.myData = [];
}else{
this.myData.splice(n,1);
}
}
}
});
}視圖層
<div class="container" id="todu"> <h1 class="text-center">TODOLIST</h1> <form role="form"> <label for="name">名稱：</label> <input type="text" class="form-control" name="name" id="name" ref="sele" placeholder="請輸入名稱" v-model="username"> <br> <label for="sag">年齡：</label> <input type="text" class="form-control" name="seg" id="seg" ref="sele" placeholder="請輸入年齡" v-model="ages"> <br> <div> <button type="button" class="btn btn-primary" @click="addData()" value="添加">添加</button> <input class="btn btn-danger" type="reset" value="重置"> </div> </form> <hr> <h3 class="text-center text-muted">數據查詢列表</h3> <table role="table" class="table"> <tr> <th class="text-center">#</th> <th class="text-center">名稱</th> <th class="text-center">年齡</th> <th class="text-center">操作</th> </tr> <tr class="text-center" v-for="(list,index) in myData"> <td>{{index+1}}</td> <td>{{list.name}}</td> <td>{{list.age}}</td> <td> <button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowindex=index,m=false">刪除</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="4"> <p class="text-center text-muted">暫無數據……</p> </td> </tr> <tr v-show="myData.length!=0"> <td colspan="4" class="text-right"> <button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">刪除全部</button> </td> </tr> </table> <!--模態框 彈出框--> <div role="dialog" class="modal fade" id="layer" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">確定<span v-show="m">全部</span>刪除嗎？</h4> <div class="text-right"> <button class="btn btn-primary" data-dismiss="modal">取消</button> <button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">確定</button> </div> </div> </div> </div> </div> </div>我做的時候引用了bootstrap的js文件，所以有些彈框效果是基於bootstrap的。 關於html布局我就不說了，相信你們都是有基礎的，我就從添加數據開始說。
data: {
myData: [],
username: "",
ages: "",
nowindex: 1,
m: false
}<label for="name">名稱：</label>
<input type="text" class="form-control" name="name" id="name" ref="sele" placeholder="請輸入名稱" v-model="username">
<br>
<label for="sag">年齡：</label>
<input type="text" class="form-control" name="seg" id="seg" ref="sele" placeholder="請輸入年齡" v-model="ages">
<br>
<div>
<button type="button" class="btn btn-primary" @click="addData()" value="添加">添加</button>addData:function(){
if( this.$refs.sele.value==""){
alert("請填滿資料！")
}else{
this.myData.push({
name:this.username,
age:this.ages
});
this.username="",
this.ages=""
}
},建兩個變量username、ages用來存放input利用v-model傳過來的名稱和年齡，在通過點擊添加觸發addData()將收到值的兩個變量添加到建的數組當中在清除兩個變量。 這樣就形成了添加數據，那該如何刪除添加后的數據呢？
<tr class="text-center" v-for="(list,index) in myData"> <td>{{index+1}}</td> <td>{{list.name}}</td> <td>{{list.age}}</td> <td> <button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowindex=index,m=false">刪除</button> </td> </tr><div class="modal-header">
<h4 class="modal-title">確定<span v-show="m">全部</span>刪除嗎？</h4>
<div class="text-right">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">確定</button>
</div>
</div>data: {
myData: [],
username: "",
ages: "",
nowindex: 1,
m: false
}noindex:function(n){
if(n==-1){
this.myData = [];
}else{
this.myData.splice(n,1);
}
}其實很簡單給個判斷就好了，如果是刪除單個的話，點擊刪除后將當前下標傳給變量nowindex，再將變量當參數傳給noindex（nowindex），最后noindex方法里面判斷nowindex是多少，在使用splice（n,1）刪除在數組中第n個值。
<button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">刪除全部</button>刪除全部直接將變量值賦-1，判斷如果-1就清空數組。
有公眾號了，不定期推送熱門前端技術文章！！！
