-
单文件组件：dom高亮插件、在父组件中引入子组件、App.vue代码代码写法
输入等dom为什么会有高亮显示？
- 下载Vetur插件：
- 模板会自动帮你导出，但是js文件不会，需要你手动导出，
- 启动的服务器，只会热更新，如果想要刷新整个页面就自己手动刷新；
- 热更新：只会局部更新组件，页面不会重新刷新，所以页面中老的错误还在，不想显示了，就手动刷新
单文件组件的代码写法：在App.vue中写：
- <div>
- hello world--{{myname}}
- div>
- <script>
- // export default是ES6的导出规范
- // 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
- dom、js和css都包含进来了，而且分的很清楚；
如何在父组件中引入子组件？
- 有两种方式：一个是引入全局的子组件，另一个是引入局部的子组件；
（1）引入全局的子组件：
- 定义一个孩子组件：
- 跟App.vue同一个目录下，新建一个文件夹，里面放孩子组件文件；
（建议：文件夹用小写，组件用大写开头，好看方便；）
- 子组件：
- 在App.vue父组件中使用和导入子组件：
- import navbarItem from './mycomponents/NavbarItem.vue'//引入子组件
- import Vue from 'vue'//引入vue
- Vue.component('navbar-item', navbarItem)//注册子组件
- import导入的navbarItem实际上是对象，因为在子组件里从template开始定义，并没有注册子组件，所以需要在App.vue父组件中注册子组件；
- 这个子组件对象名可以随便起，以及这个子组件名：“navbar-item”，但是必须满足驼峰命名法或者加“-”的写法；
完整代码：
- <div>
- hello world--{{myname}}
- <navbar-item>navbar-item>
- div>
- <script>
- import navbarItem from './mycomponents/NavbarItem.vue'
- import Vue from 'vue'
- Vue.component('navbar-item', navbarItem)
- // export default是ES6的导出规范
- // 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
结果：
（2）引入局部的子组件：
- 子组件跟上面的一样；
import navbarItem from './mycomponents/NavbarItem.vue'- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- },
- components: {
- navbarItem: navbarItem// 当key和value名称一样时，可以省略value
- // navbarItem
- }
- }
- 注意：如果局部定义子组件名称的时候，如上图代码中是“navbarItem”，如果子组件名写成了“-”的形式出错了，就用驼峰写法；
完整代码：
- <div>
- hello world--{{myname}}
- <navbar-item>navbar-item>
- div>
- <script>
- import navbarItem from './mycomponents/NavbarItem.vue'
- // import Vue from 'vue'
- // Vue.component('navbar-item', navbarItem)
- // export default是ES6的导出规范
- // 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- },
- components: {
- navbarItem: navbarItem// 当key和value名称一样时，可以省略value
- // navbarItem
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
结果：
-
相关阅读:
Python基础语法（一）——变量定义和运算符的使用
优思学院｜六西格玛品质管理概念，实现卓越品质的艺术
echart 仪表盘实现指针的渐变色及添加图片
docker 使用Ubuntu作为基础镜像：安装jdk1.8一直停留，怎么选择都不能跳过去
计算机毕业设计Javavue水果商城(源码+系统+mysql数据库+lw文档）
【RK3588】YOLO V5在瑞芯微板子上部署问题记录汇总
基于python+nodejs医院急诊挂号系统
Linux安装Oracle数据库
java-net-php-python-springboot宿舍管理计算机毕业设计程序
springboot查看和修改最大上传文件限制
- 原文地址：https://blog.csdn.net/a1598452168YY/article/details/128091440
