Vue
&XYZ&
越努力,越幸运!
展开
-
animate.css在vue项目中的使用
<template> <div class="content"> 1.你要先下载:animate.css npm方式:npm install animate.css --save 2.下载成功后来到main.js中 import animated from 'animate.css' Vue.use(animated) ...原创 2019-11-12 10:10:59 · 288 阅读 · 0 评论 -
vue开发,用npm引入jquery及导入样式
1安装jquerynpm install jquery --save-dev2.在webpack.config.js 添加内容 (2.x后是:webpack.base.conf.js)+ const webpack = require("webpack");module.exports = { entry: './index.js', output: {...原创 2019-03-04 11:36:31 · 2816 阅读 · 0 评论 -
computed、methods、watch
computed是在HTML DOM加载后马上执行的 methods则必须要有一定的触发条件才能执行,如点击事件 watch用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。使用方面:如果...转载 2019-02-28 09:54:18 · 146 阅读 · 0 评论 -
Vue表单修饰符(lazy)
在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步 ;其实官方文档里面的这句话结合下面这个链接里面的案例,说的简单点就是当你在输入框里面删除数据的时候,你看到的是数据没有实时更新,而是等到你确定删除完成后,离开输入框(进入下一步操作)才可以看到效果。链接:https://www.cnblogs.com/mmzuo-798/p/9301121.html...转载 2019-03-01 14:26:02 · 1217 阅读 · 0 评论 -
单选按钮radio
效果:点Man按钮:sex后面显示Man,点Woman按钮:sex后面显示Woman代码截图:vue中单选按钮的id和label标签的for上联用的,如果想要获取label标签里面的内容,就要通过input标签里面的value来获取...原创 2019-03-01 15:08:33 · 717 阅读 · 0 评论 -
vue2.9.6默认路由指定跳转
源码:router/index.js里面输入import Vue from 'vue'import Router from 'vue-router'import index from '../pages/index.vue'import My from '../pages/my.vue'import rankingList from '../pages/rankingList ....原创 2019-03-19 15:47:43 · 467 阅读 · 0 评论 -
vue-cli移动端底部路由跳转图片切换
效果图:说详细点就是:点击“我的”,“我的”图片切换,“首页”图片也切换,反之效果互换。核心源码:<template> <div> <router-view></router-view> <div class="fixation"> <footer> <...原创 2019-03-19 19:43:02 · 773 阅读 · 0 评论 -
vue-cli图片绑定显示,v-bind:src=''
源码:<template> <div id="app"> <router-view/> <img :src="s" alt=""> </div></template><script>export default { name: 'App', data(){ ...原创 2019-03-16 11:14:59 · 1096 阅读 · 0 评论 -
vue 常用UI库
vue 常用UI库:https://blog.csdn.net/yelin042/article/details/79965600Mint UI基于 Vue.js 的移动端组件库:https://mint-ui.github.io/#!/zh-cn基于 Vue 2.0 优雅的 Material Design UI 组件库:https://muse-ui.org/#/zh-CN...原创 2019-03-20 13:56:11 · 123 阅读 · 0 评论 -
vue中返回效果
使用情景:现在想在这个图片上实现返回的效果(后退到上一个页面)部分源码:html部分:<template> <div class="credit-hour"> <header> <img src="../assets/images/header/left.png" alt="左" class="left-direc...原创 2019-03-20 14:42:01 · 318 阅读 · 0 评论 -
子组件在父组件里面使用
想在父组件里面写子组件,其实只需要把父组件在“router/index.js”里面把父组件引入,然后注册,接着在父组件中“index.vue”中引入想用的子组件,然后注册,接着注册的名字就是显示的标签名字。...原创 2019-03-12 21:50:30 · 404 阅读 · 0 评论 -
头部搜索栏
效果:源码:<template> <div> <headers title="学生管理"></headers> <div class="search-box"> <div> <img src="../assets/images/magnifyingGlass....原创 2019-03-21 16:08:37 · 452 阅读 · 0 评论 -
webpack+vue-cil 中config/index.js/proxyTable配置接口地址代理
https://www.cnblogs.com/tugenhua0707/p/8052051.html转载 2019-03-18 19:23:26 · 841 阅读 · 0 评论 -
Axios(自定义配置新建一个 axios 实例并且封装起来)
自定义配置新建一个 axios 实例先在src里面的某个文件夹里面创建一个.js文件(我的放在了http.js里面) http.js里面的核心源码: import axios from 'axios';import Qs from 'qs'import router from '../router/index'const service = axios.create({//这个s...原创 2019-03-29 14:04:34 · 6867 阅读 · 0 评论 -
创建vue模板
模板:<template> <div> </div></template><script> export default{ name:"${COMPONENT_NAME}",//获取文件名字 components: { } data(){ retur...原创 2019-03-26 11:19:04 · 141 阅读 · 0 评论 -
解决axios跨域时,发送post请求变options的问题
mounted() { let config = { headers : { 'Content-Type':'application/json;charset=UTF-8' }, }; axios.post('http://scms.qccat.com/v1/statistic/info-stu.json',{ token:"da48d456d...原创 2019-03-27 10:52:36 · 5432 阅读 · 0 评论 -
vue文本输入框(textarea)
源码:<template> <div> <headers title="新建记录"></headers> <div class="text-area"> <textarea placeholder="请输入记录评语..."> </textarea> <...原创 2019-03-24 16:10:14 · 22336 阅读 · 0 评论 -
Vue Router升级版写法
router/index.jsimport Index from '../pages/Index'import Mine from '../pages/Mine'import More from '../pages/More'import TrendMap from '../pages/TrendMap'import Rank from '../pages/Rank'import ...原创 2019-03-29 11:17:36 · 1535 阅读 · 0 评论 -
vue-cli中在js中跳转
this.$router.push({path:'/index'});//js中设置跳转原创 2019-04-03 09:13:48 · 517 阅读 · 0 评论 -
vue v-for出来的列表,点击当前,当前被点击的字体变颜色(:class)
源码:<template> <div> <div v-for="(item , index) in semesterSelection" @click="changSemester(index)" :key="index" :class="{blue:i===index}"> <p>{{ item.na...原创 2019-04-23 11:03:36 · 11790 阅读 · 3 评论 -
Vue实现动态显示textarea文字数量、剩余字数
<template> <div class="text-area"> <textarea maxlength="40" @input="riseInput" v-model="rise" placeholder="请输入记录评语..."></textarea> <span>...原创 2019-04-27 19:04:10 · 1684 阅读 · 0 评论 -
路由省略版写法
文件位置:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router);export default new Router({ routes: [ {path: '/', name: 'login', component: () => import('@/views/lo...原创 2019-05-07 15:08:48 · 293 阅读 · 0 评论 -
字符串的新增方法→startsWith() endsWith() Includes() repeat()
<!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...原创 2019-06-13 21:14:53 · 175 阅读 · 0 评论 -
vue 实现二维码
npm install qrcodejs2<!--二维码名片--><template> <div> <div id="qrcode" class="two-code" ref="qrcode"></div> </div></template><script> impo...原创 2019-06-16 18:23:16 · 713 阅读 · 0 评论 -
vue(HTML5本地存储:localStorage)
localStorage.setItem('studentName',res.data.name);//写入localStorage数据this.studentName=localStorage.getItem("studentName");//读取localStorage数据推荐大家可以去看一下这个博客里面比较详细:https://www.cnblogs.com/st-leslie/p/...原创 2019-06-17 10:18:36 · 2011 阅读 · 0 评论 -
vue→backgroundImage路径问题(vue里面放背景图片)
<template> <div class="role" :style="backgroundImg"> </div></template><script> export default{ data(){ return { backgroundImg:{...原创 2019-07-04 10:55:21 · 7824 阅读 · 0 评论 -
vue中根据生日(出生年月日)计算年龄
<template> <div class="role" :style="backgroundImg"> </div></template><script> export default{ data(){ return { teacherBirthday:'',...原创 2019-07-04 11:51:47 · 9196 阅读 · 0 评论 -
处理多个Promise: .all() .race()
<!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-...原创 2019-07-20 11:49:47 · 1423 阅读 · 0 评论