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.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二
随机推荐
- Java面试题大汇总（附答案）
下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正,更多精彩内容可以关注我的微信公众号:Java团长 相关概念 面向对象的三个特征 封装,继承,多态.这个应该是人人皆知 ...
- 第07组 Beta冲刺（3/4）
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:学习了很多东西 Github签入记录 接下来的计划:继续学习 还剩下哪些任务:后端部分 燃尽图 遇到的困难:自己太菜了 收获和疑问: ...
- 05 Mybatis的CRUD操作和Mybatis连接池
1.CRUD的含义 CRUD是指在做计算处理时的增加(Create).读取(Retrieve)(重新得到数据).更新(Update)和删除(Delete)几个单词的首字母简写.主要被用在描述软件系统中 ...
- 模块 logging random
模块logging logging模块的主要功能是记录软件调试.操作过程中的各种日志. 默认情况下Python的logging模块将日志打印到了标准输出中,且只显示了大于等于WARNING级别的日志, ...
- Matplotlib：绘图和可视化
Matplotlib:绘图和可视化 简介 简单绘制线形图 plot函数 支持图类型 保存图表 一 .简介 Matplotlib是一个强大的Python绘图和数据可视化的工具包.数据可视化也是我们数据分 ...
- 深度学习--pytorch安装
一.查看cuda及cudnn版本 先确保安装了显卡:nvidia-smi 查看 cat /usr/local/cuda/version.txt cat /usr/local/cuda/include/ ...
- typescript之基础类型
基础类型分为:数字.字符串.数组.元组.枚举.Any.Object.Null.Undefined.Never.Void 各种类型写法如下: 1.数字(number) let num:number = ...
- 全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下
KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 asyn ...
- .Net MVC 输出HTML内容
1.后台代码中的带HTML标记的内容 ViewData["msg"]="<b>Title</b>"; 然则如许打印出来的就是 <b ...
- Process.Start cmd 参数空格问题解决
Process.Start("cmd.exe", "/c start \"title\" \"C:\\Program Files\\a. ...