Vue小記（第一天）

引入Vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue指令

v-bind:title="message"

<span v-bind:title="message">懸停查看</span>

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

控制元素是否顯示 v-if="seen"

值得注意的是，當seen：false的時候瀏覽器並不會渲染dom元素。

渲染列表v-for="todo in todos"

在控制檯裏，輸入app.todos.push({text:'新項目'})，你會發現列表最後添加了一個新項目。

爲了讓用戶和你的應用進行交互，我們可以用 v-on:"change" 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法：

     點擊之後   

這裏可看出所有有關數據的都放在data裏，方法放在methods裏。

v-model="message"指令用來實現表單輸入和應用狀態之間的雙向綁定：