learn avalon2
day01
?|--指令：ms-controller，作用：圈定vm的作用范圍
?|--指令：ms-duplex，作用：相當于ng-model，定義一個模塊
?|--插值表達式：‘{{}}’，作用：它是純文本指令，用于單向?qū)?shù)據(jù)拍到頁面上，位于元素內(nèi)部的innerText中
總結(jié)：
avalon1的四種數(shù)據(jù)填充方式：
- {{expr}}
- {{expr|html}}(html過濾器的方式)
- ms-text(與第一的類似)
- ms-html(與第二的類似)
avalon2如今采用三種數(shù)據(jù)填充方式，即去掉了第二種使用html過濾器的方式。
使用插值表達式進行數(shù)據(jù)填充需要處理的問題：在一些網(wǎng)絡(luò)較慢的情況下，網(wǎng)頁會出現(xiàn)亂碼，就是{{@a}}的內(nèi)容被用戶看到了。
解決方案：1.添加ms-controller類型，avalon掃描到這里的時候會把該區(qū)域的內(nèi)容先隱藏起來。
2.使用ms-text，這是最省事有效的解決方法。
其他：
問題：avalon界定符，"{{}}"與其他插件沖突。
解決方案：使用avalon.config({interpolate:["{{","}}"]})，修改interpolate屬性，例如:interpolate:["{#","#}"];以解決沖突問題。
簡單練習(xí)：
<!DOCTYPE html> <html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./avalon.js"></script><script>avalon.config({interpolate:["{#","#}"]});var zga = avalon.define({$id:"zgatry",num:1010});var vm = avalon.define({$id: "test",a: 111});vm.$watch('a', function (newValue, oldValue){console.log(vm.a);console.log(vm.$model);});</script><style>.ms-controller{display:none;}</style></head><body><div ms-controller="test"><input ms-duplex="@a" /><p>{#@a#}</p></div><div ms-controller="zgatry"><input ms-duplex="@num" /><p>{#@num#}</p></div></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/foxNike/p/5771692.html
總結(jié)
以上是生活随笔為你收集整理的learn avalon2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1 PY环境与变量
- 下一篇： Minimum Path Sum，最短路