Vue.js
dq_095
软件工程师一位
展开
-
Vue 之 Better-scroll 实现列表滚动效果
实现列表滚动的效果1、下载 better-scroll “better-scroll”: “^1.11.1” npm install2、 在.vue组件列表里面调用 ,不用在main.js页面中进行use()使用<script> import BScroll from 'better-scroll'; created(){...原创 2018-08-10 12:52:04 · 2678 阅读 · 0 评论 -
Vue.set() 响应式新增与修改数据
vue中不能检测到数组和对象的两种变化:数组长度的变化 vm.arr.length = 4数组通过索引值修改内容 vm.arr[1] = ‘aa’Vue.$set(target,key,value): 可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示。vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和se...原创 2018-08-12 09:19:57 · 2290 阅读 · 0 评论 -
Vue v-show() 的小技巧总结
小技巧总结()一):v-show=”needShow(rating.rateType,rating.text)”methods:{ needShow(type,text){ if (this.onlyContent && !text) { return false; } ...原创 2018-08-12 09:26:24 · 2312 阅读 · 0 评论 -
Vue ul li 列表 最后一个子元素 “不需要列表横线写法”
Vue里面 ul li 列表 最后一个子元素 “不需要列表横线写法”.block flex 1 text-align center border-right 1px solid rgba(7,17,27,0.1) &:last-child border-right 0px solid rgba(7,17,27,0.1) 重点在...原创 2018-08-12 09:29:08 · 4527 阅读 · 0 评论 -
Vue 2.0 选项 / 数据 (介绍)
dataVue 实例的数据对象 Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。 对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。 大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 ...原创 2018-09-06 20:09:05 · 317 阅读 · 0 评论 -
Vue blog博客 收集
博主:kingrome2017《vuejs2.0详细教程,结合Api文档》:https://blog.csdn.net/kingrome2017/article/details/70197574v-text 与 v-html 区别自定义事件如何触发表单元素过v-model 及时处理数据实例计算属性及调用方法的优缺点监听-watch全局注册组件规范写法:动态实现模板父子...原创 2018-09-06 21:01:19 · 373 阅读 · 0 评论 -
vue 学习目录
vue 学习目录一 、Vue.js 安装下载 Vue.js独立版本下载 Vue.js使用 CDN 方法国内还没发现哪一家比较好,目前还是建议下载到本地。NPM 方法创建一个基于 webpack 模板的新项目vue init webpack my-projectcd my-projectnpm installnpm run dev二、Vue.js 目录结...原创 2018-10-17 11:05:51 · 266 阅读 · 0 评论 -
Vue报错 Error: No PostCSS Config found in...
项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地,执行:npm install安装完成之后再执行:npm run dev这时报错 Error: No PostCSS Config found in…本以为是 GitHub 上传的问题,后开又试了两回,发现问题依然存在,于是就开始网上寻找办法。解决方案在项目根目录新建postcss.config.js文...原创 2018-11-06 14:29:00 · 1602 阅读 · 0 评论 -
Vue2.0自定义提示框组件(Toast)
原创 https://www.cnblogs.com/crazycode2/p/7927473.html效果图一 、全局引入main.js// 全局引入Toastimport './components/Toast/toast.css';import Toast from './components/Toast/index';Vue.use(Toast);二、页面调用T...原创 2018-11-07 22:40:28 · 17206 阅读 · 0 评论 -
vue 中 如何修改【数组中】【对象的值】,解决步骤如下
vue 中 如何修改【数组中】【对象的值】在 vue 中是无法检测到根据索引值修改的数据变动的但 你可以这样做// 第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修改为什么值// 要修改的数据: 根据索引值你可以拿到数组中的第 `index`条数据: `this.iptDatas[index]`// 前数组的哪一个字段: `showAlert`// 修改为...原创 2018-11-07 23:37:23 · 27249 阅读 · 2 评论 -
Vue表单验证 input 校验字母数字组合,且长度小于30
Vue表单验证 input 校验字母数字组合,且长度小于30<Input v-model="form.glhm" placeholder="请输入用户名" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input> validateJyh(glhm){//校验关联用户名原创 2018-11-08 18:11:36 · 12587 阅读 · 0 评论 -
vue-element-admin项目结构认识
build目录中的webpack.prod.conf.js配置文件webpack.prod.conf.js 是webpack生产环境的核心配置文件webpack.prod.conf.js是一个系统的配置文件,将涉及很多的模块和插件...原创 2019-03-20 20:14:06 · 2186 阅读 · 1 评论 -
项目开发中dev、test和prod是什么意思
开发环境(dev):开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告。测试环境(test):一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布到生产机上。生产环境(prod):是值正式提供对外服务的,一般会关掉错误报告,打开错误日志。三个环境也可以说是系统开发的三个阶段:开发->测试->上线,其中生产环...原创 2019-03-20 20:15:47 · 3590 阅读 · 0 评论 -
vue.js 实现的tab切换功能
实现原理:点击tab @click事件,替换index = num索引,tabContent内容部分 v-show:展示与隐藏 :index与 num<!--这里是html结构--><div id="app"> <ul> <li v-for="(item,index) in tabs" :class="{active:inde...原创 2018-08-12 08:51:47 · 1980 阅读 · 0 评论 -
Vue 关于data(){return {返回的默认值的总结} }
data(){return {返回的默认值的总结} }一定要有结束符 () 即:(()=>{})() 不然浏览器解读不出来 data({ favorite:(()=>{ return loadFromLocal(this.seller.id,'favorite','false'); })() ...原创 2018-08-12 08:43:54 · 16810 阅读 · 0 评论 -
Vue 之 导入 import {formatDate} 中为什么要加上花括号 {}
date.js通过export function fnt(){} 导出的方法或函数是 要加上花括号{ fnt } 的 export function formatDate(date,fmt){ };引入到 .vue文件中 要加上花括号{} import {formatDate} from "@/common/js/date";其实这是ES6中的语法...原创 2018-08-15 23:56:46 · 1866 阅读 · 0 评论 -
Vue 之 导入 import {formatDate} 中为什么要加上花括号 {}
date.js通过export function fnt(){} 导出的方法或函数是 要加上花括号{ fnt } 的 export function formatDate(date,fmt){ };引入到 .vue文件中 要加上花括号{} import {formatDate} from &quot;@/common/js/date&quot;;其实这是ES6...原创 2018-08-12 08:13:11 · 10253 阅读 · 0 评论 -
Vue vue 父组件调用子组件方法 子组件向父组件派发事件
vue 父组件调用子组件方法父组件里 .vue文件&amp;lt;component ref=&quot;transEvent&quot; :is=&quot;childMsg.filter&quot; &amp;gt;&amp;lt;/component&amp;gt;js:部分绑定ref属性: thi原创 2018-08-11 23:39:01 · 1337 阅读 · 0 评论 -
Vue.js 用cli脚手架来安装stylus遇到的坑
通过cli脚手架安装stylus遇到的坑npm安装stylus和stylus-loader1、通过指令全局安装stylus $ npm install stylus -g虽然全局安装了,但是在vue.js中并没有起到作用; 2、在vue.js的文件中创建了后缀名为.styl的stylus的文件,但在编译的时候总是会报错如何解决: 1.在package.json...原创 2018-08-11 00:07:32 · 1027 阅读 · 0 评论 -
vue2.0 axios本地数据请求方法
vue2.0中 axios 在没有dev-server.js下的 本地数据配置方法1、package.json安装 axios vue-axio &quot;dependencies&quot;: { &quot;axios&quot;: &quot;^0.18.0&quot;, &quot;vue-axios&quot;: &quot原创 2018-08-11 00:20:00 · 2006 阅读 · 1 评论 -
vue2.0 带参数 请求服务器数据 api:sellerid=123456
https://segmentfault.com/a/1190000010124638 全面分析vue2.0饿了么,值得一看能够获取url地址中 ? 后面的数据并且还带上问号 window.location.search;如:http://192.168.43.124:8080/api/seller?id=123456中? window.location.search...原创 2018-08-11 01:19:25 · 2344 阅读 · 0 评论 -
vue2-toast 提示框插件
https://github.com/lin-xin/vue-toast安装vue2-toast:npm install vue2-toast -S全局导入vue2-toast:import 'vue2-toast/lib/toast.css';import Toast from 'vue2-toast';Vue.use(Toast);orimport 'vue2-...原创 2018-08-11 01:25:22 · 6346 阅读 · 0 评论 -
初步结合 Vue、axios、php、mysql ,写一个小Demo
html部分:<template> <div class="myself"> <table class="table" v-show="toggleTable" cellspacing="0" border="1"> <tr class="tr"&原创 2018-08-11 10:22:30 · 1661 阅读 · 0 评论 -
vue-form表单验证是否为空值
重点部分:点击表单的 submit按钮 触发form 部分 @submit=”submit”事件:submit事件 定义在js部分: prevent:文档上说了在事件后面加上 .prevent就可以阻止默认事件了。 form @submit.prevent=”submit” <form @submit.prevent="submit"> <...原创 2018-08-11 10:51:10 · 33158 阅读 · 4 评论 -
vue2.0 动画+ stylus
一个vue2.0动画+stylus的博客文章地址:https://www.cnblogs.com/jr1993/p/vue.html以前这样子写的 <div transition="move" class="cart-decrease" v-show="food.count>0" @click="decreaseCart"> <span c原创 2018-08-11 11:27:59 · 781 阅读 · 0 评论 -
vue 项目中 使用阿里iconfont 图标
vue项目中使用阿里iconfont图标可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种:方法一:简单粗暴法– 使用iconfont提供的链接打开 iconFont官网 选择自己喜欢的图标,并且添加购物车,点击购物车,添加至项目为了方便可以给项目起一个名字,选择Font class,点击“暂无代码,点...原创 2018-08-11 19:17:50 · 312 阅读 · 0 评论 -
Vue 时间过滤器
Vue里的 时间过滤器:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue"原创 2018-08-11 23:38:24 · 2041 阅读 · 0 评论 -
Vue.Draggable学习笔记
options:Object,配置项,就是sortable.js的propsgroup:string or objectstring:group="people" 命名,个人建议用元素id就行,用处是为了设置可以拖放容器时使用,在array中的put的设置中再做介绍;object:{name,pull,put} :group="{ name: 'people', pull: 'cl...原创 2019-08-27 10:49:06 · 742 阅读 · 2 评论