废话：上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理：Object.defineProperty() -数据劫持 和 发布订阅者模式（观察者），下面讲的就是数据劫持在代码中的具体实现。1.先看如何调用new一个对象，传入我们的参数，这个Myvue ，做了啥？上面看到了在实例化一个Myvue 对象的时候，会执行init方法， init 方法做了两个事，调用了observer 方法，和 实例化调用了 compile 方法。 到这里我们就明白了...
一、解释1、安装与引用NPM： npm install vue-resource --save-dev 除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求/*引入Vue框架*/ import Vue from ‘vue‘ /*引入资源请求插件*/ import VueResource from ‘vue-resource‘/*使用VueResource插件*/ Vue.use(VueResource)2、使用语法// 基于全局Vue对象使用http Vue.http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback); Vue....
一创建一个 options.js 代码为：export const option1 = {bar: {title: {text: ‘珠海猪场‘ // 指定图表标题},credits: {enabled: false},chart: {backgroundColor: ‘black‘,type: ‘bar‘},plotOptions: {column: {colorByPoint: true},line: {dataLabels: {// 开启数据标签enabled: true}// 关闭鼠标跟踪，对应的提示框、点击事件会失效// enableMouseTracking: false}},xAxis: {categories: [‘今日已入场‘, ‘已交易单次‘...
axios interceptors 拦截器//interceptors.js// vue axios配置 发起请求加载loading请求结束关闭loading // http request 请求拦截器，有token值则配置上token值 import axios from‘axios‘ import router from‘../router‘ import { Loading } from‘element-ui‘ import Promise from‘promise‘var loadinginstace // http请求拦截器axios.interceptors.request.use(config => {// element ui Loading方法loadinginstace = Lo...
JS 实现双击编辑原始 HTML代码：<!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>Document</title> </head> <body> <div class="form-group"> <label>姓名：</label> <span>张三</span> </div> <div class="form-group"> <label>个人介绍：</label> <span>我就是我，颜色...
https://www.cnblogs.com/kevin-zjy-blog/p/7357220.html 1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享（CORS）7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域 那么就需要安装chrome浏览器的cors插件来解决开发环境下面的跨域问题，等开发完成后上传到正式服务器就ok啦。原文：https://www.cnblogs.com/yaowe...
页面跳转出现进度条（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...
主要用到的是tracking.js,在组建中引入tracking.js和face-min.js<video autoplay playsinline ref="video" id="video" class="viedert" v-show="true"></video> <canvasid="canvas"class="canvas"></canvas>import tracking from‘@/assets/js/tracking-min.js‘import ‘@/assets/js/face-min.js‘ export default{components:{tracking},data(){return{submitBase:"",//存储拍到的base64照片,作为接口参数videoEle: null,tracker...
<template><div class="star"><span class="star-item on"></span><span class="star-item off"></span><span class="star-item half"></span><hr><span class="star-item" v-for="(item, index) in starList" :key="index" :class="item"></span></div></template><script> export default {data() {return { score: 3.9 }},computed: {starList: function () {let result = []const score = Math.floor(this.score *2) /2// 4.7 ...
Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用easy...
需求一：在一个列表页中，第一次进入的时候，请求获取数据。 点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。解决方案在 App.vue设置： <keep-alive include="list"><router-view/></keep-alive>假设列表页为 list.vue，详情页为 detail.vue，这两个都是子组件。我们在 keep-alive 添加列表页的名字，缓存列表页。然后在列...
简单实现过程：通过v-for实现tab页签，通过@click实现页签切换，通过:class实现绑定当前页，tab切换主要依靠组件component实现，每个页签切换时，不想让改变页签内容，可以用keep-alive实现。具体代码如下：<template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model="tabView"> <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange(‘select‘ + (i...
三、通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转：①直接修改地址栏中的路由地址<!doctype html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script><!-- 引入文件 --><script src="js/vue-router.js"></script></head><body><div id="container"><p>{{msg}}</p><!--通过router-view指定盛放组件的容器 --><router-view></router-view></div><script>var testLogin = Vue.componen...
页面效果如下<template><div><h1>首页</h1><section class="floor-nav" id="floorNavList"><!-- 左侧楼层 --><ul class="nav-list"><li class="nav-list-item" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li></ul></section><!-- 右侧的内容区域 --><section class="floor-item" v-for="item in floorList" :key="item.id"><div class="floor-item-box"><h2>{{ it...
后端：<!--token--><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.4.0</version></dependency>/*** @author ：ZWQ* @version ：1.0* @date ：2019/10/16 - 18:52* @description ：*/@Service publicclass TokenService {public String getToken(User user) {Date start = new Date();long currentTime = System.currentTimeMillis() + 60* 60 * 1000;//一小时有效时间Date end = new Date...