avalon怎样控制input样式

html-css06

avalon怎样控制input样式,第1张

对于视图样式的更新,有以下两种方式:

1、对css的指定属性进行更新

通过avalon中的ms-css-XXX属性,可以在ms-duplex更新vm对象值的的同时,实现对视图样式中指定属性的动态更新。

代码示例:

[html] view plain copy

<div class="panel1" ms-css-width="weight">

<input ms-duplex="weight"></input>

</div>

通过该段代码,实现通过input输入值的变化,动态改变div标签视图样式的width属性。

2、对标签所使用的css类进行更新

通过avalon中的ms-class属性,可以通过input等控件,动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。

代码示例:

avalon代码:

[javascript] view plain copy

<script>

var model=avalon.define({

$id:"test",

style:"panel1",

change_class:function(e){

model.style=model.style==="panel1"?"panel2":"panel1"

}

})

html代码:

[html] view plain copy

<body ms-controller="test">

<div ms-class="{{style}}" ></div>

<button ms-click="change_class">点我改变类名</button>

</body>

以上代码实现的功能是通过点击button控件,改变div标签的类。点一下变成panel1类,再点一下变成panel2类

它与class、id等功能类似,也是用来选取元素的标签,但是使用伪类时,是根据元素的状态来选择,通过伪类来选择元素,则该选择条件是独立于DOM的,只与元素当前状态有关。伪类用符号":"表示。比如:empty,用来匹配没有任何子元素(包括text节点)的元素E.。

在css中指定该状态下元素的样式,代码如下:

<style>

p:empty{color:red}

</style>

则当元素没有任何子元素时,其颜色变为红色。

理解了伪类,我们再回到ms-visible和ms-if的区别上,ms-if在隐藏元素的同时,将元素移除了DOM,这样就有可能出现元素中不再包含子元素的情况,即满足:empty状态。而ms-visible只是隐藏元素,并不将其从DOM中移除。

Vue.js

优点:

简单:官文档清晰比 Angular 简单易

快速:异步批处理式更新 DOM

组合:用解耦、复用组件组合应用程序

紧凑:~18kb min+gzip且依赖

强:表达式 &需声明依赖推导属性 (computed properties)

模块友:通 NPM、Bower 或 Duo 安装强迫所代码都遵循 Angular 各种规定使用场景更加灵

缺点:

新:Vue.js新项目20143月20发布0.10.0 Release Candidate版本目前github面新0.11.4版本没angular熟

影响度:google关于Vue.js性或者说丰富性少于其些名库

支持IE8:哈哈AngularJS 1.3抛弃IE8支持avalon支持IE6+应该努力优化点于些需要支持IE8项目web前端发趋势像IE低版本应该退历史舞台通改变我前端思维顺应些使用版本升级

AngularJS

优点:

态视图:前没想js扩展HTML属性AngularJs做替我静态HTML加扩展性功能种让HTML由死变觉

完善:比较完善前端MVW框架包含模板数据双向绑定路由模块化服务依赖注入等所功能模板功能强丰富并且声明式自带丰富 Angular 指令

Google维护:AngularJSGoogle维护疑强台于推广维护明显比Vue.jsavalon优势社区非泼能够促进发展

AngularJS &Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework俩基友Ionic通用AngularJS创建框架适合发丰富强应用程序

缺点:

全:习起难度于我讲习曲线曲折比较难理解些

推翻重写:前段候逛社区发现AngularJS2.0前推翻重写两框架改变基本两框架等于说等2.0需要始支持IE8貌似2.0变支持移端等再看吧

Avalon.js

优点

使用简单HTML添加绑定JS用avalon.define定义ViewModel再调用avalon.scan能

兼容 IE6 (其MVVM框架KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )另avalon.mobile更高效运行于IE10等新版本浏览器

没任何依赖5000行压缩50KiB

支持管道符风格滤函数便格式化输

局部刷新颗粒度已细化文本节点特性节点

要操作节点第扫描与视图刷新函数相绑定并缓存起没选择器场余

让DOM操作代码近乎绝迹

使用类似CSS重叠覆盖机制让各ViewModel区交替渲染页面

节点移除智能卸载应视图刷新函数节约内存

操作数据即操作DOMViewModel操作都同步View与Model

自带AMD模块加载器省与其加载器进行整合

缺点

1数组滤没angular面avalon滤器能用于ms-text, ms-html

2没英文文档宣传受限制(许误我博客园入门教程官网)

3OniUI皮肤够看许说要配合boostrap社区没主站做事