vue-cli3组件的使用

原创于 2020-05-18 21:22:00 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍Vue.js中组件的创建与使用，包括.vue文件结构、data属性定义及动态数据展示。通过具体示例，解释如何在组件中利用v-for指令进行列表渲染，并展示组件内的HTML、JS和CSS代码组织方式。

安装好的vue-cli，可以看到下面的目录：

assets存放图片等文件。

components文件夹就类似templates文件夹，存放组件的。

main.js是创建一个vue。

App.vue是一个组件，以.vue结尾的文件都称为一个组件（html、js、css），组件第一个字幕必须是大写，组建的data必须是一个函数。

App.vue如下：

<template>
  <div id="app">
    <!-- 必须是包裹的标签 -->
    <h1>{{msg}}</h1>
    <ul v-for="(item,index) in items">
  <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {  // 抛出
  name: 'App',  // name可有可没有，指的就是App.vue这个文件
  data(){  // data必须是一个函数
    return {  // 必须ruturn一个对象
            msg: "菜单",
            items: ["宫保鸡丁","回锅肉","糖醋排骨"]
        }
  }
}
</script>

<style>
</style>

结束！