VUE
yaoxinsong
我正在运用自己的思维,以最简单的代码组装强大的功能。之所以做笔记是因为学的东西太多,不怎么用的东西太长时间不用就忘了。
展开
-
v-for实现递归组件
组件Aside代码<template> <div> <ul class="history-recording"> <li>历史记录</li> </ul> <ul> <li v-for="(item,index) in asideList" v-bind:key = "index" > <p class="main-title" @click.prevent="main原创 2021-01-05 16:44:52 · 1798 阅读 · 0 评论 -
利用component动态遍历不同组件
<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <TraceNav :traceData="traceData" ></TraceNav> <!-- 监听浏览器窗口变化组件 --> <.原创 2020-11-14 22:36:20 · 581 阅读 · 0 评论 -
Vue兄弟组件之间的传值$on和$emit
其实就是由vm.$emit触发$on定义的事件vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')// => "hi"Bus.jsimport Vue from 'vue'export default new Vue组件WindowOnresize<template> <div></div></template>&..原创 2020-10-31 16:35:13 · 718 阅读 · 1 评论 -
v-on和vm.$emit
完整例子:https://www.cnblogs.com/landv/p/11110822.htmlhttps://cn.vuejs.org/v2/api/#vm-emitvm.$emit( eventName, […args] )触发当前实例上的事件。附加参数都会传给监听器回调。v-on(绑定监听事件)app.vue(这里)<template> <div id="app"> <AddTodo v-on:handleAddEm...原创 2020-08-31 21:52:17 · 260 阅读 · 0 评论 -
vue better-scroll的参数和方法
原文链接:https://www.cnblogs.com/cangqinglang/p/8553746.htmlOptions 参数:startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用_constructed,若是bs派发的则为truedirecti.原创 2020-08-11 11:53:04 · 427 阅读 · 0 评论 -
this.$nextTick在下次 DOM 更新循环结束之后执行延迟回调
Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。最近在使用百度编辑器的时候,发现数据渲染失败。原因是因为在使用uParse('#content',{rootPath:'/static/ueditor'})时候,数据并没有全部渲染。<template> <div class="body-bg"> <div class="page-size"> <blog-nav :na原创 2020-08-08 21:19:29 · 485 阅读 · 2 评论 -
vue-axios
1、后端跨域的三种解决方案1、jsonp2、反向代理3、在php框架的入口文件加上header('Access-Control-Allow-Origin: *');2、安装axiosnpm install axios -save3、代码main.jsimport Vue from 'vue'import App from './App.vue'import router from './routers'import store from './store'import原创 2020-08-07 15:11:23 · 78 阅读 · 0 评论 -
vue模块化工程中使用插件
以router为例https://router.vuejs.org/zh/api/#router-replacemain.jsimport Vue from 'vue'import App from './App.vue'import router from './routers'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App),}).$mount('#app')这时..原创 2020-08-04 17:03:56 · 203 阅读 · 0 评论 -
vue-router常用api
api网址https://router.vuejs.org/zh/api/#router-gothis.$router.go(-1);//返回上一层原创 2020-08-04 16:13:02 · 244 阅读 · 0 评论 -
vue 动态添加属性样式(style)和类名(class)
凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff<template> <div :style="{backgroundColor: bgColor}" >ccc</div></template><script>export default{原创 2020-08-02 16:28:36 · 3129 阅读 · 0 评论 -
vue子组件通过$parent操作父组件的参数
父组件<template> <div class="body-bg"> <nav-box-mask :navBoxMaskIsShow="navBoxMaskIsShow" /> </div></template><script>import NavBoxMask from "@/components/NavBoxMask";export default{ data(){ navBoxMaskIsShow.原创 2020-08-01 21:45:04 · 732 阅读 · 0 评论 -
vue 动态跳转路由($router)
<template> <div @click="goToView">点击跳转blog页面</div></template><script>export default{ name: 'index', data(){ return { navList: [ {id: 1,iconfont: '',title: 'Blog'}, {id: 2,iconfont: '.原创 2020-07-31 11:55:36 · 426 阅读 · 0 评论 -
vue-router 路由整理
blog.js文件export default { path : '/blog', component : () => import('@/views/blog') // children : [ // { // path : 'city', // component : () => import('@/components/City') // } // ]}index..原创 2020-07-31 11:38:21 · 75 阅读 · 0 评论 -
vue 子组件调用父组件的方法($emit)
子组件代码<template> <div class="item" @click="gotoView($event)" > <div class="iconfont-box"> <slot></slot> </div> <div class="title">Blog</div> </div></template><script>export原创 2020-07-31 11:26:11 · 819 阅读 · 0 评论 -
vue 封装组件一
1、创建组件my-project\src\components\CubeNavItem.vue<template> <div class="item" > <div class="iconfont-box"> <slot></slot> </div> <div class="title">Blog</div> </div></template><sc原创 2020-07-30 18:20:54 · 104 阅读 · 0 评论 -
使用v-html解决被转义的问题
<template> <div class="window-bg"> <div class="box"> <cube-nav-item v-for="item in navList" :key="item.id" :id="item.id" :title="item.title"> <span class="iconfont item-iconfont" v-html="item.iconfont"></span>.原创 2020-07-30 18:16:01 · 1672 阅读 · 0 评论 -
vue如何让css样式只在当前组件生效(scoped)
<style scoped>.box .item{ width: 100px; height: 100px; margin-left: 5px; border: 1px solid #74B559; color: #93C87B;}.box .item .iconfont-box{ width: 28px; height: 28px; margin: 15px auto;}.box .item .item-iconfont{ font-size: 26px; ma.原创 2020-07-30 17:25:59 · 3031 阅读 · 0 评论 -
vue使用阿里巴巴矢量图
1、购物车添加自己需要的矢量图(https://www.iconfont.cn/)下载需要的包。2、将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2复制到public\static\iconfont文件夹下。3、修改iconfont.css里面的路径@font-face { font-family: 'iconfont'; src: url('./iconfont.eot'原创 2020-07-30 16:48:32 · 1062 阅读 · 0 评论 -
vue 关于引入css文件提示We‘re sorry but my-project doesn‘t work properly without JavaScript enabled. Please e
提示:We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.原因是:不应该把css文件放在了assets文件夹下,而应该把他们放在public/static文件下原创 2020-07-30 16:34:08 · 4708 阅读 · 0 评论 -
vue-router的封装
1、安装vue-routernpm install vue-router2、在src下新建一个src\routers\index.js文件import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);export default new Router({ routes: [ { path : '/ccc', component : () => import('@/views/in...原创 2020-07-29 20:33:55 · 316 阅读 · 0 评论 -
vue keep-alive以及activated,deactivated生命周期的用法和created钩子的区别
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。也就是activated和deactivated必要和<keep-alive>配套使用才会生效。而当组件使用keep-alive的时候created钩子函数只会被执行一次。注意:当在activated钩子里面使用axios调用接...原创 2020-06-19 19:07:14 · 1233 阅读 · 0 评论