随笔分类 - vue
摘要：动态面包屑效果： 1、当路由为/home时，面包屑只展示一级 2、当路由为/home/manage时，面包屑显示一级和二级 3、当路由为/home/manage/list或/home/manage/test时，面包屑显示一级、二级、三级 实现： 1、components/BreadCrumb.vue
阅读全文
摘要：相同点： 1、都是用来放静态资源的 2、如果资源在html中使用，都是可以的 <img src="../../../assets/images/002.jpg"> <img src="../../../../static/images/002.jpg"> 3、资源通过import引入，都可以在htm
阅读全文
摘要：<template> <div class="star"> <span class="star-item on"></span> <span class="star-item off"></span> <span class="star-item half"></span> <hr> <span c
阅读全文
摘要：1、v-html和v-text（简写：{{}}）相比，可以识别字符串中的标签 data() { return { html1: '<p>HTML1</p>' } } <p v-html="html1"></p> <p v-text="html1"></p> <p>{{html1}}</p> 结果：
阅读全文
摘要：动态组件component标签是vue的一个内置组件，通过动态地设置is属性，渲染出对应的组件 使用方法： 1、components/MyText.vue： <template> <div> 文本组件 </div> </template> components/MyImage.vue： <templ
阅读全文
摘要：1、store/index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { buttonPermission: { add: true,
阅读全文
摘要：定义一个Title组件，在使用的时候，通过父组件传值level去定义这个title是h1~h6 1、components/Title.vue： <template> <h1 v-if="level 1"> <a href=""> <slot></slot> </a> </h1> <h2 v-else
阅读全文
摘要：inheritAttrs和$attrs的作用： 当需要将父组件的props传递到子组件中，而子组件的需要接收到props的节点有父级容器，那么就需要用到这两个属性。 将inheritAttrs设置为false，在子组件需要接收props的节点上加上 v-bind='$attrs' 如果父组件中在子组
阅读全文
摘要：1、store/index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin: false }, mutations: {
阅读全文
摘要：作用：将ui组件转为js组件 利用Vue.extend()封装一个toast组件 1、components/MyToast/index.vue <template> <div class="container" v-if="show"> <div>{{ text }}</div> </div> </
阅读全文
摘要：views/cityDetail.vue： <template> <div class="city-detail">{{$route.params.id}}</div> </template> <style> .city-detail{ height: 1500px; line-height: 50
阅读全文
摘要：给当前路由加上active类名高亮显示： <template> <div id="app"> <router-link to='/' active-class="active">首页</router-link> | <router-link :to="{name:'about'}" active-c
阅读全文
摘要：redirect和alias都是可以将一个地址匹配到想要去到的路由 redirect： { path: '/a', redirect: '/about' } 如果访问 /a 会跳转到 /about alias： { path: '/about', name: 'about', component:
阅读全文
摘要：命名路由： { path: '/about', name: 'about', component: About } 作用： 1、路由跳转 this.$router.push({ name: 'about' }) 2、路由重定向 { path: '/a', redirect: { // path: '
阅读全文
摘要：使用动态路由： views/Home.vue： <template> <div>Home</div> </template> views/User.js： <template> <div> 当前用户id：{{id}} </div> </template> <script> export defaul
阅读全文
摘要：Father.vue： <script> import Child from './Child' export default { beforeCreate() { console.log('父组件 beforeCreate') }, created() { console.log('父组件 cre
阅读全文
摘要：<body> <div id="app"> <p>{{message}}</p> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script> new Vue({ el: '#a
阅读全文
摘要：自定义一个TabBar组件： <template> <div class="tab-bar"> <div v-for="(item,index) in tabList" :key="index" :class="['common',{active:currentIndex index}]" @cli
阅读全文
摘要：异步组件和路由懒加载的原理比较像，路由懒加载是将router.js中的路由通过懒加载的方式引入进来从而提升性能，异步组件是那些没有当做路由去使用的组件，如果需要提升这部分组件加载的性能，需要将它的引入方式由同步改为异步。 1、定义一个List.vue： <template> <div>这是一个列表的
阅读全文
摘要：1、安装： npm install vue-awesome-swiper@3 --save-dev 我的版本是： "vue": "^2.6.11" "vue-awesome-swiper": "^3.1.3" 2、使用： <template> <div class="recommendPage">
阅读全文
