vue组件由3部分组成:1、template,设置组件的模板结构;2、script,设置组件的JavaScript行为;3、style,设置组件的样式。每个组件中必须包含template模板结构,而script行为和style样式是可选的组成部分;“”是vue提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的DOM元素。”是vue提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的DOM元素。
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质 上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成,分别是:
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。vue 规定:每个组件对应的模板结构,需要定义到 节点中。
<template> <!-- 当前组件的DOM结构,需要定义到template 标签的内部 </ template>
注意: 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。
在 template 中使用指令
在组件的 节点中,支持使用前面所学的指令语法,来辅助开发者渲染当前组件的 DOM 结构。代码示例如下:
<template> <h1>这是App根组件</h1> <!--使用{{ }}插值表达式--> <p>生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}</p> <!-- 使用v-bind 属性绑定--> <p :title="new Date(). tol ocaleTimeString()">我在黑马程序员学习vue. js</p> <!--属性v-on事件绑定 <button @click=”showInfo">按钮</button> </template>
在 template 中定义根节点
在 vue 2.x 的版本中, 节点内的 DOM 结构仅支持单个根节点:
<template> <!-- vue 2.x 中,template 节点内的所有元素,最外层"必须有“唯一的根节点进行包裹,否则报错--> <div> <h1>这是App根组件</h1> <h2>这是副标题</h2> </div> </ template>
但是,在 vue 3.x 的版本中, 中支持定义多个根节点:
<template> <!--这是包含多个根节点的template 结构,因为h1标签和h2标签外层没有包裹性质的根元素--> <h1>这是App根组件</h1> <h2>这是副标题</h2> </template>
组件的 script 节点
vue 规定:组件内的