vue 知识点_vue type:object de-CSDN博客

本文链接：https://blog.csdn.net/yrfjygb/article/details/118081631

1. 导入组件.vue

1.1 导入组件

import TabBer from 'components/common/Tabber/Tabber.vue'

1.2 加载到父组件上

export default {
  name: 'App',
  components: {
    TabBer
  }
}

1.3 使用导入的组件

<template>
  <div id="app">
    <tab-ber></tab-ber>
  </div>
</template>

2.别名操作

2.1 注册别名

在vue.config中进行配置别名

module.exports = {
    configureWebpack:{
        resolve:{
            alias:{
                'assets': '@/assets',
                'common': '@/common',
                'network': '@/network',
                'views': '@/views',
                'components': '@/components'
            }
        }
    }
}

2.2 在dom中使用别名

使用：~别名

<template>
    <div id="tab-bar">
     <div class="tab-bar-item">
        <img src="~assets/img/tabbar/category.svg" alt="">
        首页
    </div>
   </div>
</template>

2.3 在js中使用别名

使用：别名

<script>
import TabBer from 'components/common/Tabber/Tabber.vue'
</script>

3. img图片下方默认有3px，如何去掉

设置样式： img{
 vertical-align: middle;
}

4.router的安装和使用

安装 npm instal vue-router --save
index.js

// 1.导入Vue 和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

// 懒加载加载组件
const Home = ()=> import('views/home/Home')
const Category = ()=> import('views/category/Category')
const Cart = ()=> import('views/cart/Cart')
const Profile = ()=> import('views/profile/Profile')

//2.安装插件
Vue.use(VueRouter)

// 3.创建路由对象
const routes = [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/category',
        component:Category
    },
    {
        path:'/cart',
        component:Cart
    },
    {
        path:'/profile',
        component:Profile
    }
]
const router = new VueRouter({
    routes,
    mode:'history'
})

// 4.导出router
export default router

main.js中导入router

import Vue from 'vue'
import App from './App.vue'
// 导入router
import router from './router'
new Vue({
    el:"#app",
    router,
    render: h=>h(App)
})

路由导航守卫

在这里插入图片描述

5 组件之间的数据传递

父组件向子组件传递

1.父组件使用子组件
- 导入： import HomeSwiper from "./childcomponent/HomeSwiper"
- 注册 export default { name:'home', components:{ navBar, HomeSwiper }, data(){ return { banner:null, dKeyword:null, keywords:null, recommend:null, } }, }
- 使用 <HomeSwiper></HomeSwiper>
2 在使用子组件的时候传入参数
参数是字符串不用v-bind: 绑定
其他参数需要使用v-bind: 绑定
- 数组参数
- <HomeSwiper :banner="[1,2,3]"></HomeSwiper>
  因为[1,2,3]是数组，不是字符串，要绑定 v-bind:
- 对象参数
- <HomeSwiper :banner="{'name':'zs'}"></HomeSwiper>
- 字符串参数
- <HomeSwiper banner="hello"></HomeSwiper>
3 在子组件接收参数
- 参数是数组
- export default { name:'HomeSwiper', props:{ banner:{ type:Array, default(){ return [] } } }, }
- 参数是对象
- export default { name:'HomeSwiper', props:{ banner:{ type:Object, default(){ return {} } } }, }
- 参数是字符串
- export default { name:'HomeSwiper', props:{ banner:{ type:String, default:'' } }, }
父组件向子组件传值
- 1 在子组件中使用 this.$emit(方法名,数据)
  - this.$emit('calrs','hello')
- 2 在父组件中使用子组件中接收参数
  - <LeftPanel @calrs="calrs($event)"/>
  - methods:{ calrs(data){ console.log(data) } }

6 插槽

插槽用来封装一些公用组件

什么时候插槽？

当这个组件中，文字不同，样式不同，布局使用相似的时候

什么时候不使用？

当这个组件中，只有文字不同的，我们可以之间使用组件传值就可以解决

7 created()

该钩子函数一般做初始化数据，但是要注意我们在created()中只放一些主要的代码逻辑，详细代码逻辑放到methods中。

例如：这是整个发送请求的代码,不太合适，看起来乱。

