vue组件讲解

一、组件基础

1.1、组件命名规则

使用 kebab-case

如：hello-world   解析后   HelloWorld

使用 PascalCase

如：HelloWorld   解析后   HelloWorld

注意：禁止使用驼峰命名法，如：helloWorld  会解析成  helloworld 

1.2、组件的创建

1.1.1我们在components文件夹下创建一个名为“HelloWorld.vue”的vue文件

1.1.2、在文件里添加一个 template 模板

注意：组件内容必须以 template 模板包裹，格式为：<template><div>组件内容</div></template>

1.1.3、js代码段添加 name 名称和 data 属性值

1.1.4、template 模板中添加一个h3标签，将属性值显示在这里

1.3、组件的引用

1.2.1、在App.vue文件中js代码段中引入刚才创建的HelloWorld.vue文件

代码：import 别名 from 文件路径，如 import HelloWorld from './components/HelloWorld.vue'

1.2.2、在App.vue文件中js代码段中注册组件

组件注册：components: { 组件名 }，组件名之间用逗号隔开，如 components: {  HelloWorld  }

1.2.3、在App.vue文件中使用组件

使用组件：<组件名 /> 或 <组件名></组件名 >，组件名以标签的形式使用，如 <HelloWorld /> 或 <hello-world />

1.2.4、运行测试

大家都知道，vue是响应式的，只要数据发生变化，浏览器会自动刷新。

页面可以正常显示刚才设置的属性值࿰