vue - 过滤器-钩子函数路由
一.关于路由
1.使用vue router
本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter) const Home = {
data(){
return{}
},
template:`<div>我是首页</div>`
}; const Course = {
data(){
return{}
},
template:`<div>我是免费课程</div>`
}; //路由创建
const router = new VueRouter({
//定义路由规则
mode:"history",
routes:[
{
path:"/",
redirect:"/home"
},
{
path:"/home",
component:Home
},
{
path:"/course",
component:Course
}
]
}); let App = {
data(){
return { }
},
// router-link和router-view是vue-router提供的两个全局组件
//router-view 是路由组件的出口
template:`
<div>
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/course">免费课程</router-link>
</div>
<router-view></router-view>
</div> `
}; new Vue({
el:"#app",
//挂载 路由对象
router,
data(){
return { }
},
template:`<App />`,
components:{
App
}
}) </script>
</body>
</html>
使用vue-router
2.路由命名
由于router-link 相当于a 标签 ,在使用的时候 to="/path" 相当于href 一个路径
路由命名就是提前声明 挂子时候的一个别名 通过别名来找到用子 的 componrnts to="{name:设置的别名字符串}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter) const Home = {
data(){
return{}
},
template:`<div>我是首页</div>`
}; const Course = {
data(){
return{}
},
template:`<div>我是免费课程</div>`
}; //路由创建
const router = new VueRouter({
//定义路由规则
mode:"history",
routes:[
{
path:"/",
redirect:"/home"
},
{
path:"/home",
name:"Home",
component:Home
},
{
path:"/course",
name:"Course",
component:Course
}
]
}); let App = {
data(){
return { }
},
// router-link和router-view是vue-router提供的两个全局组件
//router-view 是路由组件的出口
template:`
<div>
<div class="header">
<router-link :to='{name:"Home"}'>首页</router-link>
<router-link :to='{name:"Course"}'>免费课程</router-link>
</div>
<router-view></router-view>
</div> `
}; new Vue({
el:"#app",
//挂载 路由对象
router,
data(){
return { }
},
template:`<App />`,
components:{
App
}
}) </script>
</body>
</html>
路由别名
3.动态路由分配
$route 路由信息对象
$router 路由对象 VueRouter
本质上通过对定义路由规则的放法来动他匹配 path:'/user/:id'
route-link : to="{name:设置的别名字符,params:{id:1}} "利用params 方法的属性来随意分配
需要watch监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter) const User = {
data(){
return{
user_id:null
}
},
template:`<div>我是用户{{ user_id }}</div>`,
created(){
console.log(this.$route)//路由信息对象
//提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 },
watch:{
"$route"(to,from){
//对路由变化做出响应
console.log(to);
console.log(from);
this.user_id = to.params.id
//发送ajax
}
}
}; //路由创建
const router = new VueRouter({
//定义路由规则
mode:"history",
routes:[ {
path:"/user/:id",
name:"User",
component:User
}, ]
}); let App = {
data(){
return { }
},
// router-link和router-view是vue-router提供的两个全局组件
//router-view 是路由组件的出口
template:`
<div>
<div class="header">
<router-link :to='{name:"User",params:{id:1}}'>用户1</router-link>
<router-link :to='{name:"User",params:{id:2}}'>用户2</router-link>
</div>
<router-view></router-view>
</div> `
}; new Vue({
el:"#app",
//挂载 路由对象
router,
data(){
return { }
},
template:`<App />`,
components:{
App
}
}) </script>
</body>
</html>
动态路由匹配
4.编程式导航 声明式导航
本质上通过 一个点击事件声明一个方法跳转到path路由中
this.$router.push({
name:"home"
})
声明式
<router-link :to = '{name:"Home"}'>首页</router-link>
<router-link :to = '{name:"Course"}'>免费课程</router-link>
编程式
this.$router.push({
name:'Home'
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter) const Home = {
data(){
return {}
},
template:`<div>我是首页</div>`
}; const User = {
data(){
return{
user_id:null
}
},
template:`<div>我是用户{{ user_id }}
<button @click="clickHandler">跳转首页</button>
</div>`,
created(){
console.log(this.$route)//路由信息对象
//提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 },
methods:{
//编程式导航
clickHandler(){
this.$router.push({
name:"Home"
})
}
},
watch:{
"$route"(to,from){
//对路由变化做出响应
console.log(to);
console.log(from);
this.user_id = to.params.id
//发送ajax
}
}
}; //路由创建
const router = new VueRouter({
//定义路由规则
mode:"history",
routes:[ {
path:"/user/:id",
name:"User",
component:User
},
{
path:"/home",
name:"Home",
component:Home
} ]
}); let App = {
data(){
return { }
},
// router-link和router-view是vue-router提供的两个全局组件
//router-view 是路由组件的出口
template:`
<div>
<div class="header">
<router-link :to='{name:"User",params:{id:1}}'>用户1</router-link>
<router-link :to='{name:"User",params:{id:2}}'>用户2</router-link>
</div>
<router-view></router-view>
</div> `
}; new Vue({
el:"#app",
//挂载 路由对象
router,
data(){
return { }
},
template:`<App />`,
components:{
App
}
}) </script>
</body>
</html>
声明式导航
二.过滤器
1.局部过滤器 在当前组件内部使用过滤器，修饰一些数据
//声明
filters:{
'过滤器的名字':function(val,a,b){
//a 就是alax ，val就是当前的数据
}
}
//使用 管道符
数据 | 过滤器的名字('alex'，'wusir')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<App />
</div>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script> let App = {
data(){
return {
msg:"hello world",
time:new Date()
}
},
template:`
<div>我是一个APP{{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div> `,
filters:{
myReverse:function (val) {
return val.split("").reverse().join("")
},
myTime:function (val,formatStr) {
return moment(val).format(formatStr)
}
}
}; new Vue({
el:"#app",
data(){
return { }
},
components:{
App
}
}) </script>
</body>
</html>
局部实例
2.全局过滤器 ： 只要过滤器一创建，在任何组件中都能使用
Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字('alex'，'wusir')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<App />
</div>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script> Vue.filter("myTime",function (val,formatStr) {
return moment(val).format(formatStr)
}); let App = {
data(){
return {
msg:"hello world",
time:new Date()
}
},
template:`
<div>我是一个APP{{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div> `,
filters:{
myReverse:function (val) {
return val.split("").reverse().join("")
},
// myTime:function (val,formatStr) {
// return moment(val).format(formatStr)
// }
}
}; new Vue({
el:"#app",
data(){
return { }
},
components:{
App
}
}) </script>
</body>
</html>
全局实例
三
1.
`从生到死` diff算法 - [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate) - [created](https://cn.vuejs.org/v2/api/#created) 组件创建 *** - 虚拟DOM React
- 发送ajax 获取数据 实现数据驱动视图 - [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount) - [mounted](https://cn.vuejs.org/v2/api/#mounted) *** - 获取真实DOM - [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate) - [updated](https://cn.vuejs.org/v2/api/#updated) - [activated](https://cn.vuejs.org/v2/api/#activated) - 激活当前组件 - [deactivated](https://cn.vuejs.org/v2/api/#deactivated) - keep-alive Vue提供的内置组件，主要作用，让组件产生缓存
- 停用当前组件 - [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy) - destroyed - 如果开了定时器，一定要关闭定时器
生命周期函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="vue.js"></script>
<script> let Test = {
data() {
return {
msg: "alex",
count: 0,
timer: null
}
},
template: `
<div>
<div id="box">{{ msg }}</div>
<p>{{ count }}</p>
<button @click="change">修改</button>
</div> `,
methods:{
change(){
this.msg = "wusir";
document.querySelector("#box").style.color="red"
}
},
beforeCreate() { // 组件创建之前
console.log('组件创建之前', this.msg); },
created() {
// ********最重要
// 组件创建之后
this.timer = setInterval(()=>{
this.count++
},1000); // 使用该组件，就会触发以上的钩子函数，
// created中可以操作数据，发送ajax，并且可以实现数据驱动视图
// 应用：发送ajax请求 console.log('组件创建之后', this.msg); // this.msg = '嘿嘿黑'; },
beforeMount() { // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); },
mounted() {
// *******很重要***** // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM console.log(document.getElementById('app'));
//jsDOM操作 },
// beforeUpdate() {
//
// // 在更新之前，调用此钩子，应用：获取原始的DOM
//
// console.log(document.getElementById('app').innerHTML);
//
// },
// updated() {
//
// // 在更新之后，调用此钩子，应用：获取最新的DOM
//
// console.log(document.getElementById('app').innerHTML);
//
// },
beforeDestroy() { console.log('beforeDestroy'); },
destroyed() {
//注意： 定时器的销毁 要在此方法中处理
console.log('destroyed',this.timer);
clearInterval(this.timer); },
activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); }
}; let App = {
data() {
return {
isShow: true
}
},
template: `
<div>
<keep-alive>
<Test v-if="isShow" />
</keep-alive>
<button @click="clickHandler">改变test组件的生死</button>
</div>
`,
methods: {
clickHandler() {
this.isShow = !this.isShow;
}
},
components:{
Test
}
}; new Vue({
el: '#app',
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
实例
.生命周期的钩子函数
vue - 过滤器-钩子函数路由的更多相关文章
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue中钩子函数的用法
这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初 ...
- vue的钩子函数
1.computed 计算属性 计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 1..aPlus: { get: function ...
- vue生命钩子函数
vue的生命钩子函数在使用Vue开发中是非常重要的一环,可以说,生命钩子函数使开发变得更加便捷. 下图是Vue的生命周期图: 具体钩子如下: beforeCreate created beforeMo ...
- 生命周期（vue的钩子函数）
生命周期图示 创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...
- 【vue】钩子函数生命周期
图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html https://segmentfault.com ...
- 关于vue中钩子函数非常好的博客
http://www.cnblogs.com/caimuqing/p/6728568.html
- 【vue】vue生命周期解读 （流程+钩子函数）
参考详细说明一波简书 (vue中钩子函数解读) 1.实例渲染流程 2.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二
随机推荐
- 【搜索】L国的战斗之伞兵
伞兵?SB?嘿嘿嘿 原题传送门 思路 这道题需要采用倒退的思想. 如果a[x][y]无风或可吹至无风区: 那么它南面如果是北风区,则北风区就也是无风或可吹至无风区(实际上就是可吹至无风区). 那么它北 ...
- 第09组 Beta冲刺（5/5）
队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 无 接下来的计划 无 还剩下哪些任务 s 答辩 遇到 ...
- Kafka为什么速度那么快？
Kafka为什么速度那么快? Kafka的消息是保存或缓存在磁盘上的,一般认为在磁盘上读写数据是会降低性能的,因为寻址会比较消耗时间,但是实际上,Kafka的特性之一就是高吞吐率. 即使是普通的服务器 ...
- ABP vNext中使用开源日志面板 LogDashboard
ABP vNext 使用 logdashboard 本文示例源码:https://github.com/liangshiw/LogDashboard/tree/master/samples/abpvn ...
- GC分析工具使用-gceacy分析堆栈
gceasy是一款在线的gc分析工具.试用一下分析jstack的日志 1.jstack -l 3539 > 3539.stack 2.打包成zip文件 3.上传https://gceasy.io ...
- SpringBoot第十三篇：日志处理
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10973583.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 日志是软件 ...
- R语言学习基础一
笔者使用Rstudio编写R程序,本文主要总结在编写过程中遇到的一些实际 问题 与学习配套的的code上传到我的github,网址: https://github.com/LIU-HONGYANG/S ...
- Oracle性能调优之物化视图用法简介
目录 一.物化视图简介 二.实践:创建物化视图 一.物化视图简介 物化视图分类 物化视图分类,物化视图语法和as后面的sql分为: (1) 基于主键的物化视图(主键物化视图) (2)基于Rowid的物 ...
- 【MySQL】MariaDB10.2新特性--Flashback
MariaDB10.2新特性--Flashback Flashback可以回滚到旧的数据,用于解决用户误删除数据的问题. 实战例子 MariaDB [zsd]> select * from te ...
- HttpRuntime.Cache 与 HttpContext.Current.Cache
1.HttpRuntime.Cache是应用程序级别的, 2.而HttpContext.Current.Cache是针对当前WEB上下文定义的. 3.这二个都是调用的同一个对象,不同的是:HttpRu ...