引用vue-touch之后，页面里多了一个css属性 只要给这个元素一个新的CSS覆盖就行了。但写的时候发生一个小插曲，加了一个touch-action: pan-y!important;没起作用。后来发现原来是<v-touch v-on:swipeleft="getNext" v-on:swiperight="getPrev" tag="div" class="v-touch">在引用之后会变成<div>标签所以只需要给后面加一个class标识就可以了。class="v-touch" .v-touchtouch-action: pan-y!important;最后给一个CSS属性变OK了。 ...
vue中关于滚动条的那点事不知道你有没有遇到过这种情况，有时当页面切换时，滚动条不在页面的顶端。最近半路加入一个项目，就遇到这种情况。(若只是为了解决此问题，可直接翻到最下方)下面谈谈解决此问题的过程：什么情况下会出现滚动条的缓存？之前想要滚动条在页面跳转时被缓存，需要自己设定keep-alive，<keep-alive v-if="$route.meta.keepAlive"><router-view></router-view></keep-alive><router-view v-if="!$route.meta.ke...
已有前辈整理，记录URL:http://www.cnblogs.com/ocean-sky/p/7132319.htmlhttp://blog.csdn.net/psd_html/article/details/73312859需注意的代码：子组件：config接收父组件传来的配置mounted() {//初始化UEconst _this = this;_this.editor = UE.getEditor(‘editor‘,Object.assign({autoHeightEnabled: false,autoFloatEnabled: true, //是否工具栏可浮动initialContent:‘请输入内容‘, //初始化编辑器的内容,也可以通过t...
毕业工作半年一直在做后端api，最近进入一个新项目同时做前后端，就从基础开始记录总结。因为项目代码不便上传，以下代码是我将部分内容修改之后的结果，主要记录实现方法，有不当的地方还望大家交流指正~ HTML： <div id="Information"><div id="SearchBarDiv" v-cloak><form><select id="YearSelect"class="form-control" v-model="yearVal" v-on:change="YearValChange"><option v-for="item in yearOption" :value="item.Value...
swiper相关文档官网 www.swiper.com.cns3使用说明 3.swiper.com.cn/usage/index.htmls6使用 www.swiper.com.cn/usage/index.html配置Api文档 www.swiper.com.cn/api/pagination/362.htmlvue专有用法 https://github.com/surmon-china/vue-awesome-swiper1.安装swiper因为生产环境也要用到所以要保存到项目 --save 不加版本号安装最新版本此处是6安装最新版本 cnpm install --save swiper安装指定版本 cnpm ins...
文件压缩如何去掉console在使用vue开发项目的过程中，免不了在调试的时候会写许多console，在控制台进行调试；在开发的时候这种输出是必须的，但是build后线上运行时这个东西是不能出现的；那么我如何配置项目，从而让webpack帮我删除掉console呢？下面我们给出了vue-cli 3.0和vue-cli 2.0的配置如下：vue-cli 3.0在 vue.config.js文件中添加如下代码即可const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.export...
render函数的基本使用render函数可以接受三个参数，其中第一个参数是必填的可以是String | Object | Function 比如说直接写一个div的字符串 ``` javascriptrender(createElement) {return createElement("div") }```上边的代码你在审查代码的时候你会发现他渲染出来了一个div的标签，或者你输入了一个你不认识的字符串，他也会渲染成一个html标签比如说 ``` javascriptrender(createElement) {return createElement("xxx") }```他会...
一般我发现slot都是用在子组件 不知道对不对，不对的请留言指教 ，谢谢谢谢 使用slot场景一：子组件Minput.vue<input type=‘text‘/>父组件 Minput <Minput>可以显示吗</Minput>这种情况下 Minput标签内的文字是不会渲染出来的如果现在想在里面把文字渲染出来怎么办好 用slot子组件<input type=‘text‘/> <slot></slot>这样的话，父组件的里面的文字就可以渲染出来 场景二：具名插槽子组件 he.vue<header><slot name=‘header...
菜鸟学习之路//L6zt github 自己在造组件轮子，也就是瞎搞。自己写了个slider组件，想加个气泡提示。为了复用和省事特此写了个指令来解决。预览地址项目地址 github 我叫给它胡博我对指令的理解: 前不久看过 一部分vnode实现源码，奈何资质有限...看不懂。vnode的生命周期-----> 生成前、生成后、生成真正dom、更新 vnode、更新dom 、 销毁。而Vue的指令则是依赖于vnode 的生命周期， 无非也是有以上类似的钩子。代码效果 指令挂...
今天第一次使用Sublime Text3软件，在实现vue文件高亮显示的过程中一直报错，经过了半天时间的不停尝试终于找到了最有效的一种解决方法！错误提示如下：刚开始尝试了很多方法都不行，只要打开install Package就报错。无论是取消掉网络配置里的ipv_6选项，还是在hosts文件中添加映射也都不能解决问题。最后上网查找发现了一个真正有效的解决办法：remove package control and then re-install it manually。（转自http://www.cnblog...
父组件 向 子组件 传递数据 1Parent.vue 文件2 3<template> 4<div> 5<h2>Parent Component</h2> 6<p> 7<Child :ParentToChild="ParentToChildMsg"/> 8</p> 9</div>10</template>1112<script>13 import Child from ‘./Child‘14 export default { 15 name: "Parent", 16 data() { 17return { 18ParentToChildMsg:"这是【父组件】向【子组件】传递的信息", 19 } 20 }, 21 components: { 22 Child 23 } 2...
1、概念Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件，它包括State（数据源）、Getters（计算属性）、Modules（模块）、Mutations（事件）、Action（事件）。Action与Mutation的区别在于Mutation可以更改State，所以当Action要更改状态时通常是提交到Mutation中更改。2、安装2.1、安装完vue后就可安装vuex，本次示例建立在安装了vue-cli脚手架工具的基础上。安装vuex方法为在命令行输入：npm install vu...
分享一下最近写的 vue 的评分组件Features: 支持半星、可清除、文案展示、只读、自定义颜色、自定义字符及图片等、支持 hover 的时候改变 value、内置三种样式，以及非常好看DEMO： https://vue-cute-rate.netlify...Github： https://github.com/luyilin/vu...Enjoy ~原文：https://www.cnblogs.com/lalalagq/p/9921937.html
计算属性：计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。如果我们需要缓存，可用计算属性v-if中key的作用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，可以使用key已避免这种情况发生；v-if控制元素的销毁和重建；有惰性，直到为真时，渲染条件块；v-show控制元素的显示和隐藏；原文：https://www.cnblogs.com/llmatch/p/9428666.html
首先，子组件代码如下<template><div style="border:1px solid black;width:400px;"><h3>我是子组件里的</h3><button>点击按钮子组件传递父组件</button><div>我是父组件传子组件显示的:我还没有值</div></div> </template> <script> export default {data() {return {};},components: {},methods: {} }; </script>父组件代码如下<template><div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;"><h3>我...