SlideShare a Scribd company logo
如何
用vue改dom
vue看十天的心得整理
v1.0
Chris
寫個hello world
先寫個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變成
attr=“cssClass1 cssClass2 cssClass3 cssClass4”
條件控制
一個attr value加與不加
• Html
v-bind:attr=“{ cssClass1: isActive }”
• Javascript
data: {
isActive: false
}
• 渲染完attr變成
attr=“”
條件控制
多個attr value加與不加
• Html
v-bind:attr=“cssGroup”
• Javascript
data: {
cssGroup {
cssClass1: false,
}
}
• 渲染完attr變成
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: {
data1: ‘<b>hello world</b>’
},
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: {
data1: ‘<b>hello world</b>’
}
渲染後的結果(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’}]
}
渲染後的結果(html會渲染出結果)
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’}]
}
渲染後的結果(html會渲染出結果)
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更新的地方,後製函數)

More Related Content

What's hot

ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8
twMVC
 
jQuery入門
jQuery入門jQuery入門
jQuery入門
鈺棠 徐
 
Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)
dplayerd
 
初学者导学:使用全局热键
初学者导学:使用全局热键初学者导学:使用全局热键
初学者导学:使用全局热键
Water Sky
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
 
Javascript template & react js 初探
Javascript template & react js 初探Javascript template & react js 初探
Javascript template & react js 初探
wantingj
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
twMVC
 
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
 

What's hot (8)

ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8
 
jQuery入門
jQuery入門jQuery入門
jQuery入門
 
Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)
 
初学者导学:使用全局热键
初学者导学:使用全局热键初学者导学:使用全局热键
初学者导学:使用全局热键
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
Javascript template & react js 初探
Javascript template & react js 初探Javascript template & react js 初探
Javascript template & react js 初探
 
Angular js twmvc#17
Angular js twmvc#17Angular js twmvc#17
Angular js twmvc#17
 
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
 

Similar to 用Vue改dom

以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
Ben Lue
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
 
视图模式
视图模式视图模式
视图模式
Li Zhang
 
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
jay li
 
Docker應用
Docker應用Docker應用
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
 
Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學
Wei-Xiang Wang
 
Nodejs api server_implement
Nodejs api server_implementNodejs api server_implement
Nodejs api server_implement
Chi-wen Sun
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
 
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
 
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
Weizhong Yang
 
Flash RIA Usability
Flash RIA UsabilityFlash RIA Usability
Flash RIA Usability
nbaction
 
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionicStudy4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
 
Visual studio 2017 with gulp
Visual studio 2017 with gulpVisual studio 2017 with gulp
Visual studio 2017 with gulp
Yosheng Zhang
 

Similar to 用Vue改dom (20)

以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
视图模式
视图模式视图模式
视图模式
 
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
 
Docker應用
Docker應用Docker應用
Docker應用
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
 
Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學
 
Nodejs api server_implement
Nodejs api server_implementNodejs api server_implement
Nodejs api server_implement
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
 
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
 
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
 
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
 
Flash RIA Usability
Flash RIA UsabilityFlash RIA Usability
Flash RIA Usability
 
Flash ria usability 刘轩飞
Flash ria usability 刘轩飞Flash ria usability 刘轩飞
Flash ria usability 刘轩飞
 
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionicStudy4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
 
I os 16
I os 16I os 16
I os 16
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
 
Visual studio 2017 with gulp
Visual studio 2017 with gulpVisual studio 2017 with gulp
Visual studio 2017 with gulp
 

More from Chris Wang

屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
Chris Wang
 
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
Chris Wang
 
歡迎加入軟體構築行列
歡迎加入軟體構築行列歡迎加入軟體構築行列
歡迎加入軟體構築行列
Chris Wang
 
自我探索的資訊教育
自我探索的資訊教育自我探索的資訊教育
自我探索的資訊教育
Chris Wang
 
完美 camp 進化論
完美 camp 進化論完美 camp 進化論
完美 camp 進化論
Chris Wang
 
Dm create message old
Dm create message oldDm create message old
Dm create message old
Chris Wang
 
Dm create message new
Dm create message newDm create message new
Dm create message new
Chris Wang
 
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
Chris Wang
 
MVC Design in Web backend Server
MVC Design in Web backend ServerMVC Design in Web backend Server
MVC Design in Web backend Server
Chris Wang
 
Bug afx ini-line122
Bug afx ini-line122Bug afx ini-line122
Bug afx ini-line122
Chris Wang
 
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
Chris Wang
 
VC6 font setup tips
VC6 font setup tipsVC6 font setup tips
VC6 font setup tips
Chris Wang
 
MFC tips for single document
MFC tips for single documentMFC tips for single document
MFC tips for single document
Chris Wang
 
CString of MFC skills
CString of MFC skillsCString of MFC skills
CString of MFC skills
Chris Wang
 
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
Chris Wang
 
偷偷學習 Python3
偷偷學習 Python3偷偷學習 Python3
偷偷學習 Python3
Chris Wang
 
思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構
Chris Wang
 
從 Flux 認識 vuex
從 Flux 認識 vuex從 Flux 認識 vuex
從 Flux 認識 vuex
Chris Wang
 
Information architecture reading ch7
Information architecture reading ch7Information architecture reading ch7
Information architecture reading ch7
Chris Wang
 
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
Chris Wang
 

More from Chris Wang (20)

屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
 
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
 
歡迎加入軟體構築行列
歡迎加入軟體構築行列歡迎加入軟體構築行列
歡迎加入軟體構築行列
 
自我探索的資訊教育
自我探索的資訊教育自我探索的資訊教育
自我探索的資訊教育
 
完美 camp 進化論
完美 camp 進化論完美 camp 進化論
完美 camp 進化論
 
Dm create message old
Dm create message oldDm create message old
Dm create message old
 
Dm create message new
Dm create message newDm create message new
Dm create message new
 
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
 
MVC Design in Web backend Server
MVC Design in Web backend ServerMVC Design in Web backend Server
MVC Design in Web backend Server
 
Bug afx ini-line122
Bug afx ini-line122Bug afx ini-line122
Bug afx ini-line122
 
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
 
VC6 font setup tips
VC6 font setup tipsVC6 font setup tips
VC6 font setup tips
 
MFC tips for single document
MFC tips for single documentMFC tips for single document
MFC tips for single document
 
CString of MFC skills
CString of MFC skillsCString of MFC skills
CString of MFC skills
 
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
 
偷偷學習 Python3
偷偷學習 Python3偷偷學習 Python3
偷偷學習 Python3
 
思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構
 
從 Flux 認識 vuex
從 Flux 認識 vuex從 Flux 認識 vuex
從 Flux 認識 vuex
 
Information architecture reading ch7
Information architecture reading ch7Information architecture reading ch7
Information architecture reading ch7
 
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
 

用Vue改dom