2.Vue.js培訓(xùn)

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

2、件判斷(v-if) 現(xiàn)在你看到我了 菜鳥(niǎo)教程 學(xué)的不僅是技術(shù)，更是夢(mèng)想！ 哈哈哈，打字辛苦啊！ var vm=new Vue( el: #app, data: seen: true, ok: true )2.循環(huán)語(yǔ)句(v-for) 2.1.迭代數(shù)組 var vm=new Vue( el: #app, data: sites: name: Runoob , name: Google , name: Taobao ) 2.2 迭代對(duì)象 value var vm=new Vue( el: #app, data: object: name: 菜鳥(niǎo)教程, url: http:/, s

3、logan: 學(xué)的不僅是技術(shù)，更是夢(mèng)想！ )3.計(jì)算屬性 原始字符串: message 計(jì)算后反轉(zhuǎn)字符串: reversedMessage var vm = new Vue( el: #app, data: message: Runoob! , computed: / 計(jì)算屬性的 getter reversedMessage: function () / this 指向 vm 實(shí)例 return this.message.split().reverse().join() )4.監(jiān)聽(tīng)屬性 watch,來(lái)響應(yīng)數(shù)據(jù)的變化 var vm=new Vue(.); vm.$watch(kilometers

4、, function (newValue, oldValue) /. )5.樣式綁定.active width: 100px; height: 100px; background: green; .text-danger background: red; var vm=new Vue( el: #app, data: isActive: true, hasError: true )6.事件處理器(v-on) Greet var app = new Vue( / 在 methods 對(duì)象中定義方法 methods: greet: function (event) / this 在方法里指當(dāng)前 V

5、ue 實(shí)例 alert(Hello + + !) / event 是原生 DOM 事件 if (event) alert(event.target.tagName) )7.表單 (1).輸入框 new Vue( el: #app, data: message: Runoob ) (2). 單選 與 多選 單個(gè)復(fù)選框： checked 多個(gè)復(fù)選框： Runoob Google taobao 選擇的值為: checkedNames new Vue( el: #app, data: checked : false, checkedNames: )8.組件 注冊(cè)一個(gè)全局組件語(yǔ)法格式

6、如下： Vponent(tagName, options)例子如下： / 注冊(cè)Vponent(runoob, template: 自定義組件!)/ 創(chuàng)建根實(shí)例new Vue( el: #app) prop 是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義屬性： / 注冊(cè)Vponent(child, / 聲明 props props: message, / 同樣也可以在 vm 實(shí)例中像 this.message 這樣使用 template: message )/ 創(chuàng)建根實(shí)例new Vue( el: #app)9.Vue生命周期中mounted和created的區(qū)別 created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。 mounted:在模板渲染成html調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作 var vm=new Vue( el:#formId, created：function()/初始化執(zhí)行方法 , mounted:func