zoukankan      html  css  js  c++  java
  • vue之组件理解(一)

      组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

      其中,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

    data: function () {
      return {
        count: 0
      }
    }

      使用组件为了更好的复用,相当于自定义标签,你可以进行任意次数的复用。

      首先要明确自己组件的功能

      比如实现两个按钮,一个喜欢,一个不喜欢,每次点击可以记录次数。当点击按钮时,每个组件会各自独立维护它的count,每使用一个组件都会有一个新的实例被创建。

    // 调用button组件
    <hello-world heading="Likes" color="green"></hello-world>
    <hello-world heading="Dislikes" color="red"></hello-world>
    <template id="button-component">
    <div id="box">
      <h1>{{ heading }}</h1>
      <button @click="count += 1" :class="color">{{ count }}</button>
    </div>
    </template>
    
    <script>
        export default {
            name: "button-component",
          props:['heading','color'],
          data:function () {
    
            return{
              count:0
            }
          }
        }
    </script>
    
    <style scoped>
      button{ 50px;height: 30px;border-radius: 5px;}
    .green{
      background:green;
    }
      .red{
        background: red;
      }
    </style>

    出现的问题:对于直接绑定改变style的background值,

    style="background: {{ color }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

  • 相关阅读:
    OI无关 透彻随笔
    置顶帖(传送门)/to 学弟 一个菜鸡的故事
    洛谷P1494 小Z的袜子 莫队
    关于 对拍 的一些认识
    关于 带权二分/wqs二分 的一些认识
    关于 KDtree 的一些认识
    关于 网络流 的一些认识
    省选 考前模板
    关于 多项式 的一些认识/多项式入门
    小球与盒子 的奇妙关系
  • 原文地址:https://www.cnblogs.com/songForU/p/10511909.html
Copyright © 2011-2022 走看看