用Vue改dom

如何
用vue改dom
vue看十天的心得整理
v1.0
Chris

先寫個html檔
加上CDN
<script src="https://unpkg.com/vue"></script>

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

<body>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

驗證ok
1. Browser印出「Hello Vue.js!」
2. 打開Console，並且輸入「app.messag」
會印出「Hello Vue.js!」

正片開始
如何用vue修改一個dom!!

<tagName attrProperty="attrValue">content</tagName>
使用自訂tag name
操作attribute
把變數放進content

使用自訂tag name
用component，比較複雜
另外寫一篇再講。XDDD

操作attribute
v-bind: attribute，可以簡寫成 :attribute

attr prop加一群attr value
• Html
v-bind:attr=“data1"
• Javascript
data: {
data1: 'cssClass1 cssClass2',
}
• 渲染完attr變成
attr=“cssClass1 cssClass2”

attr prop加多群attr value
• Html
v-bind:attr=“[data1, data2]”
• Javascript
data: {
data1: 'cssClass1 cssClass2',
data2: ‘cssClass3 cssClass4’
}
attr=“cssClass1 cssClass2 cssClass3 cssClass4”

條件控制
一個attr value加與不加
• Html
v-bind:attr=“{ cssClass1: isActive }”
• Javascript
data: {
isActive: false
}
attr=“”

條件控制
多個attr value加與不加
• Html
v-bind:attr=“cssGroup”
• Javascript
data: {
cssGroup {
cssClass1: false,
}
}
attr=“”

用在component
另外加的attr和component上的attr value，取聯集。

修改content
直接輸出
Html
{{ data1 }}
Javascript
data: {
data1: ‘<b>hello world</b>’
}
渲染後的結果(html tag當作內容)
<b>hello world</b>

修改content
後製輸出
Html
{{ data1 | toUpperCase }}
Javascript
data: {
},
filter: {
toUpperCase: function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase()
}
}
渲染後的結果(html tag當作內容)
<B>HELLO WORLD</B>

修改content
輸出成html
Html
<tagName v-html=“data1”></tagName>
Javascript
data: {
}
渲染後的結果(html會渲染出結果)
hello world

修改content
多筆資料輸出
Html
v-for 所在的HTML tag會複製
items內容item由v-for命名指定
一個一個加到指定位置，(可以也用v-bind加到屬性)
<tagName v-for=“item in items”>{{item.name}}</tagName>
Javascript
data: {
items: [ {name: ‘chris’}, {name: ‘mary’}]
}
chris
Mary

修改content
多筆物件輸出
Html
承上，v-for寫在template將要複製的HTML tag括起來
<template v-for="item in items">
<div>{{item.name}}</div>
<div>{{item.age}}</div>
</template>
Javascript
data: {
items: [ {name: ‘chris’, age: 25}, {name: ‘mary’, age: ‘20’}]
}
chris
25
Mary
20

遺珠之憾
• v-bind array要加判斷式(用object)的混合技法
• v-bind:style 的使用，很像css的使用方式
• 自動補上 vendor prefix
• v-if in template
• v-else
• v-else-if
• v-show
• key, value in v-for
• v-for的詳細用法(在object, array, 不會觸發view更新的地方，後製函數)

用Vue改dom

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie 用Vue改dom

Ähnlich wie 用Vue改dom (20)

Mehr von Chris Wang

Mehr von Chris Wang (20)

用Vue改dom