day01
|--指令：ms-controller，作用：圈定vm的作用范围
|--指令：ms-duplex，作用：相当于ng-model，定义一个模块
|--插值表达式：‘{{}}’，作用：它是纯文本指令，用于单向将数据拍到页面上，位于元素内部的innerText中
总结：
- MVVM将程序分为两大块，我们需要用avalon.define创建vm，用指令预先指定会变动的部分
- ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的。
- ms-duplex是双向指令，通过一些事件监听我们的输入操作，从而同步vm。
- {{}}是用于输出数据。
avalon1的四种数据填充方式：
- {{expr}}
- {{expr|html}}(html过滤器的方式)
- ms-text(与第一的类似)
- ms-html(与第二的类似)
avalon2如今采用三种数据填充方式，即去掉了第二种使用html过滤器的方式。
使用插值表达式进行数据填充需要处理的问题：在一些网络较慢的情况下，网页会出现乱码，就是{{@a}}的内容被用户看到了。
解决方案：1.添加ms-controller类型，avalon扫描到这里的时候会把该区域的内容先隐藏起来。
2.使用ms-text，这是最省事有效的解决方法。
其他：
问题：avalon界定符，"{{}}"与其他插件冲突。
解决方案：使用avalon.config({interpolate:["{{","}}"]})，修改interpolate属性，例如:interpolate:["{#","#}"];以解决冲突问题。
简单练习：
<!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>