created(){
        getHomeMultidata({
            url:'/home/multidata'
        }).then(rs => {
            if(rs.success){
                this.banner = rs.data.banner.list
                this.dKeyword = rs.data.dKeyword.list
                this.keywords = rs.data.keywords.list
                this.recommend = rs.data.recommend.list
            }
        })
    }

应该变成这样，规范写代码：

created(){ // 主要逻辑代码
       this.getHomeMultidata()
    },methods:{
         getHomeMultidata(){
            getHomeMultidata().then(rs => { 
            // 详细逻辑代码
                if(rs.success){
                    this.banner = rs.data.banner.list
                    this.dKeyword = rs.data.dKeyword.list
                    this.keywords = rs.data.keywords.list
                    this.recommend = rs.data.recommend.list
                }
             })
         }
    }

ref属性

ref如果绑定在组件中的，那么通过this.$refs.refname获取到的是组件对象
ref如果绑定在普通元素的，那么通过this.$refs.refname获取到的是元素对象

v-on修饰符

在这里插入图片描述

对组件使用点击事件的时候要加入.native
- 如：<HomeFeature @click.native="btnClick"></HomeFeature>

keep-alive

如果想要一个界面重新回到一个组件，让这个组件使用keep-alive，
keep-alive:让某个组件不销毁，还存在着，保留着原先的位置，不会重新刷新，不会回到最顶部。
用法: <keep-alive exclude="Detail"> <router-view></router-view> </keep-alive>
exclude: 排除某个组件不使用keep
-alive：排除某个组件，怎么样排除？是这样的
在这里插入图片描述

activated 和 deactivated 前提是该组件在keep-alive中，否则不生效
activated(){ // 进入到该组件触发 this.$refs.scroll.refresh() this.$refs.scroll.scrollTo(0,this.saveY,0) }, deactivated(){ // 离开该组件触发 this.saveY = this.$refs.scroll.getScrollY() }

对于定位，尽量使用相对定位，因为相对定位可以保留原先的位置

后端返回时间戳，如何处理？

把时间戳格式化成时间字符串
格式化代码：放入到util.js中


//时间转换函数
export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}
function padLeftZero(str) {
  return ('00' + str).substr(str.length);  //用0补齐位数 
}

使用：
- 导入
import { formatDate } from "common/utils.js";
- 过滤器
filters: { showDate: function(value) { //服务器返回的时间不会是一个实际的日期，发过来的是一个毫秒数，我们要自己格式化 //是以时间元年为起点，返回对应的时间戳 let date = new Date(value * 1000); //这里的这个formatDate在很多语言中都内置了，但是js没有，这里是我直接网上复制过来的，看他的源码需要一定的正则知识 return formatDate(date, "yyyy/MM/dd"); } }

使用过滤器
<span class="date">{{CommentInfo.created | showDate}}</span>

混入mixin

官网：mixin的用法
用法：src/common/main.js

  import { debounce } from "common/utils.js";
//下面使用了这个函数，记得要同时引入
export const itemListenerMixin = {
  //这里使用了mixin技术，基本上所有的vue内容都可以采用这个技术
  data() {
    return {
      ItemListener: null
    }
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 800);
    this.ItemListener = () => {
      refresh();
    };
    this.$bus.$on("itemImageLoad", this.ItemListener);
  }
}

vue组件中使用mixin

export default {
    name:"Detail",
    //这里我们是引用mixin，通过引用之后我们在mixin里面写的代码就相当于直接复制过来使用了
    mixins: [backTopMixin]
   }

vuex的使用

安装 npm install vuex --save
使用：在store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2.创建store对象
const store = new Vuex.store({
    state:{
        cartList:[]
    },
    mutations:{
        addCart(state,product){
            state.cartList.push(product)
        }
    }
})

在main.js中导入：

import Vue from 'vue'
import App from './App.vue'
// 导入router
import router from './router'
// 导入store
import store from './store'
Vue.prototype.$bus = new Vue()
new Vue({
    el:"#app",
    router,
    store,
    render: h=>h(App)
})

调用mutations中的方法：

this.$store.commit('方法名',参数)

调用actions中的方法：

this.$store.dispatch('方法名',参数)

vuex结合本地存储

vuex，本地存储各优缺点
在这里插入图片描述

相结合：
在这里插入图片描述

路由传参和接收

传参：

query
- {name:‘xxx’,query: {xxx::xxx}}
params
- {name:‘xx’,params: {xxx:xxx}}

接收

query
- this.$route.