(以下文章適用於Vue.js 2.X版本)
var vm = new Vue({
})
var vm = new Vue({
el: "#app"
...
})
- el: 掛載指定的物件(element),使其&其所有子物件都可以應用 Vue
最基本的 Vue 物件就建立起來了。
v-model
#app
input(v-model="username" placeholder="your name")
p(v-if="username") hi! {{username}}
var vm = new Vue({
el: "#app",
data: {
username: ''
}
})
v-on
(簡寫 @
) 事件
<div id="app">
<p>click {{ num }} 下</p>
<input type="submit" value="click" v-on:click="clickNum">
</div>
var vm = new Vue({
el: "#wrap",
... ,
methods: {
clickNum(){
...
}
}
})
v-for
<div id="app">
<p>hi!我是 {{name}}</p>
<ul v-for="friend in friends">
<li>{{friend}}</li>
</ul>
</div>
var vm = new Vue({
el: "#app",
data:{
name: "Eudora",
friends:['Amy','Betty','Claire']
}
})
<div id="app">
<input v-model="username" placeholder="your name"/>
<p v-if="username">hi! {{username}}</p>
</div>
var vm = new Vue({
el: "#app",
data: {
username: ''
}
})
<div id="app">
<ul>
<li :class="{'active':tab=='menu1'}" @click="tab='menu1'">menu1</li>
<li :class="{'active':tab=='menu2'}" @click="tab='menu2'">menu2</li>
<li :class="{'active':tab=='menu3'}" @click="tab='menu3'">menu3</li>
</ul>
</div>
var vm = new Vue({
el: "#app",
data: {
tab: 'menu1'
}
})
.active{
...
}
個人 Blog: https://eudora.cc/
感謝分享
補充 new Vue() 是 Vue 2 語法,
Vue 3 用 Vue.createApp() 取代 new Vue()
https://book.vue.tw/appendix/migration.html#%E5%85%83%E4%BB%B6%E5%AF%A6%E9%AB%94%E5%BB%BA%E7%AB%8B
Vue 2 support will end on Dec 31, 2023. Learn more about Vue 2 Extended LTS.
The Benefits of the New Vue 3 App Initialization Code