[筆記] Vue.js

vuejs.org

引入 cdn

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

常用屬性

v-html

//屬性
<div v-bind:id="123"></div>
<button v-bind:disabled="isDisabled">Click</button>

//樣式
v-bind:class="class1"
:class="class1"
v-bind:class="isSuccess && 'success'"
v-bind:class="isSuccess ? 'success' : 'fail'"

v-bind:class="['class1', 'class2']"

v-bind:class="{
	class1: isClass1,
	class2: isClass2,
}"

v-bind:style="styleObject"
v-bind:style="{ 
    color: activeColor, 
    fontSize: fontSize + 'px' 
}"
v-bind:style="[ baseStyle, overridingStyle ]" // 若有衝突，後者覆蓋前者

// 顯示與否
// 若 if=false 則 dom 不會有 element
// 若 show=false 則 style="display: none;"
v-if=""
v-else-if=""
v-else
v-show=""

<div v-if="num === 0">The number is zero</div>
<div v-else-if="num < 0">The number is negative</div>
<div v-else-if="num > 0">The number is positive</div>
<div v-else>Not a number</div>

//迴圈
// 缺少 key 會造成綁定錯誤
// key 不能用 object 或 array
// key 在 for 中必須是唯一，通常用 id
v-for="n in 10"
v-for="value in arr" :key="value"
v-for="(value, index) in arr"
v-for="(value, key) in arr"
v-for="(value, key, index) in arr"

// if 必須放在 for 之下
<div v-for="name in names" :key="name" v-if="name === 'Tom'">{{ name }}</div> //v-if 先，但此時還未有 name 所以報錯
<template v-for="name in names" :key="name">
    <div v-if="name === 'Tom'">{{ name }}</div>
</template>

//事件
@event
v-on:event

v-on:click
v-on:click="counter += 1"
v-on:click="method"
v-on:click="method('arg')"

v-on:keyup.13
v-on:keyup.enter
v-on:keyup.tab
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right
v-on:keyup.ctrl
v-on:keyup.alt
v-on:keyup.shift
v-on:keyup.meta

v-model
v-model.lazy
v-model.number
v-model.trim

使用

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

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

建立元件

<div id="app">
	<test></test>
</div>

Vue.component('test', {
	template: '<h1>test</h1>'
})

var app = new Vue({
	el: '#app'
})