摘要：的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，同時擁有非常容易上手的中英文都有提供快速入門準(zhǔn)備地址地址沒錯就只需要這兩個就可以開發(fā)了是核心文件，在這里只是為了提高開發(fā)效率而引用的，是可選的。專門存儲一些數(shù)據(jù)的屬性，數(shù)據(jù)一定是對象格式。

**關(guān)于前陣子的文章錯誤有點多所以從新修改了并添加了一些在官方腳手架vue-cli開發(fā)時需要注意的事項，
Vue.js是一個輕巧、高性能、可組件化的MVVM庫。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，同時擁有非常容易上手的API（中英文都有提供）**

準(zhǔn)備：

Vue.js 地址：http://cn.vuejs.org/

Bootstrap.js 地址：http://v3.bootcss.com/getting...

沒錯就只需要這兩個就可以開發(fā)了
vue是核心文件，bootstrap在這里只是為了提高開發(fā)效率而引用的，是可選的。
現(xiàn)在建個html文件引入剛下載好的兩個文件這里我們只需要引用bootstrap的css樣式文件即可，現(xiàn)在是這樣的：

示例

    
    
    


    

        

            
Vue demo
            

            .......
            
        
    

現(xiàn)在我們來先看段代碼：

    
{{message}}


new Vue({
    el:"#app",
    data: {
        message:"hello vue.js."
    }
});

這個例子在瀏覽器解析時會輸出hello vue.js。

我們先不管為什么，我們先理解他的邏輯。
在這個例子里我們的

    
{{message}}

就是視圖層，而

new Vue({
    el:"#app",
    data: {
        message:"hello vue.js."
    }
});

就是數(shù)據(jù)層，在使用Vue.js之前，我們都需要先像這樣實例化一個Vue對象。
里面有四個常用的屬性，el、data、methods、components。

el:聲明vuejs管理的邊界，類似于angular的ng-app，把數(shù)據(jù)綁定給誰。
上面的例子中將數(shù)據(jù)綁定給了#app。

data:專門存儲一些數(shù)據(jù)的屬性，數(shù)據(jù)一定是對象格式。
上面的例子中給message賦值hello vue.js!

methods:專門放置我們的事件的方法

components:創(chuàng)建組件

回到上面的例子el指定了#app，data存放了數(shù)據(jù)message，然后利用表達(dá)式{{}}將數(shù)據(jù)顯示到頁面。

接下來再看個例子：

  
{{ message }}
  


new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

這里用到了新的指令v-model，其作用就是接收用戶輸入的一些數(shù)據(jù)，直接就可以將這些數(shù)據(jù) 掛載到data屬性里面，使得實現(xiàn)雙向數(shù)據(jù)綁定更加容易。

接下來介紹一些常用的指令：

v-if:通過判斷加載內(nèi)容，若為真加載，為假時刪除元素

  
Now you see me


new Vue({
  el: "#app",
  data: {
    seen: true
  }
})

v-for:控制html元素的循環(huán)，實現(xiàn)數(shù)據(jù)列表

  

    

      {{ todo.text }}
    
  


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設(shè)置成none，并不是將元素直接移除

v-else:元素必須緊跟在v-if或v-show元素的后面——否則它不能被識別。

v-bind:給頁面中html屬性進行綁定，擁有縮寫“:”，也推薦使用縮寫

style

data:{ 
    img:"img/logo.png",
    styles:{color:"red",fontSize:"30px"}
}
 

可以縮寫成這樣

style

v-on:對頁面中的事件進行綁定,使用方法 v-on:click="函數(shù)名稱",函數(shù)就是存放在methods屬性里的方法名，例如

點擊

methods:{ 
    oclick:function(){ 
        alert(1); 
    } 
}

也有縮寫“@”

點擊

效果是一樣的

$event:事件對象，如同我們原聲js中的event

點我

methods:{
    show:function(ev){
      alert(ev.clientX)
    }
}

結(jié)果：
177

stop:阻止事件冒泡

//原聲:ev.cancelBubble=true;
@click.stop="show()"

