html如何引入vue组件（在HTML页面中引入vue组件）
导读：目录...
目录
一 、前言
二 、实例
前提：
什么是组件化开发
vue 中的组件化开发
vue 组件的三个组成部分
template
script
style
组件的导入并使用
一 、前言
本文的主要目的是学习如何在html文件中定义并使用组件 。
学习本文前需要掌握html基础 ，vue组件等 。
二 、实例
前提：
引入vue.js文件
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>什么是组件化开发
vue 中的组件化开发
vue
是一个
支持组件化开发
的前端框架 。
vue
中规定：
组件的后缀名
是
.vue
。之前接触到的
App.vue
文件本质上就是一个
vue
的组件 。
vue 组件的三个组成部分
每个
.vue
组件都由
3
部分构成 ，分别是：
template
->
组件的
模板结构
script
->
组件的
JavaScript
行为
style
->
组件的
样式
其中 ，
每个组件中必须包含
template
模板结构
，而
script
行为
和
style
样式
是
可选的
组成部分 。
template
vue
规定：每个组件对应的
模板结构
，需要定义到
<template>
节点
中 。
<template id="con">
<main>
<h1>这是 con 组件</h1>
</main>
</template>
注意：
template
是
vue
提供的
容器标签
，只起到
包裹性质的作用
，它不会被渲染为真正的
DOM
元素
template
中只能包含唯一的根节点
script
vue
规定：我们可以在
<script>
节点中
封装组件的
JavaScript 功能
逻辑
。
<script>
new Vue({
el:#app
}
})
</script>
.vue
组件中的
data
必须是函数
vue
规定：
.vue
组件中的
data
必须是一个函数
，
不能
直接
指向一个数据对象
。
因此在组件中定义
data
数据节点时 ，需要加上 return
如果直接
指向一个数据对象 ，
会导致
多个组件实例
共用
同一份数据
的问题 ，
style
vue
规定：组件内的
<style>
节点是
可选的
，开发者可以在
<style>
节点中
编写样式美化当前组件的
UI
结构
。
style
中支持
less
语法
在
<style>
标签上添加
lang="less"
属性 ，即可使用
less
语法编写组件的样式
<style lang="less">
h1{
color: red;
}
</style>
结合以上的知识 ，来实现以下的组件的导入和使用
组件的导入并使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件的简单使用</title> </head> <!-- h5提供了一些语义化标签 用法和div一样只是语义不一样main(主要内容) section(大区域) footer header aside article --> <body> <div id="app"> <!-- 第一步 书写占位符 ，占位符的名字自定义 。占位符的名字不能和标签名一样 --> <v-header></v-header> <v-con></v-con> </div> <script src="js/vue.js"></script> <script> // 第二步 书写组件 // 模板和组件通过id名字绑定 var header={ // template模板 书写页面结构 。类似于之前的html 模板只能有一个根组件(标签) template:"<main><h1>这是头部 header 组件</h1><p>这是头部的内容</p></main>" } var con={ template:"<main><h1>这是 con 组件</h1> <button @click=change()>按钮</button> <p>{{msg}}</p></main>", //组件中的数据 ，需要写成函数的形式 data() { return { //插值表达式 msg : con组件, //点击事件 change(){ alert("触发了change事件"); } } }, } new Vue({ el:#app, // 第三步 挂载组件 components:{ // 占位符:组件 // k:v 如果k和v的值一样 ，可以简写 v-header:header, v-con:con } }) </script> </body> </html>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！