根据官网的文档，要在一个html文件下使用layui里面的组件库其实很简单，但是在vue项目中使用该ui库却存在着很多坑，下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑：vue项目中使用npm安装引入时报错（目前并没有找到引入的合适的方式，知道的可以留言探讨） 在官网中我们可以看到他提到支持npm安装，但是当我们安装成功后，在main.js中引入时却报并不能找到该模块的错。 所以，我们先下载文件包，然后在htm...
这次做了vue页面的图片上传功能，不带裁剪功能的！ 首先是html代码，在input框上添加change事件，如下： <ul class="clearfix"><li v-if="imgs.length>0" v-for=(item ,index ) in imgs><img :src="item"></li><li style="position:relative" v-if="imgs.length>=6 ? false : true"><img src="../../assets/img/addimg.png"><input class="upload" @change=add_img type="file"></li> </ul> 我这里做了图片数量的限制，最多6张。 然...
vm.$delete()vm.$delete用法见官网。为什么需要Vue.delete()?在ES6之前, JS没有提供方法来侦测到一个属性被删除了, 因此如果我们通过delete删除一个属性, Vue是侦测不到的, 因此不会触发数据响应式。见下面的demo。 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Vue ...
路由传值 在前端的路由里面，我们在切换路由的时候，也相当于切换了页面，页面与页面之前有时候需要做到传值 ，这个时候就需要进行路由传值，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？ 普通跨页面传值： 1.通过localStoragesetItem() getItem()2.通过search(地址栏 ? 后面的参数)VueRouter的路由传值 VueRouter的路由传值有两种方式 jquery传值。 类似get传值 传值的路由 this.$router.push({path: "/login?un...
flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localhost:8080 npm run dev 原理概述 插件安装 # 插件一：amfe-flexible npm install amfe-flexible --save # 插件二： node-sass npm install amfe-flexible --save # 同时，在main.js文件内引入 npm install sass-loader --save编写js处理方法...
本文主要介绍了vue 搭建后台系统模块化开发，分享给大家，具体如下： 效果目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js...
1. router-link 1. 不带参数<router-link :to="{name:home}"> <router-link :to="{path:/home}"> //name,path都行, 建议用name // 注意：router-link中链接如果是/开始就是从根路由开始，如果开始不带/，则从当前路由开始。2.带参数<router-link :to="{name:home, params: {id:1}}"> // params传参数 (类似post) // 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可请求,刷新页面id会消失 // 配置p...
如上图所示：需要完成的功能是点击更改头像，获取本地文件库，选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能，代码如下： HTML： <div id="app"><div class="item_bock head_p"><div class="head_img"><img :src="userInfo.avatar"/><--图片地址动态绑定--></div><div class="setting_right" @click.stop="uploadHeadImg"><div class="caption">更改头像</div></div><input type="file" accept="ima...
$root vue状态管理使用vuex,如果项目不大，逻辑不多，name我们没必要用vuex给项目增加难度，只需要用$root设置vue实例的data就行了，如下 main.js new Vue({data(){return{loading:true}},router,store,render: h => h(App) }).$mount(#app)a.vue created(){ console.log(this.$root.loading) //获取loading的值 }b.vue created(){ this.$root.loading = false; //设置loading的属性 }$parent parent能够访问父组件的属性和方法 pa...
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90%完善的中英文文档和示例支持 babel-plugin-import支持 TypeScript支持 SSR组件中文文档地址：https://youzan.github.io/vant/#/zh-CN/intro 1、创建VUE项目之后进入项目目录运行安装命令：npm i vant -S2、安装 babel-plugin-import 插件，babel-plugin-import 是一款...
关于vm.$watch()详细用法可以见官网。 大致用法如下: <script>const app = new Vue({el: "#app",data: {a: {b: {c: c}}},mounted () {this.$watch(function () {return this.a.b.c}, this.handle, {deep: true,immediate: true // 默认会初始化执行一次handle})},methods: {handle (newVal, oldVal) {console.log(this.a)console.log(newVal, oldVal)},changeValue () {this.a.b.c = change}}}) </script> 可以看到data属性整个a对...
一.实现思路 (1)实现上是左右分别一个better-scroll列表(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置二.实现 1.实现左右两个better-scroll (1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)左边滚动列表dom<div class="menu-wrapper" v-el:menu-wrapper><ul><li v-for="item in goods" class="menu-item":class="{current:currentIndex === $index}"@click="selectMenu($index,$event)"><sp...
在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的storage进行存储，之后，定义指令，如果用户含有此按钮权限，则在页面显示出来： /**权限指令**/Vue.directive(has, {bind: function(el, binding) {if (!Vue.prototype.$_has(binding.value)) {el.parentNode.removeChild(el);}}});//权限检查方法Vue.prototype.$_has = function(value) {debuggerlet isExist=false;let buttonpermsStr=sessionStorage.getItem("butt...
场景分析 在前端开发中，我们常常会运用到“组件库”。在main入口中引入组件库，就可以很轻松的在页面中引入，并做一些基本的配置，如样式，颜色等。只需要在引入的组件中写入特定的属性，就能够定义。 举例说明 例如：element-ui组件库中使用switch开关，有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。<el-switchv-model="value":active-color="activecolor"@change="touchSwitch"> </el-switch><s...
auto-vue-fileauto create .vue file by shell command通过终端自动创建vue文件前言：1: 我们在写xxx.vue页面文件的时候，一般都要写这些重复的代码：<template><div class="zlj-comp-ct">zlj组件</div> </template> <script> export default {name: zlj } </script> <style lang="scss" scoped> .zlj-comp-ct {} </style>2:写组件的时候可能还要在components目录下面新建一个目录:xxx,里面是xxx.vue和index.js比如myForm组件// my...