需求:

旧项目中有部分页面是用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. python iteration 迭代

    可迭代的类型:list,tuple,dict,str,bytes,bytearray等 一.怎么判断一个对象是否可迭代 >>> from collections import Ite ...

  2. bzoj 2331: [SCOI2011]地板【插头dp】

    一开始设计了四种状态,多了一种已经拐弯但是长度为0的情况,后来发现不用,设012表示没插头,没拐弯的插头,拐了弯的插头,然后转移的话12,21,22都不合法,剩下的转移脑补一下即可,ans只能在11, ...

  3. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  4. ubuntu 给文件夹创建桌面快捷方式, 其实就是创建个软链接

    ln -s /home/zdj/Documents/windows_backup/2019Spring/ ~/Desktop/2019Spring ln -s /home/zdj/Documents/ ...

  5. curl:出现SSL错误提示

    在上一篇博文中,升级ruby版本中,提示如下错误: 1) Error fetching https://mirrors.aliyun.com/rubygems/: [root@web ~]# gem ...

  6. Java自定义方法转换前端提交的json字符串为JsonObject对象

    前端提交json字符串格式数据,Java后端通过自定义方法接收json字符串数据并转换为JsonObject对象,代码如下放到RequestData.Java类中: public static JSO ...

  7. iOS RSA (Objc)

    /* RSA.h @author: ideawu @link: https://github.com/ideawu/Objective-C-RSA */ #import <Foundation/ ...

  8. 跟我一起玩Win32开发(2):完整的开发流程

    上一篇中我给各位说了一般人认为C++中较为难的东西——指针.其实对于C++,难点当然不局限在指针这玩意儿上,还有一些有趣的概念,如模板类.虚基类.纯虚函数等,这些都是概念性的东西,几乎每一本C++书上 ...

  9. multiprocessing多进程模块

    1 基本理解 python不支持真多线程,无法在单进程中调用多核cpu.对于cpu密集型任务,可以使用多进程.python会调用OS原生多进程,运行在多核上,以此提高运行速度. 2 基本实现 impo ...

  10. [Usaco2012 Jan]Video Game

    Description Bessie is playing a video game! In the game, the three letters 'A', 'B', and 'C' are the ...