Vue学习记录 (ref,生命周期,组件,router)

ref=“名称”:注册引用信息
- this.$ref.名称:获取对象(此为操作dom节点)
计算属性:computed
- 在差值表达式中调用此函数会直接返回计算结果,而不是函数本身
- 当data中的数据出现变更时,将进行自动计算
```
new Vue({el:"#d1",  //    作用的区域data:{     //  参数},methods:{   //  函数},computed:{  //  计算数据函数}})
```

vue的生命周期函数

<script>
export default {beforeCreate() {//  创建前},created() {//  创建后//   挂载数据,一般可以获取初始数据(页面加载完成时)},beforeMount() {// 挂载到页面前},mounted() {//   挂载到页面后},beforeUpdate() {//  更新页面前// 已经创建dom,准备渲染},updated() {// 更新页面后// 以渲染真是的dom},beforeDestroy() {//  销毁vue之前},destroyed() {//    销毁vue之后},
}
</script>

组件:组件是vue最强大的功能之一,一个vue文件就是一个组件

基础案例

以下所有案例均由vue cli构建

<template><div><!-- 使用组件 --><myComp /></div>
</template><script>//1.导入组件
import mycom from '路径'0export default {//2.声明组件components : {myComp}
}
</script>

自定义属性

//  导出
<template><div><!-- 2.绑定属性 --><input type="button" :value="属性名"></div>
</template><script>
export default {data() {return {}},// 1.声明属性props : ['属性名']
}
</script>//  导入
<template><div><!--3.给自定义属性赋值--><mycom 属性名="属性值"></mycom></div>
</template><script>
import mycom from '路径'
export default {component : {mycom : mycom}
}
</script>

自定义事件

//  导出
<template><div><!--1.自定义事件--><mycom @myClick="show2"></mycom></div>
</template><script>
import mycom from '路径'
export default {methods: {show2(){alert('show2')}},component : {mycom : mycom},
}
</script>//   导入
<template><div><input type="button"  @click="show1"></div>
</template><script>
export default {methods: {show1(){//  2.调用自定义事件this.$emit('myClick')}},
}
</script>

router:路由管理器

给每一个组件绑定一个访问路径,可以更加轻松地构建组件单页面

路由入门

1.创建 src/views/Home.vue 页面，用于编写测试页面
2.创建src/router.js 用于配置路由（路径–>组件）

 routes: [{path: '/home',component: () => import('./views/Home.vue')}]

3.修改 src/main.js页面，添加router支持

import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({router,render: h => h(App)
}).$mount('#app')

4.修改App.vue页面，添加标签，用于存放路径匹配到的组件

<template><div><!--跳转到其他页面--><router-link to="组件访问路径"></router-view><!--组件显示位置--><router-view></router-view></div>
</template>

自定义标题

//  router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/add',name: 'add',component: () => import('../views/Add.vue'),meta : {//   自定义数据区域title : '自定义标题名'}}]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})//  路由拦截切换
//  to : 表示即将进入的组件
//  from : 表示即将离开的组件
//  next : 放行函数,也可用于重定向到指定组件
router.beforeEach((to,from,next) => {if(to.meta.title!=null){document.title = to.meta.title;}else{document.title = '默认标题';}next();
})export default router

组件中路由操作

this.$router.push
- 跳转到指定路由
this.$router.go(-1)
- 回退到上一个路由

this.$route.params

获取路径上的参数

//  App.vue
<router-link to="/home/1"></router-link>//  router/index.js
{//  声明参数path: '/home/:id',component: () => import('../views/Home.vue')
}// views/Home.vue
<script>
export default {created() {//  调用方法获取声明参数this.$route.params.id},
}
</script>

this.$route.query

获取路径上的参数

//  App.vue
<router-link to="/home?id:1"></router-link>//  router/index.js
{//  声明参数path: '/home',component: () => import('../views/Home.vue')
}// views/Home.vue
<script>
export default {created() {//  调用方法获取声明参数this.$route.query.id},
}
</script>

this.$route.path
- 获取路由路径

Vue学习记录 (ref,生命周期,组件,router)相关推荐

Gavin小黑屋——Vue 学习笔记：生命周期特点（先渲染HTML标签再渲染数据）
Vue基础生命周期特点(先渲染HTML标签再渲染数据) 目录 Vue基础生命周期特点(先渲染HTML标签再渲染数据) 一.Vue生命周期 Vue 的生命周期总共分为8个阶段:创建前/后,载 ...
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
【Vue 学习】- VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
Vue 进阶语法和生命周期
文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...
vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...

Vue学习记录 (ref,生命周期,组件,router)

Vue学习记录 (ref,生命周期,组件,router)相关推荐

最新文章

热门文章