Submit Search
Upload
用Vue改dom
•
1 like
•
313 views
Chris Wang
Follow
給剛要學vue的人的快速體驗+學習 Blog版 https://dwatow.github.io/2017/09-02-modify-dom-by-vuejs/
Read less
Read more
Software
Report
Share
Report
Share
1 of 22
Recommended
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Vue.js
Vue.js
ZongYing Lyu
Lab01 cloud project
Lab01 cloud project
Jeff Chu
React JS
React JS
漢麟 王
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
webpack 入門
webpack 入門
Anna Su
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
React基礎教學
React基礎教學
昇倫 蔡
Recommended
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Vue.js
Vue.js
ZongYing Lyu
Lab01 cloud project
Lab01 cloud project
Jeff Chu
React JS
React JS
漢麟 王
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
webpack 入門
webpack 入門
Anna Su
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
React基礎教學
React基礎教學
昇倫 蔡
ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8
twMVC
jQuery入門
jQuery入門
鈺棠 徐
Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)
dplayerd
初学者导学:使用全局热键
初学者导学:使用全局热键
Water Sky
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
Angular js twmvc#17
Angular js twmvc#17
twMVC
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
Ben Lue
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
视图模式
视图模式
Li Zhang
JavaScript Engine
JavaScript Engine
jay li
Docker應用
Docker應用
Jui An Huang (黃瑞安)
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
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 完整教學
Wei-Xiang Wang
Nodejs api server_implement
Nodejs api server_implement
Chi-wen Sun
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
Weizhong Yang
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
Chui-Wen Chiu
More Related Content
What's hot
ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8
twMVC
jQuery入門
jQuery入門
鈺棠 徐
Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)
dplayerd
初学者导学:使用全局热键
初学者导学:使用全局热键
Water Sky
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
Angular js twmvc#17
Angular js twmvc#17
twMVC
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
What's hot
(8)
ASP.NET MVC Web API -twMVC#8
ASP.NET MVC Web API -twMVC#8
jQuery入門
jQuery入門
Jenkins 自動測試 (使用 NodeJS)
Jenkins 自動測試 (使用 NodeJS)
初学者导学:使用全局热键
初学者导学:使用全局热键
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Javascript template & react js 初探
Javascript template & react js 初探
Angular js twmvc#17
Angular js twmvc#17
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
Similar to 用Vue改dom
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
Ben Lue
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
视图模式
视图模式
Li Zhang
JavaScript Engine
JavaScript Engine
jay li
Docker應用
Docker應用
Jui An Huang (黃瑞安)
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
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 完整教學
Wei-Xiang Wang
Nodejs api server_implement
Nodejs api server_implement
Chi-wen Sun
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
Weizhong Yang
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
Chui-Wen Chiu
Flash RIA Usability
Flash RIA Usability
nbaction
Flash ria usability 刘轩飞
Flash ria usability 刘轩飞
FLASH开发者交流会
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
I os 16
I os 16
信嘉 陳
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
Visual studio 2017 with gulp
Visual studio 2017 with gulp
Yosheng Zhang
Similar to 用Vue改dom
(20)
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
视图模式
视图模式
JavaScript Engine
JavaScript Engine
Docker應用
Docker應用
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學
Nodejs api server_implement
Nodejs api server_implement
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
Flash RIA Usability
Flash RIA Usability
Flash ria usability 刘轩飞
Flash ria usability 刘轩飞
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
I os 16
I os 16
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
Visual studio 2017 with gulp
Visual studio 2017 with gulp
More from Chris Wang
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
Chris Wang
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
Chris Wang
歡迎加入軟體構築行列
歡迎加入軟體構築行列
Chris Wang
自我探索的資訊教育
自我探索的資訊教育
Chris Wang
完美 camp 進化論
完美 camp 進化論
Chris Wang
Dm create message old
Dm create message old
Chris Wang
Dm create message new
Dm create message new
Chris Wang
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
Chris Wang
MVC Design in Web backend Server
MVC Design in Web backend Server
Chris Wang
Bug afx ini-line122
Bug afx ini-line122
Chris Wang
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
Chris Wang
VC6 font setup tips
VC6 font setup tips
Chris Wang
MFC tips for single document
MFC tips for single document
Chris Wang
CString of MFC skills
CString of MFC skills
Chris Wang
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
Chris Wang
偷偷學習 Python3
偷偷學習 Python3
Chris Wang
思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構
Chris Wang
從 Flux 認識 vuex
從 Flux 認識 vuex
Chris Wang
Information architecture reading ch7
Information architecture reading ch7
Chris Wang
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
Chris Wang
More from Chris Wang
(20)
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
屏東縣政府112年度大專青年公部門暑期工讀計畫簡章.pdf
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
歡迎加入軟體構築行列
歡迎加入軟體構築行列
自我探索的資訊教育
自我探索的資訊教育
完美 camp 進化論
完美 camp 進化論
Dm create message old
Dm create message old
Dm create message new
Dm create message new
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
MVC Design in Web backend Server
MVC Design in Web backend Server
Bug afx ini-line122
Bug afx ini-line122
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
VC6 font setup tips
VC6 font setup tips
MFC tips for single document
MFC tips for single document
CString of MFC skills
CString of MFC skills
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
偷偷學習 Python3
偷偷學習 Python3
思考 Vuex 發送 API 的架構
思考 Vuex 發送 API 的架構
從 Flux 認識 vuex
從 Flux 認識 vuex
Information architecture reading ch7
Information architecture reading ch7
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
用Vue改dom
1.
如何 用vue改dom vue看十天的心得整理 v1.0 Chris
2.
寫個hello world
3.
先寫個html檔 加上CDN <script src="https://unpkg.com/vue"></script>
4.
<body> <div id="app"> <p>{{ message
}}</p> </div>
5.
<body> var app =
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
6.
驗證ok 1. Browser印出「Hello Vue.js!」 2.
打開Console,並且輸入「app.messag」 會印出「Hello Vue.js!」
7.
完成第一步
8.
正片開始 如何用vue修改一個dom!!
9.
<tagName attrProperty="attrValue">content</tagName> 使用自訂tag name 操作attribute 把變數放進content
10.
使用自訂tag name 用component,比較複雜 另外寫一篇再講。XDDD
11.
操作attribute v-bind: attribute,可以簡寫成 :attribute
12.
attr prop加一群attr value •
Html v-bind:attr=“data1" • Javascript data: { data1: 'cssClass1 cssClass2', } • 渲染完attr變成 attr=“cssClass1 cssClass2”
13.
attr prop加多群attr value •
Html v-bind:attr=“[data1, data2]” • Javascript data: { data1: 'cssClass1 cssClass2', data2: ‘cssClass3 cssClass4’ } • 渲染完attr變成 attr=“cssClass1 cssClass2 cssClass3 cssClass4”
14.
條件控制 一個attr value加與不加 • Html v-bind:attr=“{
cssClass1: isActive }” • Javascript data: { isActive: false } • 渲染完attr變成 attr=“”
15.
條件控制 多個attr value加與不加 • Html v-bind:attr=“cssGroup” •
Javascript data: { cssGroup { cssClass1: false, } } • 渲染完attr變成 attr=“”
16.
用在component 另外加的attr和component上的attr value,取聯集。
17.
修改content 直接輸出 Html {{ data1 }} Javascript data:
{ data1: ‘<b>hello world</b>’ } 渲染後的結果(html tag當作內容) <b>hello world</b>
18.
修改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>
19.
修改content 輸出成html Html <tagName v-html=“data1”></tagName> Javascript data: { data1:
‘<b>hello world</b>’ } 渲染後的結果(html會渲染出結果) hello world
20.
修改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
21.
修改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
22.
遺珠之憾 • 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更新的地方,後製函數)