组件ref的使用
获取dom节点
- 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
- 加上ref之后，在$refs属性中多了这个元素的引用。
- 通过vue实例的$refs属性拿到这个dom元素。
获取组件
- 给组件记上ref属性，可以理解为给组件起了个名字。
- 加上ref之后，在$refs属性中多了这个组件的引用。
- 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
console.log(this.$refs.boxref); 组件 console.log(this.$refs.sonref.$el);
this.$refs.boxref.style.fontSize="30px" this.$refs.sonref.$el.style.fontSize="30px" } }) </script> </body> 路由的使用 <body> <div id="app"> <!-- 1 --> <!-- 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） 2 创建路由new VueRouter(),接受的参数是一个对象 3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性 4 path属性是url的地址,component属性就是显示的组件（传组件的对象） 5 创建的路由需要和vue实例关联一下 6 路由到的组件显示在哪个位置router-view --> <!-- 5.预留展示区域 --> <router-view></router-view> </div>
<template id="index"> <div>首页</div> </template> <template id="detail"> <div>详情页面</div> </template>
<script> let login = { template:"#index", data(){ return{
} }, methods:{
}, created() { }, }
// 2 创建VueRouter 实例 const router = new VueRouter({ // 3.配置路由映射关系 routes: [ { path: "/", component: login, }, { path: "/detail", component: { template: "#detail", }, }, ], });
// 4 将vuerouter挂载在vue实例上 const vm = new Vue({ el: "#app", data: {}, methods: {}, // router:router router, }); </script> </body> 路由跳转 声明式跳转，和函数式跳转 声明式跳转:<router-link to="path:' 跳转地址' "></router-link> 函数式跳转 ：在函数里用 this.$router.push("跳转地址") 路由高亮：就是给当前跳转的页面一个效果 .router-link-active 写一个样式