1.路由文件 :router/index.js 添加 meta属性配置: import Vue from 'vue' import Router from 'vue-router' import index '@/view/index' import user from '@/view/user' Vue.use(Router) export default new Router({ routes: [ { path: '/index', name: 'index', component: in…

路由文件 :router/index.js import Vue from 'vue'import Router from 'vue-router'import index '@/view/index'import user from '@/view/user'Vue.use(Router)export default new Router({ routes: [ { path: '/index', name: 'index', component: index, meta:{ title:'首…

前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: cnpm install  file-saver cnpm install xlsx cnpm install script-loader 2.修改配置: 在如下截图文件位置新增一行即可:'vendor': path.resolve(__dirname, '../src/vendor'),//新增…

使用vue前端框架做,竟然丢弃了很多javascript和html的东西了..动态设置title的方法: 1.使用vue的自定义指令 <div v-title>{{htmltitle}}</div> ... directives: { title: { inserted: function (el, binding) { document.title = el.innerText el.remove() } } } 2.很简单 // 设置html title document.ti…

实现方式很简单,在属性前加:,表示绑定 :style="{'background':item.bgColor} 代码样例: <li v-for="item in laber_cloud"> <router-link :style="{'background':item.bgColor}" >{{item.name}}</router-link> </li>…

先上个效果图 现在只开发了年月,还在优化. 在网上看了一个纯原生js实现实现惯性滚动和回弹的文章  地址:https://www.cnblogs.com/ranyonsue/p/8119155.html. 于是改造成vue的scroll组件,然后派发scroll-end 滚动结束事件 和 on-scroll正在滚动事件, 传入滚动的Y值. 最后基于scroll组件调整位置,开发出示例图上的datepicker, 功能比较简单, 等优化后再传上代码…

前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码:所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量. 解决方法 在main.js文件中调用vue-router的afterEach方法,将统计代…

<template> <div id="parti-info"> <div> <span>您的姓名:</span> <input v-model="username" type="text" placeholder="请输入您的姓名" > </div> <div> <span >手机号码:</span> &l…

1.如何去除vue项目中的 # --- History模式: https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 2.三分钟教你写个Vue组件: https://www.jianshu.com/p/e731d9ad4ed1…

ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> <hello @newNodeEvent="parentLisen" /> </div> </template> <script> import hello from './components/Hello' export default {…

<span style="color:#006600;"><div id="app"> <input type="text" v-model:value="childrens.name" /> <input type="text" v-model:value="lastName" /> </div> <script typ…

1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /…

1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: ? 1 2 3 4 5 Vue.directive('dirName',function(){   //定义指令   }); 另外一种是局部注册: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 new Vue({   directives:{   dirName:{   //定义指令   }   }   }); 2.指令的定义 指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个…

MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function (…

Avoid replacing instance root $data. Use nested data properties instead. 翻译 避免替换实例根$data.请改用嵌套数据属性 错误的代码 const demoData={ name:"小明", age:19 } this.$data=demoData; //此种直接赋值即会导致警告产生(对象的拷贝默认是深拷贝即引用) 产生原因 最新的Vue已经不允许这样直接对跟实例$data进行赋值 解决方案 使用 Object.…

…

splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组) index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空 删除: //删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变) var arr = ['a','b','c','d']; arr.splice(1,1); console.log(arr); //['a','c','d']; //删除起始下标为1,长度…

HtmlMeta desc = new HtmlMeta(); desc.Name = "Description"; desc.Content = strTitle.ToString() ; Page.Header.Controls.Add(desc);…

1.修改Mobile Form的TitleText的属性 输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性 其中包括Image属性(窗体图标).BackColor属性(窗口标题栏背景色).TextColor属性(窗口标题栏文本颜色)和TextAlign属性(窗体标题栏文本水平方向),如图2: a.Image属性(TitleImage) 设置窗体图标,将Image属性设置为“coms”如图3.图4: 图1 图2 图3 图4 b.BackColor属性 设置窗口标…

场景:A首页.B列表页.C详情页B---->C 缓存‘列表1’详情的数据A---->C 读取‘列表1’详情的数据B---->C (希望清除‘列表1’的缓存,变成缓存‘列表2’详情的数据) A---->C 问题出现了,读取的竟然还是‘列表1’的缓存数据. main.vue <!--缓存的视图--> <keep-alive> <router-view v-if="$route.meta.keepAlive"> </route…

查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 实现思路: 在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中,获取 <span> 标签对象,调用 css() 方法,设置字体颜色为红色 在页面加载完毕事件中,获取 <a> 标签对象,调用 css() 方法,去掉 <a> 标签的下划线 在页面加载完毕事件中…

在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结合基于Vue+Element实现动态表单的设计.数据录入存储的相关操作. 1.动态表单的设计 动态表单的设计一般是基于某个能够动态设计界面的方式实现的,界面上定义对应的说明以及录入数据的方式,如标签后面加上文本,或者多文本等方式.由于我们后台是强类型的数据实体,后端一般不采用动态修改数据库字段的方式…

因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t…

使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址),一个后台前端解决方案,虽然站在巨人的肩膀上,但是要改成符合公司的后台,改变也是巨大的 改变: 1.公司的登录接口,把登录者信息,角色,权限列表一次返回 2.我一再建议公司把菜单配置放在前端,但是最终还是没能说服他们,所以开始撸码咯,这里有个需要注意的就是 动态配置路由,不能这样写 componen…

上下固定,中间滚动布局(FLEX) <div id="app"> <div class="header"></div> <div class="views"></div> <div class="footer"></div> </div> <style> #app{display: flex;flex-direction…

一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的,以前也有一定做小程序的基础,感觉还是很相似的,不过对于一些稍复杂的点,感觉还是总结的不够细致,例如插槽,和计算属性等,平时前端的东西看的也不是很多,学习过程中整理的笔记,和大家一起分享交流!欢迎各位大大交流意见~ 二 初始 Vue (一) Vue 概念理解 (1) Vue.js 是什么 Vue (…

vue.js 变化 从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9,最后一个为 v2.5.13,主要发布小版本 2.2~2.5.这些发布提升了vue 与 TypeScript 的结合.改进了对服务端渲染(SSR)和 native 渲染的支持.提供了更好的测试.开发体验及其他的一些功能与优化. vue@2.2 变化 1)使用 v-for 必须要添加 key 属性. 2)单文件组件(SFC)标签需要闭合,尽管 html5 中标签没有闭合也是有效的. 3…

package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如: –save-dev 安装的 插件,被写入到 devDependencies 对象里面去 –save 安装的 插件 ,被写入到 dependencies 对象里面去 devDependencies 是只会在开发环境下依赖的模块,生产环境…

1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化 4.vue中实现全局的setCookie,getCookie以及delCookie方法笔记 5.webpack中alias配置中的“@”是什么意思? 6.webpack proxyTable 代理跨域 7.如何在 vue 项目里正确地引用 jque…

动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把它改名为 api.js,并把里边原来登录.用户.菜单的相关接口都转移到我们新建的接口模块文件中. 模块化之后的文件结构如下图所示 模块化之后,模块接口写在相应的模块接口文件中,如下面是登录模块 login.js imp…