yyjourney的博客

vue-router就是vue官方提供的一个路由框架。下面是实现功能的demo:index.html新建一个main.js:新建一个router.js：这些js文件的创建都是在src目录下；展示的效果：注意点击三个链接的时候，上面所一一对应的路由、路径。补充一下关于router-link的三个属性配置：to:  相当于a标签的

声明式： 编程式：router.push(…)这两种方式 都可以实现跳转链接。router.push使用 router/index.jsexport default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A

identify这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下： 直接上测试代码： identify.vue组件（主要用于定义参数和方法）template> div class="s-canvas"> canvas id="s-canvas" :width="contentWidth" :height="contentHeight">can

用户在进行流程操作的时候，一般分为进行中，未开始，已完成，前端页面就要进行相应的状态区分展示。这里测试的是背景颜色区分。 demo:span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}span> statusText: { 0:

字段过长，页面显示效果： 一、强制换行 1 word-break: break-all; 只对英文起作用，以字母作为换行依据。 2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3 white-space: pre-wrap; 只对中文起作用，强制换行。word-break:break-all 和 word-wrap:break-word

公司项目也快接近尾声，在做项目的过程中，自己也遇到好多坑，个人觉得语法结构规范严谨对页面呈现的效果尤为重要。确认项目框架 一般页面都分为公共的头部和底部，还有中间渲染的内容。 主要开始工作：封装公共部分的组件，确定页面模块的搭建。头部导航不建议使用iview框架进行路由的跳转。 主要工作：通过导航子集的id进行路由的切换，以及点击当前导航显示的样式，采用循环的语法。 若是固定导航，

直接上测试代码：<template> <div class="login-box"> <div class="login"> <div class="login-title"> <h2>登录</h2> &

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。常用的请求方法别名一般有: Get/post/http协议请求执行Get请求function get(){ return axios.get('/data.json', { params:{ id:1234 }

在做项目的时候，使用的是iview组件框架，但是在ie测试的时候，发现有的竟然不兼容Grid 栅格布局。解决方法： Grid 栅格布局的每一行，都是通过浮动和固定的宽度进行实现的， 所以要给父级进行清除浮动，这样才能实现Grid 栅格布局。...

路由的使用——路由懒加载：import home from '@/components/home'（一般的引入组件方式）const login = resolve => require(['@/components/login'], resolve)const routes = [ { path: '/', name: 'home', component:...

封装placeholder.js,在需要的页面进行引入。import $ from 'jquery'function placeholder() { // 不支持placeholder if(!isSupportPlaceholder()) { // 遍历所有input对象, 除了密码框 $('input').not("input[type='password']")...

在使用iview框架的时候，直接使用框架自带的提示错误信息弹窗，但是在测试环节，点击登录按钮时候，多次点击按钮，认为这种弹出提示的次数过多，只出现一次就好。展示效果：在网上怎么搜索资料，都没有找到，太让人苦恼，后来认真看了看官网，使用destroy()方法；在方法里面谁使用了提示错误信息，就在当前的函数，使用ths.$Message.destroy(); 这样就只会出

在测试环节发现有图片找不到，发现是图片路径没有写对。 报错如下： 原代码： "/src/assets/img/arrow.png" alt="" class="col-step">这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。正确的引入格式：第一种： img src="../../assets/i

在之前项目目录点击鼠标右键： 选择 svn chechout改一下svn地址就可以重新拉取项目。

一、在vue中使用scss首先进行安装如下依赖： cnpm i sass-loader node-sass -D 二、vue中引入样式文件1）在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这种方式： "utf-8"> 2imis

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的，如何模拟本地数据操作？ 解决方法： dev-server.js 改用webpack-dev-conf.js代替。 所以在模拟后台数据的时候直接在webpack-dev-server.js文件中修改：const axios = require('axios')const expre

在观看vue实战视频的时候，发现用的插件比较复杂，于是采用Iview组件中的轮播组件。1 进行iView 依赖的下载npm install iview --save2 在main.js进行依赖的引入import iView from 'iview'import 'iview/dist/styles/iview.css'Vue.use(iView)3 在需要的页面进行轮播组件的引入

在vue的实战项目学习中遇到一些难点，以下是自己的学习笔记记录。 引入styl文件的时候，要先下载styl依赖环境：cnpm install stylus --save-devcnpm install stylus-loader --save-dev 在引入styl文件的时候，默认情况下，node_modules目录下找不到依赖？解决方法： 在build目录下的webpack.

在进行手动访问页面的时候，出现这种报错，于是进行路径的检查。app.vue结构： <div id="app"> <m-header></m-header> <router-view></router-view> </div>m-header.vue文件：<button @click="surf">漫游</button> methods: { // 这是是封装的手动

该示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts Hello.vuediv id="myChart" :style="{w

在项目中总会遇到一个按钮进行页面切换的操作，这时候 使用v-if和v-else就比较方便。demo: <template v-if="loginType"> <div>这里是模块一内容</div> </template> <template v-else> <div>这里是模块二内容</div>

用户在进行一些新的操作流程时，提供一些导航流程也是必要的。项目中采用的是iview 的对话框进行实现的。 demo: <Modal v-if="modalOFF === 1"> <p>这里是对话框一</p> <button @click="modalOFF = 2"></button> </Modal> <Modal v-if="modalOFF === 2

vue-area-linkage省市区联动选择，基于 Element UI. 组合数据来源：area-data下载组件：npm i --save vue-area-linkage引入组件在 main.js：import Vue from 'vue';import VueAreaLinkage from 'vue-area-linkage';Vue.use(VueArea

demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div>引入图片，注意路径：import con1 from "@/assets/

进行sass的安装：npm install sass-loader --save-dev进行配置文件的修改，找到webpack.base.conf.js然后重启一下服务： npm run dev在用vue 框架的时候，安装sass时出现这样的报错： Error: Cannot find module ‘node-sass’；在网上查询解决方法：使用：n...