• vue组件基本结构


    vue组件基本结构

    一、总结

    一句话总结:

    一个vue组件主要包括3个部分:界面展示代码template、业务实现代码script、界面布局代码style
    <template>
        <div class="class_1">
          <h2>{{msg}}</h2>
          这是一个fry VueComponentTest
        </div>
    </template>
    
    <script>
      export default {
        name: 'FryTest',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        }
      }
    </script>
    
    <style scoped>
      .class_1{
        color: red;
      }
    </style>

    1、组件中的script标签中如何写vue中的methods、watch、各种生命周期函数等等?

    直接写在export default 出去的对象里面即可
    <script>
     
    export default {
     
      name: "App",
     
      data() {//数据定义 函数方法,返回数据的方式
     
        return {};
     
      },
     
      methods: {
     
        // 组件的方法
     
      },
     
      watch: {
     
        // watch监听方法,擅长处理的场景:一个数据影响多个数据 
    watch是去监听一个值的变化,然后执行相对应的函数。
     
      },
     
      computed: {
     
        // computed擅长处理的场景:一个数据受多个数据影响 
    computed是计算属性,也就是依赖其它的属性计算所得出最后的值
     
      },
     
      beforeCreate () {
     
        // 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
     
      },
     
      created () {
     
        // (在实例创建完成后被立即调用。实例已经创建完成之后被调用。
    在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,
     watch/event 事件回调。然而,挂载阶段还没开始,
    $el 属性目前不可见。初始化数据请求写这里
     
      },
     
      beforeMount () {
     
        // 在挂载开始之前被调用:相关的 render 函数首次被调用。
     
      },
     
      mounted () {//页面初始化方法
     
        // 编译好的HTML挂载到页面完成后执行的事件钩子
     初始化数据除非有依赖dom的放在mounted()里面,加个nextTick
     
        // el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
     
        // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
     
        console.log("Home done");
     
      },
     
      beforeUpdate () {
     
        // 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 
    你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
     // 只有更新和模板发生关联的数据才会触发这个钩子
                    // 和模板绑定的数据更新之前
     
      },
     
      updated () {
     
        // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
     
        // 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
    然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
     
        // 该钩子在服务器端渲染期间不被调用。
     
      },
     
      beforeDestroy () {
     
        // 实例销毁之前调用。在这一步,实例仍然完全可用。一般用于清除定时器
        //$once来监听定时器,在beforeDestroy钩子可以被清除。
        this.$once('hook:beforeDestroy', () => {            
        clearInterval(timer);   })
     
      },
     
      destroyed () {
     
        // Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
    所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
     
      }
     
    };
     
    </script>

    二、vue组件基本结构

    博客对应课程的视频位置:

    一个vue组件主要包括3个部分:界面展示代码template、业务实现代码script、界面布局代码style

    vue组件基本结构:FryTest.vue

     1 <template>
     2     <div class="class_1">
     3       <h2>{{msg}}</h2>
     4       这是一个fry VueComponentTest
     5     </div>
     6 </template>
     7 
     8 <script>
     9   export default {
    10     name: 'FryTest',
    11     data () {
    12       return {
    13         msg: 'Welcome to Your Vue.js App'
    14       }
    15     }
    16   }
    17 </script>
    18 
    19 <style scoped>
    20   .class_1{
    21     color: red;
    22   }
    23 </style>

    script基本结构

      1 <script>
      2  
      3 export default {
      4  
      5   name: "App",
      6  
      7   data() {//数据定义 函数方法,返回数据的方式
      8  
      9     return {};
     10  
     11   },
     12  
     13   methods: {
     14  
     15     // 组件的方法
     16  
     17   },
     18  
     19   watch: {
     20  
     21     // watch监听方法,擅长处理的场景:一个数据影响多个数据 
     22 watch是去监听一个值的变化,然后执行相对应的函数。
     23  
     24   },
     25  
     26   computed: {
     27  
     28     // computed擅长处理的场景:一个数据受多个数据影响 
     29 computed是计算属性,也就是依赖其它的属性计算所得出最后的值
     30  
     31   },
     32  
     33   beforeCreate () {
     34  
     35     // 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
     36  
     37   },
     38  
     39   created () {
     40  
     41     // (在实例创建完成后被立即调用。实例已经创建完成之后被调用。
     42 在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,
     43  watch/event 事件回调。然而,挂载阶段还没开始,
     44 $el 属性目前不可见。初始化数据请求写这里
     45  
     46   },
     47  
     48   beforeMount () {
     49  
     50     // 在挂载开始之前被调用:相关的 render 函数首次被调用。
     51  
     52   },
     53  
     54   mounted () {//页面初始化方法
     55  
     56     // 编译好的HTML挂载到页面完成后执行的事件钩子
     57  初始化数据除非有依赖dom的放在mounted()里面,加个nextTick
     58  
     59     // el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
     60  
     61     // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
     62  
     63     console.log("Home done");
     64  
     65   },
     66  
     67   beforeUpdate () {
     68  
     69     // 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 
     70 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
     71  // 只有更新和模板发生关联的数据才会触发这个钩子
     72                 // 和模板绑定的数据更新之前
     73  
     74   },
     75  
     76   updated () {
     77  
     78     // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
     79  
     80     // 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
     81 然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
     82  
     83     // 该钩子在服务器端渲染期间不被调用。
     84  
     85   },
     86  
     87   beforeDestroy () {
     88  
     89     // 实例销毁之前调用。在这一步,实例仍然完全可用。一般用于清除定时器
     90     //$once来监听定时器,在beforeDestroy钩子可以被清除。
     91     this.$once('hook:beforeDestroy', () => {            
     92     clearInterval(timer);   })
     93  
     94   },
     95  
     96   destroyed () {
     97  
     98     // Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
     99 所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
    100  
    101   }
    102  
    103 };
    104  
    105 </script>
     
  • 相关阅读:
    Maven中使用描述文件切换环境配置
    整合MyBatis到Spring中实现Dao层自动装配
    使用MyBatis搭建项目时报 java.io.IOException: Could not find resource
    数据库CPU占用高排查
    JS 根据时区获取时间
    国外服务器 winserver2012 安装IIS后,安装urlrewrite模块总是自动停止应用程序池
    sql中char(9) char(10) char(13)
    通过 Microsoft.Ace.OLEDB 接口导入 EXCEL 到SQLSERVER
    SDL 当前连接查询脚本
    C# System.Drawing.Graphics 画图后,如何保存一个低质量的图片,一个占用空间较小的图片
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12483708.html
Copyright © 2020-2023  润新知