prevent:阻止默認(rèn)事件

//原聲:ev.preventDefault();
@click.prevent="show()"

self:當(dāng)事件在該元素本身觸發(fā)時觸發(fā)回調(diào)

@click.self="show()"

capture:添加事件偵聽器時使用事件捕獲模式

@click.capture="show()"

鍵盤事件:

//原聲：ev.keyCode (13回車)
/*@keydown:任意鍵按下 @keyup:任意鍵抬起  
//方向鍵：.up:上 .down:下 .right:右 .left:左  .enter:回車 
//鍵碼：.13:回車 

啦啦啦~
啦啦啦~

看上面例子就注意到vue支持鍵碼

過濾器：

{{ jiexige|uppercase }}
//uppercase 大寫、 lowercase 小寫、 capitalize 首字母大寫、currency 參數(shù):"￥" 錢幣

vue對象里不能有縮進，一般縮進用兩個空格代替

冒號后面要跟一個空格

逗號后面也要跟一個空格

存放鏈接需要使用require

數(shù)據(jù)只能用單引號包著

{
    url: require("./assets/images/img4.png"),
}

目前只注意到這些，將不定期更新，下面來做個例子：我先前做好了可以點擊此處看演示TODOLIST，
下面我來講解下

我的數(shù)據(jù)層

window.onload = function(){
            new Vue({
                el: "#todu",
                data: {
                    myData: [],
                    username: "",
                    ages: "",
                    nowindex: 1,
                    m: false
                },
                methods: {
                    addData: function(){
                        if(this.$refs.sele.value==""){
                            alert("請?zhí)顫M資料！")
                        }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);
                        }
                    }
                }
            });
        }

視圖層

    
TODOLIST
    

        名稱：
        
        

        年齡：
        
        

        

            添加
            
        
    
    

    
數(shù)據(jù)查詢列表
    

        

            
#
            
名稱
            
年齡
            
操作
        
        

            
{{index+1}}
            
{{list.name}}
            
{{list.age}}
            

                刪除
            
        
        

            

                
暫無數(shù)據(jù)……
            
        
        

            

                刪除全部
            
        
    
    
    

        

            

                

                    
確定全部刪除嗎？
                    

                        取消
                        確定
                    
                
            
        
    

我做的時候引用了bootstrap的js文件，所以有些彈框效果是基于bootstrap的。
關(guān)于html布局我就不說了，相信你們都是有基礎(chǔ)的，我就從添加數(shù)據(jù)開始說。

data: {
    myData: [],
    username: "",
    ages: "",
    nowindex: 1,
    m: false
}

名稱：



年齡：




添加

addData: function(){
if(this.$refs.sele.value==""){
    alert("請?zhí)顫M資料！")
}else{
    this.myData.push({
        name:this.username,
        age:this.ages
    });
    this.username="",
    this.ages=""
}
},

建兩個變量username、ages用來存放input利用v-model傳過來的名稱和年齡，在通過點擊添加觸發(fā)addData()將收到值的兩個變量添加到建的數(shù)組當(dāng)中在清除兩個變量。
這樣就形成了添加數(shù)據(jù)，那該如何刪除添加后的數(shù)據(jù)呢？

    {{index+1}}
    {{list.name}}
    {{list.age}}
    
        刪除
    

 

    
確定全部刪除嗎？
    

        取消
        確定
    

data: {
    myData: [],
    username: "",
    ages: "",
    nowindex: 1,
    m: false
}

 noindex: function(n){
    if(n==-1){
        this.myData = [];
    }else{
        this.myData.splice(n,1);
    }
}

其實很簡單給個判斷就好了，如果是刪除單個的話，點擊刪除后將當(dāng)前下標(biāo)傳給變量nowindex，再將變量當(dāng)參數(shù)傳給noindex（nowindex），最后noindex方法里面判斷nowindex是多少，在使用splice（n,1）刪除在數(shù)組中第n個值。

刪除全部

刪除全部直接將變量值賦-1，判斷如果-1就清空數(shù)組。