Vue.js基礎2

標籤：指令   第一個   uppercase   字串   strong   style   聲明   刪除元素   als   

聲明式渲染

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

 

　　明天繼續啦。。。。。。

 

Vue.js基礎2