模板渲染{{}}直接可以讀出data中的資料，若data中是屬性值，用v-bind渲染到頁面，簡寫：例如：有一個title的屬性，要用data中的資料，則<div :title="message">或者<div v-bind:title="message">

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

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

條件和迴圈

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

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

<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text : '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛專案' } ] }})

呼叫例項中的方法 v-on：可以簡寫為@clcik

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆轉訊息</button></div>

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }})

資料雙向繫結v-model

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"></div>

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

元件註冊元件註冊元件時，第一是元件模板的名字，也就是標籤的名字，第二個是元件的內容，template：後面是元件內的標籤內容

// 定義名為 todo-item 的新元件Vue.component('todo-item', { template: '<li>這是個待辦項</li>'})

構建元件模板 <ol> <!-- 建立一個 todo-item 元件的例項 --> <todo-item></todo-item></ol>

從父元素中獲取data傳入元件props：這個屬性可以獲取父元素傳過來的值在註冊元件的時候這樣寫 Vue.component('todo-item', { // todo-item 元件現在接受一個 // "prop"，類似於一個自定義屬性 // 這個屬性名為 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>'})用props接收一個叫todo的值

在元件中用v-bind將這個todo的值傳過來，可以簡寫：<div id="app-7"> <ol> <!-- 現在我們為每個 todo-item 提供待辦項物件 待辦項物件是變數，即其內容可以是動態的。 我們也需要為每個元件提供一個“key”，晚些時候我們會做個解釋。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol></div>
元件初始化-構建函式 var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '乳酪' }, { id: 2, text: '隨便其他什麼人吃的東西' } ] }})