需求:

旧项目中有部分页面是用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. cardboard sdk for unity 系统分析 - 属性行为分析CardBoard类

    一.CardBoard类是个单例类,全局只有一个CardBoard对像且在需要时才生成: CardBoard中主要使用了BaseVRDevice device这个对像,而这个对像也是单例类BaseVR ...

  2. Codeforces - 773A - Success Rate - 二分 - 简单数论

    https://codeforces.com/problemset/problem/773/A 一开始二分枚举d,使得(x+d)/(y+d)>=p/q&&x/(y+d)<= ...

  3. EOJ3263:丽娃河的狼人传说(贪心)

    传送门 题意 分析 考虑将区间按右端点排序,再遍历区间,操作即可 建议以加方式写 trick 1.不需要判区间重合 代码 #include<cstdio> #include<cstr ...

  4. Beta版本冲刺第一天!

    该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业地址:https://edu.cnblogs.com/c ...

  5. pika消息中间件模块

    参考: http://www.rabbitmq.com/tutorials/tutorial-one-python.html http://www.rabbitmq.com/tutorials/tut ...

  6. 一个Nice的生活主题博客模板

    https://www.bitcron.com/ https://api.bitcron.com/ https://chopstack.com/

  7. 模拟 百度之星资格赛 1003 IP聚合

    题目传送门 /* 模拟水题,排序后找出重复的ip就可以了 */ #include <cstdio> #include <iostream> #include <algor ...

  8. 关于html/css的路径问题

    非原创,转自:http://blog.sina.com.cn/s/blog_6c21f6480101cb33.html [问题描述]: 比如你有Web项目solo,假如目录结构如下: 在cy.css中 ...

  9. Problem D: 勤奋的涟漪2 dp + 求导

    http://www.gdutcode.sinaapp.com/problem.php?cid=1049&pid=3 dp[i][state]表示处理了前i个,然后当前状态是state的时候的 ...

  10. RHEL 6.5-----MFS

    主机名 IP  安装服务 master  192.168.30.130   mfsmaster.mfsmetalogger node-1  192.168.30.131  chunkserver  n ...