需求:

旧项目中有部分页面是用avalon写的,avalon存在页面刷新,会出现重复行的问题,数组渲染出现重复行bug, 需要转成vue

总结

记录了一下大概需要改的地方

1. avalon中的ms-controller 是作用域绑定,在Vue中使用id,注册实例使用el挂载即可

2. ms-click  => v-on:click

3. ms-for => v-for   ms-if => v-if

4. 所有数据 去掉 @

5. ms-attr => v-bind

6. ms-submit => v-on:submit

7. ms-duplex="@keyword"  => v-model = "keyword"

8. ms-visible => v-show
ms-if => v-if 9. 注意,v-for和ms-for item和index顺序不一致
ms-for="(index, item) in @list" =>
v-for="(item, index) in list" 10. js部分比较简单,转化为Vue的语法即可

avalon转成Vue的更多相关文章

  1. 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 的目的是 ...

  2. Vue系列:如何将百度地图包装成Vue的组件

    主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...

  3. 随手记录一下 Vue 下来框搜索 select2 封装成vue

    引入布局文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css& ...

  4. html5音频audio对象封装成vue组件的方式调用以及setTimeout如何在vue2生效 (vue2正在熟悉中,ajax还是用jQuery来写舒服些,里面含有一些php写法可略过) 此网页应用在PC不考虑手机端

    // vue2 组件封装如下: <template> <div> <div><!--vue element 组件的引用 Switch 开关 不懂请自行百度(重 ...

  5. ajax请求回数组数据,Vue页面数组没同步问题

    记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 <tr v-for="item in list">{{ * ...

  6. VUE+Ionic,项目搭建&打包成APK

    安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...

  7. 如何将原生微信小程序页面改成原生VUE框架的H5页面

    项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...

  8. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  9. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

随机推荐

  1. js跳转方法整理与自动刷新

    js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/javascr ...

  2. 探究final在java中的作用

    目录 一. final修饰变量 1. 基础: final修饰基本数据类型变量和引用数据类型变量. 2. 进阶: 被final修饰的常量在编译阶段会被放入常量池中 3. 探索: 为什么局部/匿名内部类在 ...

  3. Codeforces - 706B - Interesting drink - 二分 - 简单dp

    https://codeforces.com/problemset/problem/706/B 因为没有看见 $x_i$ 的上限是 $10^5$ ,就用了二分去做,实际上这道题因为可乐的价格上限是 $ ...

  4. Nginx(四) nginx+consul+upasync 在ubnutu18带桌面系统 实现动态负载均衡

    1.1 什么是动态负载均衡 传统的负载均衡,如果Upstream参数发生变化,每次都需要重新加载nginx.conf文件,因此扩展性不是很高,所以我们可以采用动态负载均衡,实现Upstream可配置化 ...

  5. C#批量插入Sybase数据库,Anywhere 8

    数据库版本是Adaptive Server Anywhere 8 1.添加引用,程序集 iAnywhere.Data.AsaClient.这个和SQLServer的System.Data.SqlCli ...

  6. PHP 使用 header 方式实现文件下载功能

    header() 函数向客户端发送原始的 HTTP 报头. 下载文件要用的的请求头: header("Content-type:application/octet-stream") ...

  7. MySQL varchar 最大长度,text 类型占用空间剖析

    MySQL 表中行的最大大小为 65,534(实际行存储从第二个字节开始)字节.每个 BLOB 和 TEXT 列只占其中的 5 至 9 个字节. 那么来验证下 varchar 类型的实际最大长度: 测 ...

  8. 如何使用go打出hell word

    今天给大家带来一篇如何使用go打出hell word(手动滑稽) 关于go介绍的话,我就不多说了,在百度上一搜一大堆, 要使用的软件Visual Studio Code(VScode) 下载go的地址 ...

  9. Linux下自动还原MySQL数据库的Shell脚本

    创建shell脚本topjui_source.exp,内容如下: #!/usr/bin/expect spawn echo "###### running... ######" s ...

  10. wordpress数据库结构及表说明

    数据表结构: wp_commentmeta:存储评论的元数据wp_comments:存储评论wp_links:存储友情链接(Blogroll)wp_options:存储WordPress系统选项和插件 ...