vue2 基础学习02 (Vue组件)

栏目: 编程语言 · 发布时间: 5年前

内容简介:参考官方文档:

vue学习路径和建议----尤雨溪

vue官网

1.Vue组件

参考官方文档: 组件基础

  1. 定义一个组件

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    上面的 button-counter 就是一个组件,可以说是一个 自定义的标签 ,我先这样理解,后面再看。

    以下注意!!!

    • 一个组件的 data 选项必须是一个函数

      data: function () {
        return {
          count: 0
        }
      }
    • template下面只能有一个根节点

      如果再创建一个同级的节点就会出错,如下:

      vue2 基础学习02 (Vue组件)

  2. 在html中引用这个组件

    <div id="components-demo">
      <button-counter></button-counter>
    </div>
  3. 实例化Vue (指向组件所在的"坑位")

    new Vue({ el: '#components-demo' })
  4. 可以复用

    <div id="components-demo">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机和难解性

计算机和难解性

M.R 加里、D.S. 约翰逊 / 张立昂、沈泓 / 科学出版社 / 1987年 / 4.50

本书系统地介绍了NP完全性理论的概念和方法,全书共分为7章和两个附录。第一章粗略地介绍了计算复杂性的一些基本概念和NP完全性理论的意义。第二章至第五章介绍了NP完全性的基本理论和证明的方法。第六章集中研究NP难问题的近似算法。第七章概述了大量计算复杂性中的有关理论课题。 附录A收集了范围广泛、内容丰富的NP完全性和NP难的问题、附录B补充了NP问题的一些最新的进展,既有理论方面的,又有关于具体问题......一起来看看 《计算机和难解性》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试