一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.11.1" 版本以github上为准（目前最新） 2.cpnm install 在node_modules 可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二、better-scroll优点 1.体验像原生：滚动非常流畅，而且没有滚动条。 2.滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定...
具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > </head> <body > <div id="app"><!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致--><el-form size="mini" :model="abc" ref="validateRef"><!--此处的prop 和...
前言 在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有差点忘了，这里记录下下面话不多说了，来一起看看详细的介绍吧 1.效果图2.子组件实现要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在pages里实现，不过结果就是，滑动时，所有的商品都显示了删...
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些，下面就是实战案例，一起来看一下。新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。 功能配置 功...
引文 vue文档列表渲染中有条注意事项：这里提到的两种情况实际改变了数据但是没有触发视图更新。 由此引出Vue.set()，先上文档API： this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。 set方法调用时，可以触发页面全部重新渲染。 比如在vue中有个data数组arr：//arr=[1,2,3]arr[1]=bconsole.log(arr) // [1,2,3]Vue.set(arr,2,c)console.log(arr) // [1,b,c]可以看出set触发了整个页面的重新渲染，连arr[1]=b的效...
大家对vue的基本概念了解吗？不太清楚的朋友可以先熟悉下。 vue基础教程 Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。本文给大家整理了vue2.2.0+新特征并详细的给大家罗列了各个版本的注意要点。这是本文重点要讲的知识，大家可以参考学习。 先附上官网： https://cn.vuejs.org...
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。 在下面这个例子中，如果不给 p 元素绑定k...
两个关键点 1.使用DOMParser解析xml 2.递归遍历xml树，按格式输出每一个节点 关于使用DOMParser 此方法目前在IE9以上和其它浏览器里都是支持的，所以这里不在写关于IE9以下不支持的情况, 具体的使用请跳转 https://developer.mozilla.org/en-US/docs/Web/API/DOMParser Javascript代码 /*** 格式化xml* @param content* @returns {*}*/ this.parse_xml = function(content) {let xml_doc = null;try {xml_doc = (new DOMParser())....
下面先给大家介绍下mpvue跳转页面，具体内容如下所示： 正准备写一个小程序，得知了mpvue开源的消息，又恰巧之前刚刚学习了一点vue，便开始了我的mpvue学习之路。 第一步就是配置环境之类的。。。附上官网的quickstart http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后， 你的项目应该已经搭好了。下面说2个小问题的解决办法吧 1.编译总通不过，eslint限制太严格，关闭它吧(如果你是一个严谨的人，那就..吧) build文...
EventBusEventBus是一种发布/订阅事件设计模式的实践。在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => {const eventHub = new Vue()Vue.prototype.$bus = {/*** @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型* @method $on 事件订阅...
一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父子组件传值</title><style> </style><script src="./vue.js"></script> </head> <body><div id="root"> <counter :count="0" @numberchange="handleChange"></counter><counter :count="0" @numberchange="handleChange"></counter><div>{{total}}</div> <validate-content content="hello world"></validate-content></div><script> //父...
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this.$refs.bodyFont.offsetHeight);}}vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个 this.$nextTick(()=>{//函数 })来获取，发现根本没用啊/。。 所以好的办法就是用一个setTimeout定时器，时间可以设为0，但是有时候生效，有时候不生效，还是加...
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2....
前言 Vue最明显的特性之一便是它的响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。文章简要阐述下其实现原理，如有错误，还请不吝指正。下面话不多说了，来随着小编来一起学习学习吧。 响应式data <div id = "exp">{{ message }}</div> const vm = new Vue({el: #exp,data: {message: This is A} }) vm.message = This is B // 响应式 vm._message = This is C // 非响应式上述...
js 数组的push方法，想必大家都知道是向数组末尾添加元素，但是有一个很关键的点需注意： 引自 MDN 返回值 当调用该方法时，新的 length 属性值将被返回。 var sports = ["soccer", "baseball"]; var total = sports.push("football", "swimming"); console.log(sports); // ["soccer", "baseball", "football", "swimming"] console.log(total); // 4数组push之后返回的是length,而不是新的数组，如果不清楚这点，在使用过程中回...