標籤：選擇 表達 type control 測試 -- round index 編譯
avalon2是一款基於虛擬DOM與屬性劫持的 迷你、 易用、 高效能 的 前端MVVM架構， 擁有超優秀的相容性, 支援移動開發, 後端渲染, WEB Component式組件開發, 無需編譯, 開箱即用。上一個簡單的入門例子：
<!DOCTYPE html><html> <head> <title>first example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./dist/avalon.js"></script> <script> var vm = avalon.define({ $id: "test", name: "測試", array: [11,22,33] }) setTimeout(function(){ vm.array.set(0, 444) }, 3000) </script> </head> <body ms-controller="test"> <input ms-duplex="@name"> <p>Hello,{{@name}}!</p> <ul> <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li> </ul> </body></html>
這裡面涉及一些知識點
@或##來告訴架構這些變數是來自vm的建立一個vm對象,必須指定$id
avalon.define({ $id: ‘aaa‘, bbb: 1})插值運算式
位於文本節點中的雙重花括弧,當然這個可以配置.此指令其中文本ms-text指令的簡單形式.
<body ms-controller="test"> <script> avalon.define({ $id: ‘test‘, aaa: ‘aaa‘, bbb: ‘bbb‘ }) </script> <p>{{@aaa}}{{@bbb}} 這個效能差些</p> <p>{{@[email protected]}} 這個效能好些</p> <p>{{@[email protected] | uppercase}} 選取器必須放在表達值的後端</p></body>
一款輕量級前端架構Avalon.Js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
