<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/avalon.js"></script>

</head>

<body>

    <div ms-controller="test">

        <div>

            <label>用户名</label>

            <input type="text" :duplex="@data.uName">

        </div>

        <br>

        <div>

            <label>密码</label>

            <input type="text" :duplex="@data.pWd">

        </div>

        <br>

        <div>

            <label>年龄</label>

            <input type="text" :duplex="@data.age">

        </div>

        <br>

        <div>

            <label>爱好</label>

            <select :duplex="@data.hobby">

                <option value="volvo">Volvo</option>

                <option value="saab">Saab</option>

                <option value="opel">Opel</option>

                <option value="audi">Audi</option>

            </select>

        </div>

        <br>

        <button :click="@readData">vm查看组件data</button>

        <button :click="@upDate">vm修改年龄为105</button>

        <button onclick="useVmMethod()">js查看组件data，并修改年龄为106</button>

    </div>

</body>

<script>

    // 内部调用

    var vm = avalon.define({

        $id: 'test',

        data: {

            uName: 'sang',

            pWd: '123',

            age: 24,

            hobby: 'audi'

        },

        readData: function () {

            console.log(vm.$model.data)         // 成功

            console.log(vm.data)                // 成功

            alert(typeof vm.$model.data.age + "--" + typeof vm.data.age)

        },

        // 修改数据

        upDate: function () {

            vm.$model.data.age = 105            // 失败

            vm.data.age = 105                   // 成功

        }

    })

    // 外部调用

    function useVmMethod() {

        console.log(vm.$model.data)             // 成功

        console.log(vm.data)                    // 成功

        vm.data.age = 106                       // 成功

    }

</script>

</html>

初试avalon的更多相关文章

  1. MVVM大比拼之avalon.js源码精析

    简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. 迷你MVVM框架avalon在兼容旧式IE做的努力

    很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...

  4. 前端展望：取avalon，弃angular

    打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧:   目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...

  5. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  6. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  7. 轻量级前端MVVM框架avalon - 执行流程2

    接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...

  8. 轻量级前端MVVM框架avalon - 整体架构

    官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...

  9. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

随机推荐

  1. python函数参数*args **kwargs

    毕业多年,把C++都就饭吃了....今天居然在纠结什么是形参什么是实参..... 定义函数里面写的参数就是形参,因为没有内存占用,实际调用时写的参数就是实参,因为有内存占用和传值 然后就是位置参数,可 ...

  2. 【PowerOJ1740&网络流24题】圆桌聚餐（最大流）

    题意: 来自n个不同国家的代表开会,每个国家代表数为ci 会场有m张圆桌,每张桌子可容纳mi人 不希望有同一个国家的代表在同一张桌子上就餐 设计一个合法方案 (n,m<=300) 思路:最大流, ...

  3. Docker Machine 管理-管理machine(17)

    用 docker-machine 创建 machine 的过程很简洁,非常适合多主机环境.除此之外,Docker Machine 也提供了一些子命令方便对 machine 进行管理.其中最常用的就是无 ...

  4. 6.zabbix微信告警3.2

    原文地址: https://blog.cactifans.com/2016/01/27/zabbix%E5%BE%AE%E4%BF%A1%E5%91%8A%E8%AD%A6/ pdf : 链接: ht ...

  5. 老板让我十分钟上手nx-admin

    大体流程 参考资料: nx-admin项目地址 首先这里就不讲解vue和vuex之类的基础东西了 有兴趣的可以去官方文档了解.这里根据流程走向大概说说 路由配置 首先找到路由配置,路由配置放在了src ...

  6. python selenium模拟登陆163邮箱。

    selenium是可以模拟浏览器操作. 有些爬虫是异步加载的,通过爬取网页源码是得不到需要的内容.所以可以模拟浏览器去登陆该网站进行爬取操作. 需要安装selenium通过pip install xx ...

  7. HTML-参考手册: HTML 字符集

    ylbtech-HTML-参考手册: HTML 字符集 1.返回顶部 1. HTML 字符集 HTML 字符集 如需正确地显示 HTML 页面,浏览器必须知道使用何种字符集. 万维网早期使用的字符集是 ...

  8. git 远程库和本地库处理

    创建git库的方法 第一种方法: 在码云建立一个demo的git库.git clone在本地一个文件夹.之后会出现在.git的目录下方(这是clone而非pull切记分清楚) 而不是在.git的上一层 ...

  9. Git操作思维导图

    转自:https://blog.csdn.net/mynameishuangshuai/article/details/51657324

  10. 推荐Windows下SVN服务器端和客户端工具软件

    相信很多人使用过Windows下的SVN客户端软件TortoiseSVN或者也有过Linux下.MAC下的SVN命令行使用经验,另外MAC下还有以一款就做Vesions的SVN客户端软件,不过个人感觉 ...