Vue.js 快速入門

十分鐘複習基本語法

1. 加入 vue.js lib

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js">

2. 建立 vue 實體

在 html 中加上 dom

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

在 js 建立實體

new Vue({
el:'#myVue',
data:{
message : 'hello world'
}
});

3. 用 v-if 控制顯示元件

<span v-if="show">{{ message }}</span> 

在 js 中設定 show

new Vue({
el:'#myVue',
data:{
message : 'hello world',
show : true
}
});

4. 用 v-model 幫 input 做雙向綁定

<input type="text" v-model="message">

5. 用 v-bind 綁定屬性值

<span v-if="show" v-bind:title="message">{{ message }}</span>

6. 用 v-on 綁定事件

<button v-on:click="hide">test</button>

在 js 中加入 methods 並且可以透過 this 存取 data

methods:{
hide:function(e){
//這邊的 this 會對應到 vue 的實體, 而 data 會直接成為實體的屬性
//且不能用 arrow function 語法
this.show= !this.show;
}
}

7. 用 v-for 執行迴圈

在 data 中添加陣列和物件

new Vue({
el:'#myVue',
data:{
message : 'hello world',
show : true,
todos: [{text:'todo1'},{text:'todo2'},{text:'todo3'}]
}
});

然後在 html 添加

<ul>
<li v-for="todo in todos">{{ todo.text }}</li>
</ul>

以上的用法主要是 Directives 指令

若想要了解更多用法可以連到這邊 https://vuejs.org/v2/api/#Directives 了解更多

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.