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.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二
随机推荐
- CSS3中的px,em,rem,vh,vw
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...
- [LeetCode] 230. Kth Smallest Element in a BST 二叉搜索树中的第K小的元素
Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...
- Spring Boot 知识笔记（定时任务与异步）
一.定时任务 1.启动类里面增加注入 @SpringBootApplication //@SpringBootApplication = @Configuration+@EnableAutoConfi ...
- 认识beanstalkd
认识beanstalkd 背景 公司业务做某个需求是将数据写入到消息队列中,然后另外一个服务来消费数据,这里的消息队列使用的是beastalkd,之前接触到的消息队列为kafka,因此简单学习记录一 ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Permissions使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- ES6模版字符串
传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b>' + basket ...
- 移动端布局方案—vw+rem
前言 首先你要知道 vw 和 rem 是什么?怎么使用? ①:简单来说 vw 是视口单位,相当于把视口等分成了100,1vw = 1; ②:rem是相对单位,设置根元素 html 的 font-siz ...
- Turbo码基本框架
1. 基本原理 1.1 定义 1.2 分量码设计 2. 编码方法 2.1 交织器的设计 2.2 分量编码器 2.3 删余矩阵及复用 3. 译码方法和算法 3.1 迭代译码 3.2 MAP类算法 3.3 ...
- VS2019无法安装Android SDK 28的问题
在一台新电脑上安装VS2019,新建Xamarin.Android项目,反复提示要安装Android SDK Build Tools 28.0.3,在弹出的窗口里点击接受协议,却无法安装SDK. 直接 ...
- IC卡、ID卡、M1卡、射频卡的区别是什么（射频卡是种通信技术）
IC卡.ID卡.M1卡.射频卡都是我们常见的一种智能卡,但是很多的顾客还是不清楚IC卡.ID卡.M1卡.射频卡的区别是什么,下面我们一起来看看吧. 所谓的IC卡就是集成电路卡,是继磁卡之后出现的又一种 ...