![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Ezerbel
这个作者很懒,什么都没留下…
展开
-
vue的路由传参
传入 读取 created() { let id = this.$route.params.id console.log('created id =============> ', id) }原创 2021-01-05 11:43:43 · 78 阅读 · 0 评论 -
vue 消息总线
为啥使用消息总线 本以为有了vuex,组件之间的通信便再也没有隔阂。 然而,两个相对独立的组件(无法直接拿到对方的引用),相互调用彼此间的函数时,却没有太好的办法。 需求场景 点击获取动态码后,将已经验证通过的滑动条重置到初始状态。 这是两个相对独立的组件,无法直接拿到对方的引用。 定义全局消息总线 Vue.prototype.$baseEventBus = new Vue() 监听 mounted() { this.$baseEventBus.$on('reset-verify原创 2020-12-08 18:26:05 · 904 阅读 · 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 · 559 阅读 · 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 · 183 阅读 · 0 评论 -
vue element-ui使用第三方图标库
参考链接: https://www.cnblogs.com/zhengao/p/8480192.html原创 2020-11-27 22:03:21 · 226 阅读 · 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 · 814 阅读 · 0 评论 -
vue使用cookie的基本方法
安装cookie npm install vue-cookies --save main.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 · 904 阅读 · 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 · 456 阅读 · 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 · 126 阅读 · 0 评论 -
vue学习-part4结合使用axios
axios基本用法 Get axios.get(地址?key1=val1&key2=val2).then(function(response){},function(err){}) Post axios.post(地址,{key1:val1,key2:val2}).then(function(response),function(err){}) axios基本使用 在axios中this会发生变化,所以不能直接在axios内部:使用this获取vue实例 <!DOCTYPE html>原创 2020-09-13 08:43:33 · 92 阅读 · 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 · 112 阅读 · 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 · 72 阅读 · 0 评论 -
vue学习-part1组件化与值传递
工程结构 组件化 创建了两个vue组件chatcom、userlistcom 在App.vue中将这两个组件导入 值传递 点击右侧用户列表,点击事件会触发父组件App中的方法,并传递索引值。 父组件中的对应方法,会从用户列表中查询相关信息,并更改当前聊天对象chatTargetInfo。 子组件chatcom由于绑定了父组件的chatTargetInfo,所以会同步改变聊天对象姓名。 chatcom.vue <template> <div class="chat">原创 2020-09-10 10:43:53 · 131 阅读 · 0 评论