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

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

準備：

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

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

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

示例

    
    
    


    

        

            
Vue demo
            

            .......
            
        
    

現在我們來先看段代碼：

    
{{message}}


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

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

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

    
{{message}}

就是視圖層，而

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，然后利用表達式{{}}將數據顯示到頁面。

接下來再看個例子：

  
{{ message }}
  


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

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

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

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

  
Now you see me


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

v-for:控制html元素的循環，實現數據列表

  

    

      {{ 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設置成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="函數名稱",函數就是存放在methods屬性里的方法名，例如

點擊

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

也有縮寫“@”

點擊

效果是一樣的

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

點我

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

結果：
177

stop:阻止事件冒泡

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

prevent:阻止默認事件

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

self:當事件在該元素本身觸發時觸發回調

@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 參數:"￥" 錢幣

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);
                        }
                    }
                }
            });
        }

視圖層

    
TODOLIST
    

        名稱：
        
        

        年齡：
        
        

        

            添加
            
        
    
    

    
數據查詢列表
    

        

            
#
            
名稱
            
年齡
            
操作
        
        

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

                刪除
            
        
        

            

                
暫無數據……
            
        
        

            

                刪除全部
            
        
    
    
    

        

            

                

                    
確定全部刪除嗎？
                    

                        取消
                        確定
                    
                
            
        
    

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

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

名稱：



年齡：




添加

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()將收到值的兩個變量添加到建的數組當中在清除兩個變量。
這樣就形成了添加數據，那該如何刪除添加后的數據呢？

    {{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);
    }
}

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

刪除全部

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