Vue
关注
分享
扫一扫
Ezerbel
这个作者很懒，什么都没留下…
展开
-
vue的路由传参
传入读取 created() { let id = this.$route.params.id console.log('created id =============> ', id) }原创 2021-01-05 11:43:43 · 101 阅读 · 0 评论 -
vue 消息总线
为啥使用消息总线本以为有了vuex，组件之间的通信便再也没有隔阂。然而，两个相对独立的组件（无法直接拿到对方的引用），相互调用彼此间的函数时，却没有太好的办法。需求场景点击获取动态码后，将已经验证通过的滑动条重置到初始状态。这是两个相对独立的组件，无法直接拿到对方的引用。定义全局消息总线Vue.prototype.$baseEventBus = new Vue()监听 mounted() { this.$baseEventBus.$on('reset-verify原创 2020-12-08 18:26:05 · 925 阅读 · 0 评论 -
Vue 全局变量
使用Prototype可以使用Vue.prototype定义全局变量（也可以定义函数）Vue.prototype.appName = 'old name'结合$$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。上面的appName很容易被实例覆盖掉例如当你在Vue的实例中修改创建前输出 old name , 创建后输出 new name 。new Vue({ data: { appName: 'new name'原创 2020-12-08 18:13:54 · 590 阅读 · 0 评论 -
Vuex 基础
安装npm install vuex导入创建vuex实例import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, // 全局共享数据 mutations: {}, actions: {}, modules: {}})export default store挂载到vue实例import Vue fro原创 2020-12-05 17:54:59 · 201 阅读 · 0 评论 -
vue element-ui使用第三方图标库
参考链接：https://www.cnblogs.com/zhengao/p/8480192.html原创 2020-11-27 22:03:21 · 241 阅读 · 0 评论 -
vue 滑动验证条
效果代码VerifySlider.vue<template> <div ref="dragDiv" class="drag" > <div ref="drag_bg" class="drag_bg" /> <div ref="drag_text" class="drag_text">{{ confirmWords }}</div> <div class="slide-check-tip原创 2020-11-26 16:36:10 · 875 阅读 · 0 评论 -
vue使用cookie的基本方法
安装cookienpm install vue-cookies --savemain.js 全局引入import Vue from 'vue'import VueCookies from 'vue-cookies'Vue.use(VueCookies)用到的vue文件中导入import cookie from 'js-cookie';存储var token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';cookie.set('keyName', token,原创 2020-11-26 13:51:39 · 922 阅读 · 0 评论 -
vue 获取外网ip
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> let Ip=returnCitySN['cip'] localStorage.setItem('Ip', Ip)</script>原创 2020-11-22 13:25:57 · 470 阅读 · 0 评论 -
vue学习-part5 axios天气查询案例
CityHistoryCom.vue<template> <div> <a class="cityLink" @click="chooseCity($event)" >{{city}}</a> </div></template><script>export default { props:["city"], methods: { // 子组件调用父组原创 2020-09-13 21:47:36 · 144 阅读 · 0 评论 -
vue学习-part4结合使用axios
axios基本用法Getaxios.get(地址?key1=val1&key2=val2).then(function(response){},function(err){})Postaxios.post(地址,{key1:val1,key2:val2}).then(function(response),function(err){})axios基本使用在axios中this会发生变化，所以不能直接在axios内部：使用this获取vue实例<!DOCTYPE html>原创 2020-09-13 08:43:33 · 106 阅读 · 0 评论 -
vue学习-part3动态路由与嵌套路由
动态路由基本使用使用 :参数名 { path:"/weather/:city", name:"Weather", component: Weather }组件实现<template> <div> <h1>天气预报</h1> <h2>城市：{{city}}</h2> <h3>天气：{{cond_txt}}</h3>原创 2020-09-11 13:00:44 · 133 阅读 · 0 评论 -
vue学习-part2使用less
导入引用方式导入stylesheet/less格式的less资源后，需要导入相应的解析文件less.min.js。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>原创 2020-09-10 15:36:28 · 82 阅读 · 0 评论 -
vue学习-part1组件化与值传递
工程结构组件化创建了两个vue组件chatcom、userlistcom在App.vue中将这两个组件导入值传递点击右侧用户列表，点击事件会触发父组件App中的方法，并传递索引值。父组件中的对应方法，会从用户列表中查询相关信息，并更改当前聊天对象chatTargetInfo。子组件chatcom由于绑定了父组件的chatTargetInfo，所以会同步改变聊天对象姓名。chatcom.vue<template> <div class="chat">原创 2020-09-10 10:43:53 · 156 阅读 · 0 评论