分享一个大牛的人工智能教程。零基础！通俗易懂！风趣幽默！希望你也加入到人工智能的队伍中来！请轻击http://www.captainbed.net

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。vue 规定：每个组件对应的模板结构，需要定义到 <template> 节点中。

<template>
<!-- 当前组件的DOM结构，需要定义到 template 标签的内部 -->
</template>

注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。

在 template 中使用指令

在组件的 <template> 节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。代码示例如下：

<template>
<h1>这是App根组件</h1>
<!-- 使用{{ }}插值表达式 -->
<p>生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind属性绑定 -->
<p :title="new Date().tolocaleTimeString()">我在学习vue.js</p>
<!-- 属性v-on事件绑定 -->
<button @click=”showInfo">按钮</button>
</template>

在 template 中定义根节点

在 vue 2.x 的版本中，<template> 节点内的 DOM 结构仅支持单个根节点：

<template>
<!-- vue 2.x中，template节点内的所有元素，最外层“必须有”唯一的根节点进行包裹，否则报错 -->
<div>
<h1>这是App根组件</h1>
<h2>这是副标题</h2>
</div>
</template>

但是，在 vue 3.x 的版本中，<template> 中支持定义多个根节点：

<template>
<!-- 这是包含多个根节点的template结构，因为h1标签和h2标签外层没有包裹性质的根元素 -->
<h1>这是App根组件</h1>
<h2>这是副标题</h2>
</template>

组件的 script 节点

vue 规定：组件内的 <script> 节点是可选的，开发者可以在 < script> 节点中封装组件的 JavaScript 业务逻辑。< script > 节点的基本结构如下：

<script>
//今后，组件相关的data数据、methods方法等，都需要定义到export default所导出的对象中。
export default {}
</script>

script 中的 name 节点

可以通过 name 节点为当前组件定义一个名称，代码如下：

<script>
export default {
// name属性指向的是当前组件的名称（建议：每个单词的首字母大写）
name: 'MyApp'
}
</script>

在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件。

script 中的 data 节点

vue 组件渲染期间需要用到的数据，可以定义在 data 节点中：

<script>
export default {
// 组件的名称
name: 'MyApp',
// 组件的数据（data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象）
data() {return {username: '哇哈哈',}
},
}
</script>

其中组件中的 data 必须是函数，vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义 data 数据节点时，下面的方式是错误的：

data: { // 组件中，不能直接让 data 指向一个数据对象（会报错）count: 0
}

script 中的 methods 节点

组件中的事件处理函数，必须定义到 methods 节点中，示例代码如下：

export default {
name: 'MyApp', // 组件的名称
data() { // 组件的数据
return {
count: 0,
}
},
methods: { //处理函数
addCount() {
this.count++
},
},
}

组件的 style 节点

vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。<script > 节点的基本结构如下：

<style>
h1 {
font-weight: normal;
</style>

其中 <style> <="" font=""> 标签上的 lang="css" 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可选值还有 less、scss 等。
多学一招：让 style 中支持 less 语法：
如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：
① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持；
② 在 <style> <="" font=""> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式。

<style>
h1 {
font-weight: normal;
}
i {
color: red;
font-style: normal;
}
</style>

Vue组件的三大部分－template、script、style相关推荐

uniapp 子组件 props拿不到数据_来吧！一文彻底搞定Vue组件！
点击蓝色 "达达前端小酒馆" 关注我哦! 加个 "星标" ,每天一篇文章,一起学编程作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 ...
超实用的 Vue 组件通信方式大汇总（8种）
文章目录前言一.Vue组件关系二.Vue组件通信方式 1. props / $emit 1.1 props 父传子 1.2 $emit 子传父 1.3 父子组件双向绑定 1.3.1 v-mode ...
Vue组件间常用的通信方式总结
在使用 vue-cli 创建的 vue 项目中进行组件间的通信,以下是三种常用的组件间通信的方式总结. 1.父组件向子组件传递数据----------------------------> 通过 ...
vue ---- 组件
组件: 对UI解构的封装组件的三个组成部分 template script style <template><h3>{{ username }}</h3> < ...
Vue组件（二）父组件、子组件通信/传值
一.Vue 父组件访问子组件 1.父组件获取子组件对象通过ref引用属性访问子组件对象定义: <StudentInfo :num="parentNum" ref=&quo ...
10、VUE组件基本使用
在原生的JavaScript中,当我们需要使用重复使用标签的时候,大多数情况下我们会使用复制粘贴的方法. 在vue中我们使用组件的方式,可以有效的解决代码片段的重复使用. 1.组件的引入 [实现多个折 ...
通用vue组件化登录页面
一.首页设置大体的样式布局 1.首先建立一个login文件夹,在里面建立对应的login.vue文件 2.设置登录页面的背景图,在App.vue文件中使用router-view进行展示登录组件 3.先 ...
了解前端工程化之组件化——Vue组件
首先我们需要知道什么是组件化开发? 前端工程化包含这么四个方针:模块化.组件化.规范化.自动化具体可以查看:了解前端工程化其中就有我们的组件化 ,它指的就是根据封装这么一个思想概念,将页面上可以重 ...
Vue组件之间数据通信12种方式
目录 1.父组件向子组件传递数据 props 2.子组件向父组件传递数据($emit的用法) 3.兄弟组件通信 4.ref / $refs 5.eventBus事件总线($emit / $on) 6. ...

Vue组件的三大部分－template、script、style