NProgress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress 安装 $ npm install --save nprogress或者 $ yarn add nprogress用法NProgress.start() 显示进度条NProgress.done() 隐藏进度条使用//导入 import NProgress from ‘nprogress‘import ‘nprogress/nprogress.css‘ router.beforeEach((to, from, next) => { NProgress.start() next() }) r...
使用<a>标签锚记 会在URL上添加路径 导致刷新页面时无法找到 正确的页面解决:<a @click="Top"></a>methods:{Top (){document.querySelector("#id").scrollIntoView(true);}}document.querySelector("要去的地方的id").scrollIntoView(true); 标签 锚记后刷新页面 找不到页面' ref='nofollow'>vue 使用标签 锚记后刷新页面 找不到页面原文:https://www.cnblogs.com/aknife/p/12091721.html
直接上代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>vue.js 使用数组和对象控制Class </title><script src="vue.js"></script><script src="node_modules/axios/dist/axios.js"></script><script src="node_modules/lodash/lodash.js"></script></head><body><style>.red{color:red;}.font{font-size: 200px;}</style><div id="ask"><!--vue不能控制body和html的标签--><h1 :class="object">简单</h1>...
参考https://developers.google.cn/maps/documentation/javascript/get-api-keyvue使用google地图不FQ使用google搜索原文:https://www.cnblogs.com/Jamie1032797633/p/11267420.html
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。github:点击查看线上demo:点击查看npm安装和引用npm install dom-to-imageimport domtoimage from ‘dom-to-image‘;domtoimage方法和属性domtoimage主要的方法有:domtoimage.toPng(...);将节点转化为png格式的图...
一、监听数组 1.watch能监听到数组的push的改变,例如data () {return {demo: [1,2]}
}, mounted (){ window.myVue = this },watch: {demo(val){console.log(val)}
},myVue.demo.push(3) //[1,2,3] 2.watch 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:myVue.demo[1] = 5当你修改数组的长度时,例如:myVue.demo.length = 2 这时候你可以删除原有键,再 $set 一个新的,这样就可以触发watchmy...
vuex 概述vuex 是实现组件全局状态(数据) 管理的一种机制, 可以方便的实现组件之间的共享优点 :能够在 vuex 中集中管理共享的数据, 易于开发和后期维护能够高效地实现组件之间的数据共享 , 提高开发效率存储在 vuex 中的数据都是响应式的 , 能够实时保持数据与页面的同步什么样的数据适合存储到 vuex 中一般情况下 , 只有组件之间共享的数据 , 才有必要存储到 vuex 中 ; 对于组件中私有数据 , 依旧存在组件自身的 data 中即可vuex ...
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:1.首先新建一个Cmponent.vue文件// Cmponent.vue
<template><div>我是组件</div>
</template><script>export default {}
</script><style scoped>div{font-size:40px;color:#fbb;text-align:center;}
</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件import component from ‘./Cmponent.vue...
1.npm install vant-weapp 2.在webpack.base.conf.js加参数new CopyWebpackPlugin([{from: resolve(‘node_modules/vant-weapp/dist‘),to: resolve(‘dist/wx/vant-weapp/dist‘),ignore: [‘.*‘]}])
3.在页面json引入控件"usingComponents": {"van-button": "../../vant-weapp/dist/button/index","van-cell-group": "../../vant-weapp/dist/cell-group/index","van-cell": "../../vant-weapp/dist/cell/index","van-icon": ".....
MQTT安装npm install mqtt或<script src="./static/mqtt/mqttws31.js"></script> 自行下载引入资源 使用本地引入的方式:<template><div><p></p></div></template><script>
import { uuid } from "vue-uuid";
export default {name: "MqttConnect",props: {},data() {return {config: {},reconnectTimeout: 2000,mqtt: null,msg: "",topic: "mqtt", // 订阅的主题 };},watch: {},mounted() {this.config = {host: "192.168.1.10...
vue使用字体图标svg,在src下新建目录icons文件,再在icons文件下新建svg文件,在阿里ico中将字体的svg图片下载下来即可:例如from.svg在组件中新建icon-svg.vue组件<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script>export default {name: ‘icon-svg‘,props: {iconClass: {type: String,required: true}},computed: {iconName() {return `#icon-${this.iconCl...
页面跳转出现进度条(router.js)router.beforeEach((to, from, next) => {//出现进度条NProgress.start()next()
})router.afterEach(() => {//进度条消失NProgress.done()
}发送请求出现进度条(这里使用 axios 发送请求)// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 出现进度条NProgress.start()return config
}, function (error) {// Do something with request errorreturn Promise.reject(erro...
说明:为防止私钥泄漏,由服务端生成两对密钥,分别是(前端公钥+私钥,后端公钥加私钥),采用加解密模式为:前端使用后台公钥加密,使用前端私钥解密;后端使用前端公钥加密,使用后端私钥解密。前后端统一使用公钥加密,私钥解密一、现在vue项目中安装依赖包jsencrypt npm install jsencrypt --save-dev二、在项目中新建jsencryptKey.js,用来存放公共加解密方法 三、jsencryptKey.js内引入依赖jsencrypt.js 四...
第一种:首先我项目是在 webpack 下搭建的vue项目
在public文件夹下创建jsonTest.json
json 格式的数据如下:
{“innerList”: [{"attr1":"内部数据1","attr2":"内部数据2",...},{"attr1":"内部数据1","attr2":"内部数据2",...},....]
}在某一组件内:......html元素
import people from '../../json/jsonTest.json';export default{data(){return {dataset: people.innerList}}
}
第二种:getDataList(){this.$axios.get("/json/j...
由于升级了 v0.2 版 GearCase 使用打包工具从 parcel 更换成 vue-cli 3.x。因此打包后发布 NPM 包的方式与之前有很大的差异,这也导致了在发布完 GearCase v0.2.2 版本之后,我自己在进行 NPM / Yarn 安装包时。根本无法通过之前文档的方式,进行引入并注册组件。后来我大概花费了两天的时间来解决这个问题。回顾由于 parcel 的打包方式与 webpack 有很大的差异。并且当时还处于轮子库 v0.1 版本,引入/注册组件的方式也有不同。详...