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 '路径'0

export 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
- 获取路由路径

Pole丶逐

发布了31 篇原创文章 · 获赞 0 · 访问量 191

私信关注

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

猜你喜欢