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

 

　　明天繼續啦。。。。。。