vue 2.0

最新推荐文章于 2024-07-20 16:46:53 发布

菜汪在路上

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量255

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qx020814/article/details/135684326

版权

自定义vue标签指令：

<!DOCTYPE html>
<html lang="en">
<script src="vue.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="t1">
    <div><span v-text="n"></span></div>
    <div><span v-big2="n"></span></div>
    <button @click="n++">点击+1</button>
</div>
</body>
<script>
    //利用vue对象创建自定义指令
    Vue.directive('big2', {
        bind(el, dom) {
            console.log("绑定成功")
        },
        inserted(el, dom) {
            console.log("插入到页面后")
        },
        update(el, dom) {
            console.log("发生修改")
        }

    })
    new Vue({
        el: '#t1',
        data: {
            n: 10
        },
        methods: {
            add() {
                this.n = this.n + 10;
            }
        },
        //自定义指令
        directives: {
            big(el, dom) {
                //el是el标签，dom就是被这个指令标记的页面标签。
                console.log(el, dom)
            },
            big3: {
                //绑定成功后调用
                bind(el, dom) {
                    console.log('绑定成功！')
                },
                //插入到页面后调用
                inserted(el, dom) {
                    console.log('插入成功！')
                },
                //被绑定的元素发生修改后调用
                update(el, dom) {
                    console.log('修改成功！')
                }
            }
        }
    })
</script>
</html>

解析完vue后调用方法，回调函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <h1 :style="{opacity: tmd}">哈哈哈哈哈哈哈</h1>
</div>
</body>
<script src="vue.js"></script>
<script>

    new Vue({
        el: '#d1',
        data: {
            tmd: 1
        },
        mounted() {
            setInterval(() => {
                this.tmd -= 0.1;
                if (this.tmd <= 0) {
                    this.tmd = 1;
                }
            },70)
        }
    })
</script>


</html>

使用router进行路由：

导入router工程：

也可以直接在这个项目中通过控制台npm install vue-router 。

1、定义路由页面：

2、定义router配置，将将页面路径配置上：

3、使用router：

加载到主入口js文件中：

使用：

4、路由参数、重定向：

有来两种方法：

1、直接存入：

<router-link :to="{name:'home',params:{id:1}}">首页</router-link>

路由传递的参数：{{$route.params.id}}

2、加上：props: true

取值时，就直接取：
路由传递的参数：{{id}}
3、重定向：

5、路由回调函数:

分别是进入路由前，离开路由时：

<template>
  <div>主页</div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {}
  },
  beforeRouteEnter: (to, from, next) => {
    //进入路由前
    next(vm => {
      vm.getData()
    });
  },
  beforeRouteLeave: (to, from, next) => {
    //离开路由时
    next();
  },
  methods: {
    getData() {
      this.axios({
        method: 'get',
        url: 'http://localhost:8001/getData',
      }).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

菜汪在路上

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue 2.0

router-link :to="{name:'home',params:{id:1}}">首页</router-link>路由传递的参数：{{$route.params.id}}也可以直接在这个项目中通过控制台。2、加上：props: true。路由传递的参数：{{id}}
复制链接

扫一扫

vue 2.0

“相关推荐”对你有帮助么？