摘要:當(dāng)表達(dá)式的值發(fā)生變化時(shí),響應(yīng)應(yīng)用特定的行為到。指的是否重復(fù),對(duì)重復(fù)的進(jìn)行服用循環(huán)中,表示數(shù)組第個(gè)元素表示對(duì)象的樣式綁定樣式也可以根據(jù)中的變量來動(dòng)態(tài)確定。
介紹
前段時(shí)間接觸到一個(gè)庫叫做Vue.js, 個(gè)人感覺很棒,所以整理了一篇博文做個(gè)介紹。
Vue讀音/vju:/,和view類似。是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的web界面庫。Vue.js只聚焦于視圖層,可以很容易的和其他庫整合。代碼壓縮后只有24kb。
可以去這里下載。自己整理了一個(gè)Vue.js的demo,https://github.com/chenhao-ch/demo-vue
以下代碼是Vue.js最簡單的例子, 當(dāng) input 中的內(nèi)容變化時(shí),p 節(jié)點(diǎn)的內(nèi)容會(huì)跟著變化。
{{message}}
new Vue({ el: "#demo", data: { message: "Hello Vue.js!" } })語法介紹 數(shù)據(jù)綁定
數(shù)據(jù)綁定就是指將js中的變量自動(dòng)更新到html中。如下代碼, message的默認(rèn)值是“Hello Vue.js!”, 那么當(dāng)頁面啟動(dòng)時(shí),html中的默認(rèn)值會(huì)被設(shè)置成“Hello Vue.js”
{{message}}
new Vue({ el: "#demo", data: { message: "Hello Vue.js!" } })
如果要輸出原生的html,可以使用三個(gè)大括號(hào)來實(shí)現(xiàn)
{{{messageHtml}}}
也可以做表達(dá)式的綁定
過濾器{{length - 1}}{{isShow ? "block" : "none"}}
表達(dá)式后面可以添加過濾器,對(duì)輸出的數(shù)據(jù)進(jìn)行過濾。
自定義過濾器{{ message | capitalize }}
Vue.js運(yùn)行自己定義過濾器。比如:
Vue.filter("wrap", function (value, begin, end) { return begin + value + end; })
{{ message | wrap "before" "after" }}
指令
指令是特殊的帶有前綴 v- 的特性。當(dāng)表達(dá)式的值發(fā)生變化時(shí),響應(yīng)應(yīng)用特定的行為到DOM。
hello
bind , on 指令可以進(jìn)行縮寫
自定義指令
Vue.directive("demo", { bind: function () { // 準(zhǔn)備工作 // 例如,添加事件處理器或只需要運(yùn)行一次的高耗任務(wù) }, update: function (newValue, oldValue) { // 值更新時(shí)的工作 // 也會(huì)以初始值為參數(shù)調(diào)用一次 }, unbind: function () { // 清理工作 // 例如,刪除 bind() 添加的事件監(jiān)聽器 } })html模板
Vue.js支持對(duì)js對(duì)象進(jìn)行判斷(if), 循環(huán)(for)輸出。類似于前端模板。
Yes
No
Hello!
var example1 = new Vue({ el: "#example-1", data: { items: [ {_uid: "1", message: "Foo" }, {_uid: "2", message: "Bar" } ] } })樣式綁定
樣式也可以根據(jù)js中的變量來動(dòng)態(tài)確定。
事件綁定可以使用 v-on 指令來監(jiān)聽DOM事件。
new Vue({ el: "#example-2", methods: { say: function (msg, event) { alert(msg); event.preventDefault(); } } })常見的阻止冒泡,禁止默認(rèn)行為等event方法可以通過修飾符來快速處理。
對(duì)特殊按鍵生效也可以使用修飾符
組件組件系統(tǒng)是 Vue.js 另一個(gè)重要概念,因?yàn)樗峁┝艘环N抽象,讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用。
注冊(cè)通過Vue.extend()來定義一個(gè)組件,Vue.component()來注冊(cè)組件。
// 定義 var Tree = Vue.extend({ template: "This is a tree!" }); // 注冊(cè) Vue.component("tree", Tree); // 開始渲染 new Vue({ el: "#box" }); // 定義,注冊(cè)可以合并成一步。下面的代碼和上面一樣 Vue.component("tree", { template: "This is a tree!" }); new Vue({ el: "#box" });渲染結(jié)果為:
This is a tree!還可以進(jìn)行局部注冊(cè)
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: "...", components: { "my-component": Child } })propsprops用于父組件向子組件傳遞數(shù)據(jù)。
Vue.component("child", { props: ["childMsg"], // prop 可以用在模板內(nèi) // 可以用 `this.msg` 設(shè)置 template: "{{ childMsg }}" });
動(dòng)態(tài)props, 當(dāng)父組件的數(shù)據(jù)變化時(shí),需要通知子組件跟著變化。
父子組件通信當(dāng)父組件數(shù)據(jù)變化時(shí),可以通過props來通知子組件,子組件狀態(tài)變化時(shí),可以利用事件的冒泡來通知父組件。
子組件可以用 this.$parent 訪問它的父組件。父組件有一個(gè)數(shù)組 this.$children,包含它所有的子元素。
例子:Messages: {{ messages | json }}
// 注冊(cè)子組件 // 將當(dāng)前消息派發(fā)出去 Vue.component("child", { template: "#child-template", data: function () { return { msg: "hello" } }, methods: { notify: function () { if (this.msg.trim()) { this.$dispatch("child-msg", this.msg) // 觸發(fā)child-msg事件 this.msg = "" } } } }) // 啟動(dòng)父組件 // 將收到消息時(shí)將事件推入一個(gè)數(shù)組 var parent = new Vue({ el: "#events-example", data: { messages: [] }, // 在創(chuàng)建實(shí)例時(shí) `events` 選項(xiàng)簡單地調(diào)用 `$on` events: { "child-msg": function (msg) { // 監(jiān)聽到 child-msg事件 // 事件回調(diào)內(nèi)的 `this` 自動(dòng)綁定到注冊(cè)它的實(shí)例上 this.messages.push(msg) // messages改變自動(dòng)修改html內(nèi)容 } } })上面這種寫法child-msg事件觸發(fā)后,會(huì)冒泡到父組件,并執(zhí)行父組件的child-msg events。
但是上面的的執(zhí)行流程不夠直觀,可以在html中通過指定on事件來實(shí)現(xiàn)event的監(jiān)聽。下面是全部代碼:構(gòu)建大型應(yīng)用Messages: {{ messages | json }}
在典型的 Vue.js 項(xiàng)目中,我們會(huì)把界面拆分為多個(gè)小組件,每個(gè)組件在同一地方封裝它的 CSS 樣式,模板和 JavaScript 定義,這么做比較好。如上所述,使用 Webpack 或 Browserify 以及合適的源碼轉(zhuǎn)換器,我們可以這樣寫組件:
當(dāng)然也可以使用預(yù)處理器,文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/86222.html
摘要:在這個(gè)組件里面有一些鏈接列表,和,這些列表直接使用編寫按照傳統(tǒng)的寫法,如果我們需要往里面添加鏈接的時(shí)候,每次我們都得添加和標(biāo)簽。所以修改如下這樣我們就把數(shù)據(jù)和視圖分開了,模板里面的代碼也簡潔了很多,不再需要寫很多重復(fù)的代碼。 Vue 的官方文檔 對(duì) Vue 介紹非常詳細(xì),但官方文檔使用在 HTML 中引入 vue 的方式進(jìn)行講解,而實(shí)際項(xiàng)目中一般使用腳手架如 vue-cli 初始化項(xiàng)目...
摘要:由于這種差異我們將對(duì)預(yù)處理器文件的配置封裝為函數(shù),由參數(shù)生成對(duì)應(yīng)配置,將文件放入文件內(nèi),將配置放在文件內(nèi)。 前言 源代碼 熟悉 webpack 與 webpack4 配置。 webpack4 相對(duì)于 3 的最主要的區(qū)別是所謂的零配置,但是為了滿足我們的項(xiàng)目需求還是要自己進(jìn)行配置,不過我們可以使用一些 webpack 的預(yù)設(shè)值。同時(shí) webpack 也拆成了兩部分,webpack 和 w...
摘要:示例了解一門語言,或者學(xué)習(xí)一門新技術(shù),編寫示例是我們的必經(jīng)之路。分割線元素是否渲染在中,取決于前面使用的是還是指令。添加完對(duì)象后,重置對(duì)象刪一個(gè)數(shù)組元素 Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫,它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js,Vue.js提供了更加簡潔、更易于理解的API,使得我們能夠快速地上手并使用Vue.js。 MVVM模式 下...
摘要:一介紹也稱為,讀音類似,錯(cuò)誤讀音,由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令,這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤事件,具體參考官方文檔。模板就是,用來進(jìn)行數(shù)據(jù)綁定,顯示在頁面中,也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue,讀音類似view,錯(cuò)誤讀音v-u-e,由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn): 是一個(gè)構(gòu)建用戶界面的框架 是一...
摘要:一介紹也稱為,讀音類似,錯(cuò)誤讀音,由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令,這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤事件,具體參考官方文檔。模板就是,用來進(jìn)行數(shù)據(jù)綁定,顯示在頁面中,也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue,讀音類似view,錯(cuò)誤讀音v-u-e,由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn): 是一個(gè)構(gòu)建用戶界面的框架 是一...
閱讀 2400·2021-09-08 09:45
閱讀 3340·2021-09-08 09:45
閱讀 3097·2019-08-30 15:54
閱讀 3348·2019-08-26 13:54
閱讀 1405·2019-08-26 13:26
閱讀 1384·2019-08-26 13:23
閱讀 909·2019-08-23 17:57
閱讀 2178·2019-08-23 17:14