美文网首页
vue知识点总结

vue知识点总结

作者: 梦里梦不到的梦_b5c8 | 来源:发表于2019-01-27 19:06 被阅读0次

1.vue中全局注册组件:https://blog.csdn.net/qq_34089503/article/details/81329405

2.vue中全局定义变量:https://blog.csdn.net/qq_30669833/article/details/81706217

3.vue中路由跳转传参的方式:

1.路径:http://localhost:8081/#/test?name=1

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)

使用:this.$route.query.name

2.路径:http://localhost:8081/#/test/1

<router-link :to="'/test/'+id">跳转</router-link>(id是参数)   

路由:

使用:this.$route.params.id(这个id给上图路由的配置有关);

3.在方法中跳转界面并传参,两种方式:params 与 query

this.$router.push({path:'/order',query:{ id:'2'}});  接收参数:this.$route.query.id

this.$router.push({name:'order',params:{ id:'6'}});   接收参数: this.$route.params.id

 1、用法上的

  刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

 2、展示上的

  query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

4.父子组件之间的通讯:

父向子传参:

子组件里面:

      <div>{{msgfromfa}}</div>

       定义一个自定义属性:props:['msgfromfa']

父组件里面:

1. 首先引入 import componentA from '@/components/componentA'

2.注册子组件   components: {  componentA  }

3.引用 <component-a msgfromfa="(Just Say U Love Me)"></component-a>

子组件向父组件传参:

1.在子组件里面  this.$emit('say',this.msg) 第一个参数是自定义的事件,第二个参数是要传递的参数

2.在父组件里面  <component-a @say=“fun”></component-a>

fun(msg){

console.log(msg,"msg就是子组件传递过来的参数")

}

5.vue里面动态的更改title:

index.js里面的meta里面配置每个页面的title:

main.js里面:

router.beforeEach((to, from, next) => {

    if (to.meta.title) {

        document.title = to.meta.title

    }

    next()

})

6.vue里面路由登录拦截:https://www.cnblogs.com/beileixinqing/p/7729780.html

7.vue里面解决跨域问题:https://www.cnblogs.com/wangqiao170/p/9288160.html

8.路由配置:

9.路由激活状态的样式:

10.vue中滑动导航插件:https://www.imooc.com/article/23768?block_id=tuijian_wz

相关文章

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • 无标题文章

    综和复习本月知识点总结: 一:微信小程序 二:vue复习 三:js复习 四:新知识点 一:微信小程序知识点总结 开...

  • 2021前端面试

    174道JavaScript 面试知识点总结(下) [Vue中文社区](javascript:void(0);) ...

  • 个人总结

    六月份月度总结 Vue知识点总结 首先我们本月对Vue进行了一个全面的复习,而且还学习了一些以前没有学习过的知识点...

  • Vue后台管理界面

    Vue后台管理项目 一、自我总结后台管理界面项目里的知识点 项目起始 初学vue使用https://panjiac...

  • 2020-05-24

    日常知识点总结(vue篇): 1、vue的生命周期: Vue实例从开始创建,初始化数据,编译模板,挂载Dom->渲...

  • Vue知识点

    本文主要总结了一些vue的知识点 , 可供面试和平时学习使用。 1. Vue的优点?Vue的缺点? 优点:渐进式,...

  • 03第一个Vue实例 2019-07-28

    一、知识点总结 1、VUE引入的方式 引入本地Vue文件 通过CDN文件的方式 2、将用