Vue.js基礎2

聲明式渲染

　　Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式的將數據渲染進 DOM：　

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

　　我們已經生成了我們的第一個 Vue 應用！看起來這跟單單渲染一個字元串模板非常類似，但是 Vue 在背後做了大量工作。現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的。我們如何知道？打開你的瀏覽器的控制台（就在這個頁面打開），並修改 app.message，你將看到上例相應地更新。

條件與迴圈

　　控制切換一個元素的顯示也相當簡單：　　

<div id="app-3">
  <p v-if="seen">現在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})　　

　　繼續在控制台設置 app3.seen = false，你會發現 “現在你看到我了” 消失了。

　　這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據。而且，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/刪除元素時自動應用過渡效果。

　　v-for 指令可以綁定數組的數據來渲染一個項目列表：

　　　　　<div id="div">
            <ul>
                <li v-for="item in arr">{{item}} {{$index}}</li>
            </ul>
        </div>

　　　　　　　　　new Vue({
                    el:"#div",//id名     el:element
                    data:{
                        arr:[1,2,3,4,5]//展示的數據
                    }
                })

　　另一種書寫的方式：

<ul>
     <li v-for="(key,value) in json">{{$index}} {{key}} {{value}}</li>
</ul>

new Vue({
    el:"#div",//id名     el:element
    data:{
         json:{
         　　a:123,
         　　b:3454,
         　　c:'werwer',
         　　d:4645645
         }
    }
})

　　過濾器

<div id="div">
    {{iNum | currency '￥'}}<br /> 
    {{str1 | capitalize}}<br />
    {{str2 | uppercase}}<br />
    {{str3 | lowercase}}<br />
    {{arr | limitBy 3}}
 </div>

new Vue({
    el:"#div",//id名     el:element
    data:{
        iNum:123456789,//貨幣符號過濾器
        str1:'welcome to vue',//首字母大寫
        str2:"welcome to vue",//全部大寫
        str3:'WELCOME TO VUE', //全部小寫
        arr:[1,2,3,4,5,6]
    }
})

　　明天繼續啦。。。。。。