012

(2 / 10)
⚡ 登入後報錯可獲 3天VIP 免廣告——立即登入

凶獸,一般這種級別的凶獸是能夠聽懂語言的,然後把凶獸引過來,最後設置陷阱抓住它。

所謂數據綁定,就是一處變化,處處改變。在上麵的代碼中,{{message}}代表這個地方綁定了一個數據message。v-model=“message”則代表給這個input輸入框也綁定了數據message。意思就是,當input框發生輸入的動作,任何地方的message都會發生改變。

於是,代碼變成了這樣。

“第一步,把老虎引過來,嘿嘿!”說著,葉小凡心神一動,引入了vue。

然後,葉小凡打出了一段代碼。

new vue代表創建一個vue對象,輸入的是一個json對象。

el代表需要被vue控製的區域,值為某個區域的id,需要加一個“#”號。所以,#棲息地1的意思就是id為“棲息地1”的那個div元素(注意:因為new vue代表新建一個vue的對象,因此vue的引入必須在new對象的代碼上麵,隻有這樣才能夠被引用到。也就是說,先創建new vue對象,再引入vue.min.js的做法就是錯誤的。雖然可以通過window.onload事件進行處理,不過還是建議初學者老老實實地先引入vue.min.js吧)。

葉小凡深知,這個功法一出,data裡麵的message變量就牢牢地與body區域裡麵的{{message}}綁定在一起了。換句話說,他隻要稍稍改動message的值,{{message}}也會跟著發生變化!這便是數據綁定的奧妙。

運行結果如圖4-1所示。上麵的input框中已經賦值了“乖乖虎,你過來呀!”這個字符串,同時,下麵也多出了一模一樣的字符串。葉小凡大喜,心想我葉小凡要麼不出手,一出手果然不同凡響。

圖4-1 運行結果

“哼哼,下麵的那句話,其實就是代碼裡麵的{{message}}啦,因為數據綁定的關係,這樣一來,不管我data中的那個json對象裡麵的message如何變,{{message}}也會跟著變化。”

葉小凡不禁又回想起剛開始學習vue的場景。

“葉老,vue這個數據綁定自然是不錯的,可是我即便不用vue,用鋒利的jquery,甚至用dom操作,不是也可以嗎?”

“哦,那你說說,該怎麼做?”葉老微笑著說道。|

“這還不簡單,就比如說用jquery好了,我隻要給div設置一個唯一的標識id,然後通過$(id)獲取jquery對象,最後直接賦值不就好了。”說著,葉小凡就隨手打出了一段代碼。

“這是頁麵上的元素,我聲明了一個id為box的div,然後引入jquery進行數據綁定!”

一陣藍光閃過,代碼被成功運行,頁麵上原本空空如也的div瞬間變成了一句話:“哈哈,你被我綁定了!”葉小凡得意地說道:“看吧,這樣的效果不是一樣嗎?”

葉老微微一笑,對著葉小凡說道:“嗯,不錯,看來你的jquery已經用得比較熟練了,但是你有沒有想過一個問題:我們要把一個對象的數據顯示到一個元素上。在這個例子裡麵,我們想把一個字符串綁定到div上麵,用jquery的方式自然是可以的。可實際上,你應該意識到,不管用什麼方式,原生dom操作也好,jquery也罷,這些都是我們為了達成目的而采取的手段。可真正重要的是什麼?”

葉小凡陷入沉思,過了一會兒,他若有所思地說道:“是的,這些都是手段,真正重要的是數據,我其實隻是想要顯示數據罷了!”

聽到葉小凡的回答,葉老會心一笑,心道孺子可教。

“對了,我們真正想要的,其實就是把數據顯示到元素上,手段自然是越簡單越好。vue去除了所有的直觀dom操作,你隻需要改變數據,就可以同步修改頁麵上展現的元素。這便是vue的魅力!”

【𝗼𝗼𝗽.𝘁𝘄 無錯章節】

定綁據數單簡——式一第euv 4.4

。神眼的望渴出露,光放眼兩凡小葉。道說地奮興續繼老葉”。定綁據數單簡——式一第則法用使euv你教我在現,了好聽,子小“

。址地線在個一出給麵下。來下載下其將議建般一,接鏈線在的上網用接直以可也,地本到載下上網從以可庫個這,庫的euv取獲是步一第的法方用使euv

.euv/tsid/61 .5 .2@ euv/mpn/ten .rviledsj .ndc//:sptth " = crs tpircs<

>"sj.nim

>tpircs/<

:入輸中欄址地的器覽瀏在是法辦的單簡最,址地的件文sj載下到不找果如。索搜中絡網在以可,接鏈載下他其多很有還,然當

sj.nim.euv/tsid/61.5.2@euv/mpn/ten.rviledsj.ndc//:sptth

。吧麵頁錄登的單簡個一作製,下一造改它把們我,子例的才剛看來頭過回再。了以可就去進貼粘並製複碼源將,本文空的sj.euv個一建創地本在後然,它製複接直,了碼源的件文euv到看會就後然

果效麵頁 2-4圖

到拿而從,象對yreuqj的中框入輸tupni個兩這碼密和名戶用取獲yreuqj用是法做的往以。定綁據數行進都碼密和名戶用將望希們我,在現,麵頁錄登的單簡常非個一是這。示所2-4圖如果效麵頁


✅ 付款功能已修復,現在可以正常購買了 — 支援信用卡 · Apple Pay · Google Pay · WebATM · ATM 轉帳
😤 廣告總在最入戲的時候跳出來?
月付 $5 USD,升級 VIP 後全站所有頁面廣告立即全關——
不是只有這本書,是整個 oop.tw 每一頁、每一章,從此一路讀到底不被打斷。 $5 USD ≈ 一杯珍奶的錢,換一整個月零廣告清爽閱讀 · 隨時可取消
✅ 全站廣告全關 ✅ 工口專區全本解鎖 ✅ 月卡 $5 USD · 季卡 $13 USD · 年卡 $45 USD
⭐ 登入 / 免費註冊後升級
加我 LINE 好友,分享好書不錯過
第一時間獲得新書推薦、書單更新通知
立即加入
上一頁 書頁/目錄
/ 10 頁
下一頁
為本書評分(每位讀者可評一次,提交後無法修改)
發表評論
以 匿名讀者 身份發表
讀者評論