Vue组件与路由

最新推荐文章于 2024-07-21 00:03:27 发布

爱~消逝

最新推荐文章于 2024-07-21 00:03:27 发布

阅读量515

点赞数 1

分类专栏： vue 前端文章标签： vue.js vue

本文链接：https://blog.csdn.net/qq_45377275/article/details/120004741

版权

本文详细介绍了Vue组件的使用，包括为什么要使用组件、组件的核心思想、局部组件与全局组件的创建，以及Vue路由的基本概念、实现步骤、路由嵌套和整体代码示例，帮助读者深入理解Vue组件化和路由管理。

摘要由CSDN通过智能技术生成

1 Vue组件

为什么要使用组件:

1 在传统的页面开发时,会将大量的HTML/CSS/JS进行引入,但引入后结构混乱不便于开发,维护成本高,而Vue的组件化,将每一个组件看成一个页面,每一个组件中都会有自己的HTML/CSS/JS,可以引入到不同的页面,并且结构不会错乱 :

2 .前端框架为了更好的解耦,采用了"分治"思想的构建代码.

3 组件采用树形结构, 可以将功能小型化.单独维护.

4 组件是一个独立的个体,内部包含HTML/CSS/JS 组件就是一个小的页面

如何理解template属性?

1.template标签是组件中定义html标记的模板.
2.template标签必须有根标签div
3.template标签最好定义在body标签内部,写法方便.

关于组件使用有什么注意事项?

1. 组件的使用必须在VUE对象渲染的区域中使用.
2. 组件有全局的/有局部的.注意作用域.
3. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
4. 组件必须先定义再使用.

组件的核心 :分治思想:每一个组件中都有自己独特的HTML/CSS/JS

在这里插入图片描述

1.1 局部组件

思路:

1.定义一个vue对象:有挂载点,组件属性(只在当前的vue对象中生效) key: value结构 ,如果在JS中key-value一样的.可以只写一个 msgCom

2 定义组件 msgCom : key: value结构 template: "#msgTem" 模板:模板名

3 定义模板标签: 模板标签必须定义在vue渲染div的外部,而且内容必须有一个根标签包裹

4 在vue的数据渲染区使用<msg-com></msg-com>

注意: 定义的是msgCom 但是在vue中的标签没有驼峰规则,所以说使用-隔开,且变小写

<template id="msgTem">
           <div>
               <h3>我是一个局部组件</h3>
           </div>
       </template>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件定义</title>
	</head>
	<body>
		
		<div id="app">
			<msg-com></msg-com>
			<msg-com></msg-com>
		</div>
		
		<!-- 定义app2 局部组件只能在特定位置使用,
		 所以该位置 不能解析-->
		<div id="app2">
			<msg-com></msg-com>
			<msg-com></msg-com>
		</div>