Vue组件基础

卖火柴的小男孩2

已于 2022-05-10 21:30:38 修改

阅读量484

点赞数

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

于 2022-05-09 00:58:03 首次发布

本文链接：https://blog.csdn.net/qq_42839746/article/details/124657952

版权

一、Vue组件概述

1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。

二、组件的使用分三个步骤

1、调用 Vue.extend() 方法创建组件构造器

var MyComponent = Vue.extend({ 
    // 选项
})

2、调用 Vue.component() 方法注册组件。

Vue.component('my-component', MyComponent)

3、在 Vue 实例的作用范围使用组件。

<div id="app"> 
    <my-component></my-component> 
</div>

完整代码（第一种写法）

<!DOCTYPE html>
<html>
<head>
	<title>使用组件</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   <div id="app">
   	    <!-- 3、 #app 是 Vue 实例挂载的元素，应该在挂载元素范围内使用组件--> 
   		<my-component></my-component>
   </div>
</body>
<script type="text/javascript">
	// 1、创建一个组件构造器 
	var Mycomponent=Vue.extend({
		//template选项，他是定义组件的网页模板
		template:"<div><p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。</div></p>"
	})
	// 2、创建组件，并指定组件的标签，组件的 HTML 标签为<my-component> 
	Vue.component("my-component",Mycomponent)
	new Vue({
		el:"#app"
	})
</script>
</html>

第二种写法（第一种写法里面组件template 的网页模板html代码不会提示，但是第二种写法会有提示）

<!-- 组件的使用----第二种写法 -->
<!DOCTYPE html>
<html>
<head>
	<title>使用组件</title>
	<meta charset="utf-8">
	<script type="text/javascript" src=

最低0.47元/天解锁文章

卖火柴的小男孩2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件基础

1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。
复制链接

扫一扫