vue vuex vue-router
关注
分享
扫一扫
vue vuex vue-router
八佾舞于庭
幸对清风皓月，苔茵展，云幕高张。江南好，千钟美酒，一曲满庭芳。
展开
-
浏览器打开pdf文件默认全屏设置方法
打开地址如http://txt.pdf#view=FitH,top,在文件地址后面添加#view=FitH,top，可以实现一打开全屏查看pdf文件。#view=FitH,top参数默认是全屏打开文件，当前测试本地文件也可以用这种方法打开预览，本人只测试了Google浏览器，是没有问题的。...原创 2020-09-23 16:37:36 · 4411 阅读 · 2 评论 -
vue嵌入react组件
vue中嵌入react组件，直接上图，下图为一个开源的jsoneditor组件，由react编写，在项目中需要集成到vue工程中，组件名称为jsonEditor.jsx在需要引入的vue组件中引入，package.json文件需要引入的资源包vuerareact react-dom等等.babelrc文件中需要修改的地方vue...原创 2020-04-24 17:12:50 · 5043 阅读 · 1 评论 -
webpack笔记
WebPack可以看做是模块打包机：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。1、初步webpack 进行代码打包如果没有webpa...原创 2018-11-15 16:19:32 · 166 阅读 · 0 评论 -
vue 交互本地json数据
static目录是vue-cli向外暴露的静态文件夹，所有静态数据都应该放到static目录中，因此如果使用vue-cli生成配置文件的想要交互本地json数据 就只能放在static目录下。...原创 2018-10-10 08:54:51 · 1386 阅读 · 0 评论 -
axios 拦截器interceptors转换参数格式
全局拦截器内添加post数据转换格式 http.interceptors.request.use(function (config) { config.url = encodeURI(config.url);//解决url乱码 if (config.url=='xxxxxxxxxxxxxxx') { config.transformRequest=[func...原创 2018-10-10 09:45:46 · 2330 阅读 · 0 评论 -
vue利用v-bind动态绑定属性和props实现父向子传值
v-bind 动态绑定属性 比如src class style以及自定义属性如下面代码所示data columns urllazy v-bind动态绑定 //父组件中引入子组件import treeTable from '../../common/TreeGrid.vue';components: { treeTable,}//父组件中子组件标签<tree-ta...原创 2018-10-10 10:14:34 · 6972 阅读 · 0 评论 -
vue清除定时器
clearTimeout加在路由钩子函数里面：原创 2018-11-15 09:55:35 · 948 阅读 · 0 评论 -
vue api详解
全局配置：silent: true 或者 false， 脚手架生成默认为false （取消 Vue 所有的日志与警告。）Vue.config.silent = trueoptionMergeStrategies：用于自定义选项的合并策略，Vue已经预定义了一些自己配置项的合并策略，extend,extends和mixins三种方式接收的options,最终都是通过mergeOpti...原创 2018-12-04 17:00:58 · 3136 阅读 · 0 评论 -
spa单页面和多页面区分最详细对比
原创 2018-11-13 14:20:09 · 1119 阅读 · 0 评论 -
vue过渡动画transition、关键帧（keyframes）动画的实现
要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，这个类描述的是过渡动画结束时元素的状态。 transition动画 vue结合原生css动画:<!DOCTYPE html><html lang="en"><head>...原创 2018-12-17 17:00:41 · 2969 阅读 · 0 评论 -
属性访问器Object.defineProperty()详解
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in或Object.keys方法），这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用Object.defineProperty()添加的属性值是不可修改的。定义Object.defineProperty()方...原创 2019-01-18 14:44:06 · 525 阅读 · 0 评论 -
计算属性computed和侦听器watch
计算属性和侦听器 计算属性 个人理解： computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理，同时绑定的数据必须是响应式依赖； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，如购物...原创 2019-01-18 16:23:14 · 361 阅读 · 0 评论 -
vuex安装及最基本使用入门(严格模式下)
安装vuex npm install vuex --savemain.js中引入安装 import Vuex from 'vuex';Vue.use(Vuex);配置vuex（非严格模式下可直接操作state数据，只是无法跟踪数据状态变化） //Vuex配置 const store = new Vuex.Store({ ...原创 2019-10-05 09:31:37 · 279 阅读 · 0 评论 -
vue开发多页面应用修改配置详解
相关配置webpack 1.14.0 、node v6.11.0、npm 5.6.0,代码目录结构由vue-cli生成，如下：保留脚手架原有文件，src下新建pages文件夹存放.html .vue .js修改多页面配置文件：build文件夹下 dev.conf.js、pro.conf.js 、base.conf.js ,修改部分已经表明为添加代码直接上代码，修改代码中引用g...原创 2018-11-16 17:03:44 · 1302 阅读 · 0 评论 -
vue 插件HtmlWebpackPlugin最全参数详解
var htmlWebpackPlugin = require('html-webpack-plugin')module.exports = { plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: 'index.html', ...原创 2018-11-16 16:04:30 · 6054 阅读 · 0 评论 -
vue+vue-cli中使用less
步骤一npm install less less-loader --save 步骤二下面代码加在 webpack.base.conf.js{test: /\.less$/,loader: "style-loader!css-loader!less-loader",}步骤三 <style lang="less" scoped>@base: #f93...原创 2018-10-16 15:35:54 · 315 阅读 · 0 评论 -
vue-router 路由监听 重定向 路由懒加载 模式
1、路由监听：watch如下watch: { '$route' (to, from) { // 对路由变化作出响应... } }导航被触发。 在失活的组件里调用离开守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 在路由配置里调用 beforeEnter。 解析异步...原创 2018-10-19 09:12:32 · 2126 阅读 · 0 评论 -
基于vue-cli的vue项目打包部署（本人项目nginx）
打包npm run build部署将打包出来的资源扔到服务端一、前端路由和打包路径配置：路由router.js配置base（当前服务器放置资源文件夹名，本人score）服务器中，项目肯定不会放在根目录，所以要指定路由的base，提前和后端商量好项目部署的服务器文件夹路径进入config --> index.js二、后端配置：路由跳转出现404，主...原创 2018-10-19 10:43:29 · 1702 阅读 · 0 评论 -
vue+elementui 搭建 treeTable实现异步加载，追加子级
treeTable页面html部分：<template> <el-table :data="formatData1" :row-style="showRow1" v-bind="$attrs" style="width: 100%;" :height="height"> <el-table-column v-if=&qu原创 2018-10-11 08:37:30 · 9003 阅读 · 3 评论 -
vue阻止冒泡和默认行为指令
1、@click.stop 阻止冒泡2、@submit.prevent 阻止默认行为原创 2018-10-19 15:12:42 · 1312 阅读 · 0 评论 -
vue实现table评分表
<template> <div class="ss_scoreTable"> <table border="1" cellpadding="0" cellspacing="0"> <!--caption定义的是表格的标题--> <caption&am原创 2018-10-19 15:23:38 · 2171 阅读 · 0 评论 -
axios交互post方式 后台取值为空
axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd }})(本人测试qs有效，但是据相关资料...原创 2018-10-30 14:57:32 · 4154 阅读 · 0 评论 -
vue引入jquery
webpack.base.conf.js加入var webpack = require("webpack");module.exports加入：plugins: [new webpack.ProvidePlugin({jQuery: "jquery",$: "jquery"})]然后 npm run dev ；import $ from 'jquery'是必...原创 2018-10-30 15:04:19 · 257 阅读 · 0 评论 -
Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
报错 Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.报文：后台配置修改header为*,解决当前报错。原创 2018-11-07 12:27:27 · 3774 阅读 · 0 评论 -
vue服务端渲染ssr和预渲染Prerendering、Nuxt.js
服务器端渲染(SSR)与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊...原创 2018-11-13 15:42:21 · 2748 阅读 · 2 评论 -
vuex改变state数据状态
最好不要直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解应用，直接修改state是反模式的，这实现数据共享没问题，但不利于复杂情况下的数据追踪和调试。...原创 2018-11-13 16:21:32 · 4126 阅读 · 0 评论 -
vue应用性能优化 分离css 第三方包 压缩代码 按需加载
1. 服务端渲染问题:1.单页面应用不利于SEO,因为所有HTML文档都是由js动态生成的。2.首次加载速度过慢。2. 分离css 1. 安装插件 npm install extract-text-webpack-plugin@1.0.1 --save-dev 2. 修改css-loader配置 loader: ExtractTextPlugin....原创 2018-11-14 13:44:28 · 1543 阅读 · 0 评论 -
vue2.0 方法render
new Vue({ el:'#one', //components: { App } vue2.0的写法 render: h => h(App) vue1.0的写法})render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来,表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App...原创 2018-11-16 15:33:02 · 370 阅读 · 0 评论 -
vue最详细笔记
1. vue基础知识1.1. MVVM模式讲解M代表模型,V代表视图,VM代表视图模型在Vue中,M就是Vue实例中data里面定义的数据,V就是Vue实例所托管的区域,VM就是使用Vue实例化出来的对象1.2. MVC和MVVM模式的区别主要区别可以理解两者的通信方式MVC: V中用户交 互后的数据流向C,C经过逻辑处理后再提交到M进行保存;M中的数据如果改变,会直...原创 2018-10-11 13:14:03 · 853 阅读 · 0 评论