zoukankan      html  css  js  c++  java
  • vue学习

    1、界面和组件

        1.1 普通界面转换为组件(建安成本测算+配套成本测算两个界面内容操作一样,只是获取数据类别不一样)

             将建安成本测算转换为一个组件,只需要一步:name:'jacbCalcComponent'

        1.2 界面引用添加两个新界面,建安+配套成本测算:

            //2.1 将改造的组件写入界面元素
            <template>
              <div>                
                  <v-jacbCalcComponent
                    ref="jacbCalcComponent"
                    :buildingType="buildingType">
                  </v-jacbCalcComponent>    
              </div>
            </template>  

            <script>
              //2.2 引用单元
              import jacbCalcComponent from 'components/jacbCalcComponent';

              var dataStore={};
              export default {
                //2.3 祖册组件
                components: {
                  'v-jacbCalcComponent': jacbCalcComponent
                },
                created: function(){
                  debugger;
                  var vueObj=this;
                  vueObj.buildingType = '可售产品';      
                },
                mounted:function() {
                  // debugger;    
                  // var vueObj=this;
                  // vueObj.buildingType = '可售产品';
                },
                data: function(){
                  return {
                     buildingType: '',
                  }
                },
                methods:{
                }
              };                      
            </script>

        1.3 通信:组件和外部引用

              1.3.1 组件调用父容器的事件

                       a、父节点界面元素绑定事件:v-bind:   ==   v-on:  ==  @:

                            @after-insert="afterInsert"

                       b、组件调用

                             this.$emit('after-insert', parameter1,......);

              1.3.2 应用属性:父节点直接访问组件的属性

                       a、组件定义属性:

                              props: ['buildingType'],

                      b、父节点在templete中直接绑定访问:

                           :buildingType="buildingType"

       1.4 生成周期

             生命周日图:

             https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA       

             父组件在执行完毕created是,就开始加载子组件,子组件就开始按照生命周日顺序执行各种事件

                     

        

  • 相关阅读:
    Codeforces 294B Shaass and Bookshelf:dp
    Codeforces 372B Counting Rectangles is Fun:dp套dp
    Codeforces 402D Upgrading Array:贪心 + 数学
    Codeforces 571B Minimization:dp + 贪心【前后相消】
    Codeforces 509F Progress Monitoring:区间dp【根据遍历顺序求树的方案数】
    codeforces 447E or 446C 线段树 + fib性质或二次剩余性质
    类斐波那契数列的一些性质
    CF 1097D
    最近点对问题
    2018ACM-ICPC EC-Final 现场赛I题 Misunderstanding...Missing 倒着DP
  • 原文地址:https://www.cnblogs.com/SouthAurora/p/8709135.html
Copyright © 2011-2022 走看看