侧边栏壁纸
博主头像
逆流者

不登高山,不知天之高也;不临深溪,不知地之厚也。

  • 累计撰写 147 篇文章
  • 累计创建 43 个标签
  • 累计收到 4 条评论
隐藏侧边栏

Vue第19话 组件定义与使用

逆流者
2020-01-05 / 0 评论 / 0 点赞 / 197 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2020-01-05,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1.vue文件的组成(3 个部分)

1.1 模板页面

<template>
  //页面模板
</template>

1.2 JS 模块对象

<script>
  export default {
    data() {
      return {}
    },
    methods: {},
    computed: {},
    components: {}
  }
</script>

1.3 样式

<style>
  //样式定义
</style>

2.基本使用

  • 引入组件
  • 映射成标签
  • 使用组件标签
<template>
  <HelloWorld></HelloWorld>
  <hello-world></hello-world>
</template>
<script>
  import HelloWorld from './components/HelloWorld'
  export default {
    components: {
      HelloWorld
    }
  }
</script>
<style>
  //样式定义
</style>

注意: 标签名与标签属性名书写问题

1).写法一: 一模一样

2).写法二: 大写变小写, 并用-连接

0

评论