vue-（过滤器，钩子函数，路由）
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>
3.声明周期的钩子函数
`从生到死` 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>
4.使用vue-router
<!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>
5.路由命名
<!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>
6.动态路由分配
$route 路由信息对象
$router 路由对象 VueRouter
watch: {
'$route'(to, from) {
// 对路由变化作出响应...
console.log(to); //当前路由信息对象
console.log(from);
}
}
<!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>
7.编程式导航 声明式导航
声明式
<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>
vue-（过滤器，钩子函数，路由）的更多相关文章
- vue - 过滤器-钩子函数路由
一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...
- 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] 297. Serialize and Deserialize Binary Tree 二叉树的序列化和反序列化
Serialization is the process of converting a data structure or object into a sequence of bits so tha ...
- [LeetCode] 544. Output Contest Matches 输出比赛匹配对
During the NBA playoffs, we always arrange the rather strong team to play with the rather weak team, ...
- .net MVC 项目中 上传或者处理进度获取方案
首先讲下思路 就是利用js轮询定时的给后台发送数据 话不多说看代码 --------- 以下是相关方法 var t function timedCount() { $.ajax({ type: 'ge ...
- SQL Server跨服务器操作数据库
今天给大家来分享一下跨服务器操作数据库,还是以SQL Server的管理工具(SSMS)为平台进行操作. 什么是跨服务器操作? 跨服务器操作就是可以在本地连接到远程服务器上的数据库,可以在对方的数据库 ...
- C++ ActiveX开发的问题讨论
最近在一个项目中需要开发一个ocx插件,在开发过程中发现了一些问题,所以在此记录一下. 我想讨论的主要是函数的参数问题,我分别使用c++,JavaScript,C#对ocx插件做了测试,发现不同的参数 ...
- javaScript的高级函数
1.map() map()方法返回一个新数组,新数组是原始数组调用函数之后处理后的值. map()方法按照原始数组元素顺序依次处理元素. map不会对空数组进行检测. map不会改变原始数组 . 参数 ...
- XML解析详解|乐字节
大家好,乐字节的小乐又来了,Java技术分享哪里少的了小乐!上次我们说了可扩展标记语言XML之二:XML语言格式规范.文档组成,本文将介绍重点——XML解析. 基本的解析方式有两种:一种叫 SAX ...
- Python-22-并发编程
一.进程 1. 什么是进程 狭义定义:进程是正在运行的程序的实例(an instance of a computer program that is being executed).广义定义:进程是一 ...
- leetcode两数相加
题目描述:给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- javascript匿名函数自执行 (function(window,document,undefined){})(window,document);
使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...