2.Vue.js培訓(xùn)PPT學(xué)習(xí)課件

1、Vue.js培訓(xùn),2018,1,簡要介紹,后端只給前端提供數(shù)據(jù),前端負責(zé)HTML渲染和用戶交互。,前后端分離,數(shù)據(jù)雙向綁定,采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。,Vue.js是一個用于創(chuàng)建用戶界面的開源JavaScript框架,JavaScript框架,2,2020/8/3,準(zhǔn)備工作,Vue官網(wǎng)上下載 js文件： ,3,2020/8/3,第一個Demo, message var vm = new Vue( el: #app, data: mess

2、age: Hello Vue.js! ) ,4,2020/8/3,1.條件判斷(v-if), 現(xiàn)在你看到我了 菜鳥教程 學(xué)的不僅是技術(shù)，更是夢想！ 哈哈哈，打字辛苦??！ var vm=new Vue( el: #app, data: seen: true, ok: true ) ,5,2020/8/3,2.循環(huán)語句(v-for),2.1.迭代數(shù)組 var vm=new Vue( el: #app, data: sites: name: Runoob , name: Google , name: Taobao ) ,6,2020/8/3,2.2 迭代對象 value var

3、vm=new Vue( el: #app, data: object: name: 菜鳥教程, url: , slogan: 學(xué)的不僅是技術(shù)，更是夢想！ ) ,7,2020/8/3,3.計算屬性, 原始字符串: message 計算后反轉(zhuǎn)字符串: reversedMessage var vm = new Vue( el: #app, data: message: Runoob! , computed: / 計算屬性的 getter reversedMessage: function () / this 指向 vm 實例 return this.message.split().reverse()

4、.join() ) ,8,2020/8/3,4.監(jiān)聽屬性 watch,來響應(yīng)數(shù)據(jù)的變化,var vm=new Vue(.); vm.$watch(kilometers, function (newValue, oldValue) /. ),9,2020/8/3,5.樣式綁定, .active width: 100px; height: 100px; background: green; .text-danger background: red; var vm=new Vue( el: #app, data: isActive: true, hasError: true ) ,10,2020/8

5、/3,6.事件處理器(v-on), Greet var app = new Vue( / 在 methods 對象中定義方法 methods: greet: function (event) / this 在方法里指當(dāng)前 Vue 實例 alert(Hello + + !) / event 是原生 DOM 事件 if (event) alert(event.target.tagName) ) ,11,2020/8/3,7.表單,(1).輸入框 new Vue( el: #app, data: message: Runoob ) ,12,2020/8/3,(2). 單選 與 多

6、選 單個復(fù)選框： checked 多個復(fù)選框： Runoob Google taobao 選擇的值為: checkedNames new Vue( el: #app, data: checked : false, checkedNames: ) ,13,2020/8/3,8.組件,注冊一個全局組件語法格式如下： Vponent(tagName, options) 例子如下： / 注冊 Vponent(runoob, template: 自定義組件! ) / 創(chuàng)建根實例 new Vue( el: #app ) ,14,2020/8/3,prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性： / 注冊

7、Vponent(child, / 聲明 props props: message, / 同樣也可以在 vm 實例中像 this.message 這樣使用 template: message ) / 創(chuàng)建根實例 new Vue( el: #app ) ,15,2020/8/3,9.Vue生命周期中mounted和created的區(qū)別,created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。 mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作 var vm=new Vue( el:#formId, created：function()/初始化執(zhí)行方法 , mounted:function() /也是初始化執(zhí)行方