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.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二
随机推荐
- [LeetCode] 99. Recover Binary Search Tree 复原二叉搜索树
Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...
- 第30课 线程同步(std::condition_variable)
一. 条件变量 (一)条件变量概述 多线程访问一个共享资源(或称临界区),不仅需要用互斥锁实现独享访问避免并发错误,在获得互斥锁进入临界区后,还需检查特定条件是否成立.当某个线程修改测试条件后,将通知 ...
- mybatis + mysql 批量插入、删除、更新
mybatis + mysql 批量插入.删除.更新 Student 表结构 批量插入 public int insertBatchStudent(List<Student> studen ...
- Spring Boot 如何干掉 if else？
需求 这里虚拟一个业务需求,让大家容易理解.假设有一个订单系统,里面的一个功能是根据订单的不同类型作出不同的处理. 订单实体: service接口: 传统实现 根据订单类型写一堆的if else: 策 ...
- 一些个人认为特别的安卓 App 介绍
MoboPlayer (一款息屏也能播放视频的 App) 快图浏览(快速列出手机中的图片和视频,小巧且不会申请安卓各种权限)
- centos7.x下环境搭建(三)—nodejs安装
有3种方式可以安装nodejs yum安装 源码包安装 nvm方式安装 一.方式1:yum安装 这里我们指定安装8.x以上的版本 # curl --silent --location https:// ...
- docker-machine命令安装
$ base=https://github.com/docker/machine/releases/download/v0.16.0 && curl -L $base/docker-m ...
- .Net工具类--表达式目录树解析DataReader和DataTable
一.概述 在项目中经常会使用SQL去操作数据库,在读取数据的时候返回结果一般是DataReader和DataSet,其中DataaSet里面可以包含多个DataTable. 读取到数据之后,一般情况下 ...
- nginx 配置 server
server{ listen 80; server_name test.eoews.cn; #项目文件的路径 root "D:/developer/study/PHPTutorial/WWW ...
- Union-Find 并查集算法
一.动态连通性(Dynamic Connectivity) Union-Find 算法(中文称并查集算法)是解决动态连通性(Dynamic Conectivity)问题的一种算法.动态连通性是计算机图 ...