Vue组件 [vue框架][web前端]_vue 做网站框架有组件

作者：你好赵伟 | 2024-05-30 20:46:07

踩

vue 做网站框架有组件

Vue组件

组件作用:

用来减少Vue实例对象中代码量, 日后在使用Vue开发过程中, 可以根据不同的业务功能将页面中划分不同的多个组件, 然后由多个组件去完成整个页面的布局, 便于日后使用vue进行开发时页面管理, 方便开发人员维护

组件使用:

(一)全局组件注册:

说明: 全局组件注册给vue实例, 之后可以在任意vue实例的使用范围内使用该组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue.js文件 -->
		<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id = "app">
			<login></login>
		</div>
		<script type="text/javascript">
			// 开发全局组件
			Vue.component("login",{
				template: "<div><h1>用户登录</h1></div>"
			})
			var vue = new Vue({
				el:"#app",
				data:{		
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

小结:
1. Vue.component用来开发全局组件, 参数1为: 组件名称, 参数2为组件配置模板对象
2. template属性中用来书写组件的html代码(也就时书写模板对象)
3. template中必须有且只有一个root元素(根容器)
  - eg:像上面的: template : “< div>< h1>用户登录< /h1>< /div>” 中的div就是一个根容器, 我们只能写一个根容器
  - 如果写两个根容器的时候就会出错: eg:template : “< div>< h1>用户登录< /h1>< /div>< div>< /div>”
    - 这个时候出错并不是说执行不出来结果, 而是会给我们在控制台输出一个警告, 这个时候就是提示我们一个在template后面的模板中只能是由一个根容器, 这个时候我们有两个div, 而一个div其实就是一个根容器
      - 问题遗留:这个时候我测试的时候为什么使用两个根元素的时候控制台没有给出警告? --> 是版本问题?
4. 使用时需要在Vue作用范围内根据组件名使用全局组件
5. 如果组件命名的时候使用了驼峰命名的规则, 在使用组件的时候必须将驼峰的所有单词小写, 并且将驼峰交接处使用-(中线)分割
  - 这个时候是因为我们的JS中使用了驼峰命名规则对组件进行了一个命名, 但是这个时候我们在HTML中对于大小写是没有严格区分的, 我们的HTML中的标签命名的时候都是采用的短横线分割命名法, 所以当JS中使用驼峰命名的组件我们要在HTML中使用的浏览器会自动将其解析为对应的短横线分割命名法的形式
    - 驼峰命名规则: camelCase
    - 短横线分割命名规则: kebab-case
  - 因为Vue在对组件命名的标准形式就是单词全部小写, 单词之间使用-(中线)分割, 所以如果我们使用了驼峰规则给组件命名, 那么我们的vue会将其在内存中转化为: 小写单词中间使用-(中线)分割的形式

(二)局部注册

全局祖册往往都是不够理想的, 比如: 如果你使用了一个像webpack这样的构建系统, 全局注册所有的组件意味着即便你已经不在使用一个组件了, 但是它任然会被包含在你最终的构建的结果中 —> 这就造成了用户下载的JavaScript无谓的增加了

所以我们一般都是将组件给Vue实例中一个components属性来完成组件注册, 这种方式不会对Vue实例造成累加 —> 这种组件注册的方式我们就称之为: “局部注册”

第一种开发方式:(第一种局部注册的开发方式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一种局部注册的开发方式</title>
		<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id = "app">
			<login></login>
		</div>
		
		<script type="text/javascript">
			const login = {
				template : "<div><h2>用户登录</h2></div>"
			}
			
			const app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				},
				components: { //用来注册局部组件
					login:login
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

第二种开发方式:(第二种局部注册的开发方式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二种局部注册的开发方式</title>
		<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		
		<template id = "login_Template">
				<h1>用户登录</h1>
		</template>
		
		<div id = "app">
			<login></login>
		</div>
		
		<script type="text/javascript">			
			
			
			let login = {//具体局部组件名称
				template : "#login_Template"
			}
			
			const app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				},
				components: { //用来注册局部组件
					login:login
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

补充:

局部组件的使用方式和全局组件的使用方式是一样的, 都是在Vue实例作用范围之内使用

补充二:

var声明变量

let代替var, 声明变量

const声明常量

var,let声明的是变量, 变量一旦初始化之后, 还可以重新赋值

const声明的就是常量, 常量一旦初始化之后, 就不能重新赋值了, 否则就会出错

var允许重复声明同一个变量, 而let和const不允许

只要是已经声明过的变量或者常量,不论是用什么方式声明的, 都不可以使用let或者const再次声明

补充三:

我们注册全局组件的时候通过Vue,注意: 首字母是大写的, 通过Vue来调用component属性来实现注册全局组件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/648546

Vue组件 [vue框架][web前端]_vue 做网站 框架有组件