• vue 2.0

    自定义vue标签指令：

    1. html>
    2. <html lang="en">
    3. <script src="vue.js">script>
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9. <div id="t1">
    10.     <div><span v-text="n">span>div>
    11.     <div><span v-big2="n">span>div>
    12.     <button @click="n++">点击+1button>
    13. div>
    14. body>
    15. <script>
    16.     //利用vue对象创建自定义指令
    17.     Vue.directive('big2', {
    18.         bind(el, dom) {
    19.             console.log("绑定成功")
    20.         },
    21.         inserted(el, dom) {
    22.             console.log("插入到页面后")
    23.         },
    24.         update(el, dom) {
    25.             console.log("发生修改")
    26.         }
    27.  
    28.     })
    29.     new Vue({
    30.         el: '#t1',
    31.         data: {
    32.             n: 10
    33.         },
    34.         methods: {
    35.             add() {
    36.                 this.n = this.n + 10;
    37.             }
    38.         },
    39.         //自定义指令
    40.         directives: {
    41.             big(el, dom) {
    42.                 //el是el标签，dom就是被这个指令标记的页面标签。
    43.                 console.log(el, dom)
    44.             },
    45.             big3: {
    46.                 //绑定成功后调用
    47.                 bind(el, dom) {
    48.                     console.log('绑定成功！')
    49.                 },
    50.                 //插入到页面后调用
    51.                 inserted(el, dom) {
    52.                     console.log('插入成功！')
    53.                 },
    54.                 //被绑定的元素发生修改后调用
    55.                 update(el, dom) {
    56.                     console.log('修改成功！')
    57.                 }
    58.             }
    59.         }
    60.     })
    61. script>
    62. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="d1">
    9.     <h1 :style="{opacity: tmd}">哈哈哈哈哈哈哈h1>
    10. div>
    11. body>
    12. <script src="vue.js">script>
    13. <script>
    14.  
    15.     new Vue({
    16.         el: '#d1',
    17.         data: {
    18.             tmd: 1
    19.         },
    20.         mounted() {
    21.             setInterval(() => {
    22.                 this.tmd -= 0.1;
    23.                 if (this.tmd <= 0) {
    24.                     this.tmd = 1;
    25.                 }
    26.             },70)
    27.         }
    28.     })
    29. script>
    30.  
    31.  
    32. html>

    使用router进行路由：

    导入router工程：

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

    1、定义路由页面：

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

     

    3、使用router：

     加载到主入口js文件中：

    使用：

    4、路由参数、重定向：

    有来两种方法：

    1、直接存入：

    首页

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

    2、加上：props: true

    取值时，就直接取：

    路由传递的参数：{{id}}

    3、重定向：

    5、路由回调函数:

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

    1. <template>
    2.   <div>主页div>
    3. template>
    4. <script>
    5. export default {
    6.   name: "Home",
    7.   data() {
    8.     return {}
    9.   },
    10.   beforeRouteEnter: (to, from, next) => {
    11.     //进入路由前
    12.     next(vm => {
    13.       vm.getData()
    14.     });
    15.   },
    16.   beforeRouteLeave: (to, from, next) => {
    17.     //离开路由时
    18.     next();
    19.   },
    20.   methods: {
    21.     getData() {
    22.       this.axios({
    23.         method: 'get',
    24.         url: 'http://localhost:8001/getData',
    25.       }).then(res => {
    26.         console.log(res.data)
    27.       })
    28.     }
    29.   }
    30. }
    31. script>

  • 相关阅读:
    前端开发学习 (一) 搭建Vue基础环境
    企业工程项目管理系统源码（三控：进度组织、质量安全、预算资金成本、二平台：招采、设计管理）
    leetcode：66. 加一
    目标检测学习--yolov3
    ROS2自学笔记：参数
    主动调度是如何发生的
    c语言常用语法，长时间不用容易忘。
    Git操作指南：子模块、用户名修改和Subtree
    【2024秋招】2023-9-16 贝壳后端开发一面
    selenium.chrome怎么写扩展拦截或转发请求？
  • 原文地址：https://blog.csdn.net/qx020814/article/details/135684326