需求: 旧项目中有部分页面是用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-sub…

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈 更详细的说明: 模型(Mod…

主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your token "></script>   (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级: externals: {    "…

引入布局文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.boo…

// vue2 组件封装如下: <template> <div> <div><!--vue element 组件的引用 Switch 开关 不懂请自行百度(重点参考js部分 如果不熟悉element switch略过就可以了)--> 语音播报 <el-switch v-model="openVoice" active-value="1" inactive-value="0" @change=&…

记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 <tr v-for="item in list">{{ *** }}</tr> //请求数据 send: function(){ var that = this, vm = that._vm, data = vm.ajaxData; $Le.smp.goAjax({ Go: Go, Dialog: Dialog }, { url:$Le.Config.a…

安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择N,在第2步后,手动执行:npm install vue init webpack my-project 或 vue create my-project或vue init webpack-simple my-project (目录简单) #若想安装快速,在最后一步提示是否使用npm install命令时,选…

项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将目前已经上线运行的原生小程序(40多个页面)快速转化为原生H5页面,实现快速上线,是采用我们较为熟悉的JSP还是引用目前最热门的前后端分离VUE框架呢??? 想法: 1)采用熟练的JSP框架,每人一天可以改造2个页面左右,计划投入2人,风险最小: 2)采用主流分布式Vue框架,时间未知,风险未知:…

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的…

问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/5769075.html),然后将BMapComponent作为vux的popup组件的子组件,代码如下: <popup :show.sync="showPositionContainer" style="position:absolute"> <b-map…

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的…

在没有用vue做项目之前 也遇到过戳转换的问题 直接函数 调用 方法 这个也可以写成vue的  把function去掉  formatDate后面加冒号 就可以了 当然这个不是原创 但是是谁的我忘记了  对不住原创了 **************************我是分割线***************************** vue 时间戳的转换 当然这个方法是放在methods中的方法  这个本来是封装的一个啥来着 忘记了 反正被我直接摘出来这样用了  用法跟最原始的差不离多少 好…

介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http请求 支持Promise API 拦截请求和响应 转化请求和响应(数据) 取消请求 自动转化json数据 客户端支持抵御XSRF(跨站请求伪造) 安装 Vue项目中使用如下命令安装 npm install axios --save 使用 Axios拥有诸多配置项,由于项目中请求数量很多,因此考虑将其…

为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要一些公共页面和功能,但新项目又有自己的独特点,这些页面需求重新开发成本很高,但如果把小程序代码转换成 VUE 就会容易的多,因此需要这样一个转换工具. 本文将通过实战带你体验 HTML.css.JavaScript 的 AST 解析和转换过程 如果你看完觉得有用,请点个赞~ AST 概览 AST 全称是叫抽象…

首先给项目安装MD5模块:npm install --save js-md5 使用方法有两种: 使用方法1:  在需要使用的项目文件中引入MD5:import md5 from 'js-md5'; 使用: const lala = md5('holle'); console.log('lalalalalala',lala);  //输出  bcecb35d0a12baad472fbe0392bcc043 使用方法2: 在main.js文件中将md5转换成vue原型: import md5 fro…

=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添了烦恼. 1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中文:https://cn.vuejs.org/ 英文:http…

1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm install axios main.js引用: import Vue from 'vue' import axios from 'axios' // 全局将axios改写成Vue的原型属性 Vue.prototype.$http = axios…

在刚开始接触vue的时候,我们都是直接用<script>引入vue.js使用.没有借助vue-cli脚手架来构建项目. 对于一个初学者来说,跟着文档慢慢搬砖,使用vue进行数据绑定. 记得在最开始使用vue写公司项目的时候,在页面初始化化是,THML会闪现出{{}},当时测试问我有没有解决办法,我理直气壮的说这是vue的特性,没有办法解决这个问!想想当时也是傻,其实官方文档又给出解决办法,只是当时学习的时候,走马观花,没有仔细的阅读文档和demo例子. 后面同事说有解决办法,可以用v-text…

针对PC端,element-ui可谓是首选了,UI体验效果很好. element-ui 框架官网:http://element.eleme.io/#/zh-CN/component/installation mint-ui 也是饿了么出品的UI框架(主要是针对移动端),其框架官网: http://mint-ui.github.io/docs/#/en2/quickstart 针对移动端项目,有些为了偷工减料,可以选择性的利用现成的UI框架.但是用了之后遇到了一些坑. 1.按需加载:按需引入的方式…

VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染二 优势    1 vue则是通过Vue对象将数据和View完全分离开来了.对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定.这就是传说中的MVVM. 2 我们可以理解成VU…

从去年年底到现在,陆续接触了React.Backbone等前端框架以及NodeJs等相关前端知识.不得不说现在前端发展太快了.以前我们还在为选择用哪种编程语言而烦恼,现在前端领域已经在为使用哪种框架而烦恼. 最近刚刚开始接触Vue,立马就被它惊艳到了.原来不过是一个国人自行研发的框架,比不上React.AG等有国际大厂背书的框架,但是它站在诸多框架的肩膀上,去芜存菁,以最小的体格绽烁出惊艳的优点. 1.体积小,2.0版本的min版体积小到20几k. 2.数据双向绑定.省去许多View和Model…

1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里是按需引入,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 首先,安装babel-plugin-component: npm install babel-plugin-component -D 然后,需要将项目里的.babelrc修改为: {…

Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es6-promise 为什么要安装 promise polyfill ?虽然 Axios 的 GitHub 主页开头说了支持 IE8,但文档最下面又说,前提是浏览器支持 promise,如果你不用关心浏览器兼容,那就不用安装 es6-promise. 把 Axios 配置成 Vue 插件 用过 vue…

一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/eleme…

前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然看的懂, 但是记不住, 因此有必要从零开始搭建一个使用 .vue 作为组件的项目练习一下, 因此有了这个项目. 既然使用了 .vue 组件, 就不能像之前使用 jQuery 一样把 vue.js 引入页面中, 而是使用配套的 webpack + babel + 各种 loader 工具编译 .vue…

vue-echarts和echarts的区别: vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它. echarts就是普通的js库, vue-echarts特征: 轻量,高效,按需绑定事件 支持按需导入ECharts.js图表​​和组件 支持组件调整大小事件自动更新视图 git地址:https://github.com/ecomfe/vue-echar…

前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对数组或者对象进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.$d…

Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v-if/v-show等 插件,如果你听过鼎鼎有名的饿了么UI你就更能体会其中精妙之处,不过不要着急 MVVM模式(面试考点) 和知名前端框架Angular一样,Vue.js设计上也使用MVVM模式 MVVM模式(Model-View-ViewModel)由MVC模式衍生而来.当View(视图层)发生变…

vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换工作了,所以暂缓下来先,ddf那块后期我会补上去.这个vue源码逐行分析,我基本每一行都打上注释,加上整个框架的流程思维导图,基本上是小白也能看懂的vue源码了. 说的非常的详细,里面的源码注释,有些是参考网上帖子的,有些是自己多年开发vue经验而猜测的,有些是自己跑上下文程序知道的,本人水平可能有…

1.2 vue.js库的基本使用 在github下载:https://github.com/vuejs/vue/releases 在官网下载地址: https://cn.vuejs.org/v2/guide/installation.html vue的引入类似于jQuery,开发中可以使用开发版本vue.js,产品上线要换成vue.min.js. 下图是github网站下载的vue.js目录 总结: 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vu…