vue中的指令

一、聲明式渲染有兩種：

1.插值用兩個花括號如：{{內容}}

例子：html

<div id="app1">
    <p>{{message}}</p>
</div>

js:

var nv = new Vue({
    el:'#app1',
    data:{
        message:'哈嘍！',
    }
})

2.綁定數據如：v-bind:標簽屬性=“插入的內容”

html:

<div id="app2">
    <span :title="message2">
        鼠標懸停在這里
    </span>
</div>

js:

var app2 =  new Vue({
      el:'#app2',
      data:{
          message2:'頁面加載於'+ new Date().toLocaleString()
      }
  })

二、條件與循環

1.v-if="一個變量"，在data中用tru和false來判斷是否顯示

html:

<div id="app3">
    <span v-if="seen">看見我</span>
</div>

js:

var app3 = new Vue({
    el:"#app3",
    data:{
        seen:true   //用true和false來判斷能否看見內容
    }
})

 

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

html:

<div id="app4">
    <ul>
        <li v-for="item in itemList">{{item}}</li>
    </ul>
</div>

 

js:

var app4 = new Vue({
    el:"#app4",
    data:{
        itemList:['第一項','第二項','第三項']
    }
})

三、處理用戶輸入

1. v-on 指令綁定一個事件監聽器 

html:

<div id="app5">
    <span >{{message5}}</span>
    <button v-on:click="news">點擊扭轉</button>
</div>

js:

var app5 = new Vue({
    el:'#app5',
    data:{
        message5:'hello vue!'
    },
    methods:{
        news:function(){
            this.message5 = this.message5.split('').reverse().join('')
        }
    }
})

2.數據雙向綁定

html

<div id="app6">
    <span>{{message6}}</span>
    <input type="text" v-model="message6">
</div>

js:

var app = new Vue({
    el:"#app6",
    data:{
        message6:'數據雙向綁定'
    }
})