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

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

準(zhǔn)備：

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

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

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

示例

    
    
    


    

        

            
Vue demo
            

            .......
            
        
    

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

    
{{message}}


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

這個(gè)例子在瀏覽器解析時(shí)會(huì)輸出hello vue.js。

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

    
{{message}}

就是視圖層，而

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

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

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

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

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

components:創(chuàng)建組件

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

接下來再看個(gè)例子：

  
{{ message }}
  


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

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

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

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

  
Now you see me


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

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

  

    

      {{ todo.text }}
    
  


new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" }
    ]
  }
})

v-show:元素會(huì)始終渲染并保持在dom中，并且安全性沒有v-if高，因?yàn)関-show 用法和v-if相同，只是v-show將元素display設(shè)置成none，并不是將元素直接移除

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

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

style

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

可以縮寫成這樣

style

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

點(diǎn)擊

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

也有縮寫“@”

點(diǎn)擊

效果是一樣的

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

點(diǎn)我

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ā)時(shí)觸發(fā)回調(diào)

@click.self="show()"

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

@click.capture="show()"

鍵盤事件:

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

啦啦啦~
啦啦啦~

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

過濾器：

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

vue對象里不能有縮進(jìn)，一般縮進(jìn)用兩個(gè)空格代替

冒號(hào)后面要跟一個(gè)空格

逗號(hào)后面也要跟一個(gè)空格

存放鏈接需要使用require

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

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

目前只注意到這些，將不定期更新，下面來做個(gè)例子：我先前做好了可以點(diǎn)擊此處看演示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ù)……
            
        
        

            

                刪除全部
            
        
    
    
    

        

            

                

                    
確定全部刪除嗎？
                    

                        取消
                        確定
                    
                
            
        
    

我做的時(shí)候引用了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=""
}
},

建兩個(gè)變量username、ages用來存放input利用v-model傳過來的名稱和年齡，在通過點(diǎn)擊添加觸發(fā)addData()將收到值的兩個(gè)變量添加到建的數(shù)組當(dāng)中在清除兩個(gè)變量。
這樣就形成了添加數(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);
    }
}

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

刪除全部

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