Soumettre la recherche
Mettre en ligne
Vue.js
•
Télécharger en tant que PPTX, PDF
•
1 j'aime
•
1,134 vues
ZongYing Lyu
Suivre
Vue.js 入門簡介
Lire moins
Lire la suite
Technologie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 42
Télécharger maintenant
Recommandé
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
How tovuejs
How tovuejs
Daniel Chou
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
modou li
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
Angular js twmvc#17
Angular js twmvc#17
twMVC
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Vue ithome
Vue ithome
Yoyo Young
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Recommandé
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
How tovuejs
How tovuejs
Daniel Chou
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
modou li
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
Angular js twmvc#17
Angular js twmvc#17
twMVC
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Vue ithome
Vue ithome
Yoyo Young
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Vue
Vue
國昭 張
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
webpack 入門
webpack 入門
Anna Su
2021laravelconftwslides10
2021laravelconftwslides10
LiviaLiaoFontech
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
面向未来的重构
面向未来的重构
Kejun Zhang
更好的文件组织
更好的文件组织
Kejun Zhang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
程式人雜誌 2015年三月
程式人雜誌 2015年三月
鍾誠 陳鍾誠
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
2021laravelconftwslides12
2021laravelconftwslides12
LiviaLiaoFontech
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用
EZoApp
JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713
EZoApp
用Vue改dom
用Vue改dom
Chris Wang
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
動手打造 application framework-twMVC#15
動手打造 application framework-twMVC#15
twMVC
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
HTML5概览
HTML5概览
Adam Lu
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Contenu connexe
Tendances
Vue
Vue
國昭 張
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
webpack 入門
webpack 入門
Anna Su
2021laravelconftwslides10
2021laravelconftwslides10
LiviaLiaoFontech
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
面向未来的重构
面向未来的重构
Kejun Zhang
更好的文件组织
更好的文件组织
Kejun Zhang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
程式人雜誌 2015年三月
程式人雜誌 2015年三月
鍾誠 陳鍾誠
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
2021laravelconftwslides12
2021laravelconftwslides12
LiviaLiaoFontech
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用
EZoApp
JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713
EZoApp
用Vue改dom
用Vue改dom
Chris Wang
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
動手打造 application framework-twMVC#15
動手打造 application framework-twMVC#15
twMVC
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
HTML5概览
HTML5概览
Adam Lu
Tendances
(20)
Vue
Vue
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
webpack 入門
webpack 入門
2021laravelconftwslides10
2021laravelconftwslides10
JavaScript Code Quality
JavaScript Code Quality
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
面向未来的重构
面向未来的重构
更好的文件组织
更好的文件组织
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
程式人雜誌 2015年三月
程式人雜誌 2015年三月
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
2021laravelconftwslides12
2021laravelconftwslides12
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713
用Vue改dom
用Vue改dom
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
動手打造 application framework-twMVC#15
動手打造 application framework-twMVC#15
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
HTML5概览
HTML5概览
En vedette
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
Eueung Mulyana
Vue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
Vue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
Why Vue.js?
Why Vue.js?
Jonathan Goode
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Vue.js - o framework progressivo
Vue.js - o framework progressivo
Vinicius Reis
A deep dive into energy efficient multi core processor
A deep dive into energy efficient multi core processor
ZongYing Lyu
Libckpt transparent checkpointing under unix
Libckpt transparent checkpointing under unix
ZongYing Lyu
Device Driver - Chapter 3字元驅動程式
Device Driver - Chapter 3字元驅動程式
ZongYing Lyu
Performance improvement techniques for software distributed shared memory
Performance improvement techniques for software distributed shared memory
ZongYing Lyu
Cvs
Cvs
ZongYing Lyu
提高 Code 品質心得
提高 Code 品質心得
ZongYing Lyu
Parallel program design
Parallel program design
ZongYing Lyu
En vedette
(20)
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue.js for beginners
Vue.js for beginners
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
Vue JS Intro
Vue JS Intro
Vue js and Vue Material
Vue js and Vue Material
Why Vue.js?
Why Vue.js?
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
An Introduction to Vuejs
An Introduction to Vuejs
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Vue js 大型專案架構
Vue js 大型專案架構
Vue.js - o framework progressivo
Vue.js - o framework progressivo
A deep dive into energy efficient multi core processor
A deep dive into energy efficient multi core processor
Libckpt transparent checkpointing under unix
Libckpt transparent checkpointing under unix
Device Driver - Chapter 3字元驅動程式
Device Driver - Chapter 3字元驅動程式
Performance improvement techniques for software distributed shared memory
Performance improvement techniques for software distributed shared memory
Cvs
Cvs
提高 Code 品質心得
提高 Code 品質心得
Parallel program design
Parallel program design
Similaire à Vue.js
前端MVC之backbone
前端MVC之backbone
Jerry Xie
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
Underscore
Underscore
cazhfe
JdonFramework中文
JdonFramework中文
banq jdon
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
twMVC
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
Kuo-Chun Su
React vs Flux
React vs Flux
LC2009
前端开发之Js
前端开发之Js
fangdeng
Javascript autoload
Javascript autoload
jay li
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
Mvc
Mvc
tbmallf2e
Kissy design
Kissy design
yiming he
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
Zhi Zhong
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
J Query Learn
J Query Learn
guestfb42fc
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
Similaire à Vue.js
(20)
前端MVC之backbone
前端MVC之backbone
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Underscore
Underscore
JdonFramework中文
JdonFramework中文
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
React vs Flux
React vs Flux
前端开发之Js
前端开发之Js
Javascript autoload
Javascript autoload
旺铺前端设计和实现
旺铺前端设计和实现
异步编程与浏览器执行模型
异步编程与浏览器执行模型
Real World ASP.NET MVC
Real World ASP.NET MVC
Mvc
Mvc
Kissy design
Kissy design
Spring 2.x 中文
Spring 2.x 中文
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
J Query Learn
J Query Learn
JavaScript Advanced Skill
JavaScript Advanced Skill
Plus de ZongYing Lyu
Architecture of the oasis mobile shared virtual memory system
Architecture of the oasis mobile shared virtual memory system
ZongYing Lyu
Device Driver - Chapter 6字元驅動程式的進階作業
Device Driver - Chapter 6字元驅動程式的進階作業
ZongYing Lyu
Web coding principle
Web coding principle
ZongYing Lyu
SCRUM
SCRUM
ZongYing Lyu
Consistency protocols
Consistency protocols
ZongYing Lyu
Compiler optimization
Compiler optimization
ZongYing Lyu
MPI use c language
MPI use c language
ZongYing Lyu
MPI
MPI
ZongYing Lyu
OpenMP
OpenMP
ZongYing Lyu
Plus de ZongYing Lyu
(9)
Architecture of the oasis mobile shared virtual memory system
Architecture of the oasis mobile shared virtual memory system
Device Driver - Chapter 6字元驅動程式的進階作業
Device Driver - Chapter 6字元驅動程式的進階作業
Web coding principle
Web coding principle
SCRUM
SCRUM
Consistency protocols
Consistency protocols
Compiler optimization
Compiler optimization
MPI use c language
MPI use c language
MPI
MPI
OpenMP
OpenMP
Vue.js
1.
Vue.js (≧▽≦*)
2.
Web Components Custom elements HTML
imports Template Shadow DOM
3.
Web Components Demo 傳統 http://www.w3schools.com/html/html_examples.asp CSS
+ Javascript http://getbootstrap.com/css/#forms WebComponent https://elements.polymer-project.org/browse?package=paper-elements
4.
So Why AngularJS、React、Vue.js、Ember、Polymer、Riot...etc Polyfill
5.
Why vue.js 吸取 Angular
和 React 經驗,結合兩者優點 可與大部份 JavaScript 一起使用 (jQuery) 快 結構清析,程式好讀 完整的生命周期 完整的開發工具 中文文件
6.
目標 儘可能簡單的 實現嚮應式的資料綁定(reactive data binding) 組合的
View 組件(composable view components)
7.
MVVM 中的 ViewModel
8.
Components 分析
9.
Hello World! http://vuejs.org.cn/#example
10.
Data binding Mustache 雙大括號
(https://github.com/mustache/mustache.github.com) v-bind <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> <a v-bind:href="url"></a>
11.
表單 v-model <span>Message is: {{
message }}</span> <br> <input type="text" v-model="message" placeholder="edit me">
12.
條件 v-if:會操作 DOM v-show:用 css
(display: none)來顯示 or 關閉 v-else <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
13.
列表 v-for <ul id="example-1"> <li v-for="item
in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
14.
方法與事件 v-on <div id="example"> <button v-on:click="greet">Greet</button> </div> var
vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // 方法内 `this` 指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } } }) // 也可以在 JavaScript 代码中调用方法 vm.greet() // -> 'Hello Vue.js!'
15.
init created beforeCompile compiled ready attached detached beforeDestroy Life cycle
16.
Component var MyComponent =
Vue.extend({ // 选项... }) // 全局注册组件,tag 为 my-component Vue.component('my-component', MyComponent) // 创建根实例 new Vue({ el: '#example', components: { // <my-component> 只能用在父组件模板内 'my-component': MyComponent } }) <div id="example"> <my-component></my-component> </div>
17.
Component - extend
跟 vue 差別與要注意的地方 data & el 錯誤 var data = { a: 1 } var MyComponent = Vue.extend({ data: data }) 正確 var MyComponent = Vue.extend({ data: function () { return { a: 1 } } })
18.
預設單向 Component - props Vue.component('child',
{ // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ msg }}</span>' }) <child msg="hello!"></child>
19.
Component - props
綁定類型 <!-- 默认为单向绑定 --> <child v-bind:msg="parentMsg"></child> <!-- 双向绑定 --> <child v-bind:msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child v-bind:msg.once="parentMsg"></child>
20.
Vue 常見結構 var demo
= new Vue({ el: '#demo', data: {}, methods: { onSubmit: function () {}, cancel: function () {}, } })
21.
Vue.extend Vue 常見結構 var
demo = new Vue.extend({ template = '', props: [], data: {}, methods: { onSubmit: function () {}, cancel: function () {}, }, created(){}, beforeCompile(){}, compiled(){}, ready(){}, })
22.
Demo http://cn.vuejs.org/examples/index.html
23.
深入淺出
24.
深入 Vue.js Reactive
原理
25.
Vue.js Async update
queue MutationObserver setTimeout(fn, 0) var vm = new Vue({ el: '#example', data: { msg: '123' } }) vm.msg = 'new message' // 修改数据 vm.$el.textContent === 'new message' // false Vue.nextTick(function () { vm.$el.textContent === 'new message' // true })
26.
React (Facebook) Reactive
原理 var React =(function () { function React () { } React.prototype.render = function(newState) { // virturl dom render }; React.prototype.setState = function(newState) { // do somethings this.render(newState); // diff virturl dom & dom // real render }; return React; }());
27.
Angular (Google) Reactive
原理
28.
一切都是這麼美好
29.
But... 總是要的更多 (SPA) (vue-router) Vuex
(單向流) Vue.js 2.0 Web component 標準何時出?
30.
Flux
31.
比較 Vue.js React AngularJS 目標
ViewModel View Component MVW Reactive watch (setter, getter) 手動 (setState) watch queue 資料流 預設單向,可以雙向 單向 (參數傳遞) 雙向 單向流管理(父子) Vuex Redux、Flux x jQuery 共用 共用 共用 Virtual DOM 1.0 沒,2.0有 有 沒有
32.
Conclusion 適合使用於 Web component,表單控制也不錯 跟
jQuery 做好朋友 SPA 還不夠好 結構清析,好讀好寫,好移植 中文真的是很有親切感
33.
一些 Vue.js 其他好的部份
34.
Transitions (過場) <div v-if="show"
transition="expand">hello</div> /* 必需 */ .expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } /* .expand-enter 定义进入的开始状态 */ /* .expand-leave 定义离开的结束状态 */ .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; }
35.
Transitions 2 Vue.transition('expand', { beforeEnter:
function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.textContent = 'leave' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation }
36.
.vue 單文檔 coding
style <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> module.exports = { data: function () { return { msg: 'Hello World!' } } } </script> <style scoped> h1 { color: #42b983; } </style>
37.
一些相關資源
38.
Reference 官方文件 http://vuejs.org.cn/ Plug-in http://vuejs.org.cn/guide/plugins.html#已有插件-amp-工具 Vue 2.0 https://github.com/vuejs/vue/issues/2873#upgrade-tips
39.
Vue.js 台灣社群 https://www.facebook.com/groups/vuejs.tw/1036452 996434432/?notif_t=group_activity¬if_id=146462 1719501292
40.
其他文件 http://www.slideshare.net/kurotanshi/vuejs-62131923 https://docs.google.com/presentation/u/1/d/1RaXwt4n97OWUrMqel_- SKYTAldh9VhuaI0tbMJ31k0I/edit?usp=sharing
41.
開發工具 Chrome https://github.com/vuejs/vue-devtools Generator https://github.com/vuejs/vue-cli https://github.com/ElemeFE/cooking Sublime Text https://github.com/vuejs/vue-syntax-highlight
42.
其他相關 Weex http://alibaba.github.io/weex/ Mobile framework https://github.com/airyland/vux Other https://github.com/vuejs
Télécharger maintenant