The vue component consists of several parts

The vue component consists of 3 parts: 1. template, which sets the template structure of the component; 2. script, which sets the JavaScript behavior of the component; 3. style, which sets the style of the component. Each component must contain a template template structure, and script behavior and style are optional components; "

# #The operating environment of this tutorial: Windows 7 system, vue3 version, DELL G3 computer.

vue is a framework that fully supports component development. The suffix name of the component specified in vue is .vue. I have come into contact with it before The App.vue file is essentially a vue component. Each .vue component is composed of 3 parts, namely:

• ##template -> Component Template structure

• script -> Component’s JavaScript behavior

##style -> ; Component style
Among them, each component must contain a template template structure, while script behavior and style are optional components. Vue stipulates: The template structure corresponding to each component needs to be defined in the

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

Note:

Use the directive in the template

In the component The

<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>

in template Define the root node in

In the vue 2.x version, the DOM structure within the

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

However, in the vue 3.x version,

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

Script node of the component

##vue stipulates: The <script> node within the component is optional, and developers can encapsulate the JavaScript business logic of the component in the <script> node.< script > The basic structure of the node is as follows: </script>

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

# The name node in the script

can be the current one through the name node The component defines a name, the code is as follows:

<script>
export default {
// name 属性指向的是当前组件的名称(建议:每个单词的首字母大写)
name: &#39;MyApp&#39;，
}
</script>

When using vue-devtools for project debugging, the customized component name can clearly distinguish each component:

data node in script

## The data needed during #vue component rendering can be defined in the data node:

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

The data in the component must be a function, vue stipulates: the data in the component must be a Functions cannot directly point to a data object. Therefore, when defining the data node in the component, the following method is wrong:

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

methods node in script

The event processing function in the component must be defined in the methods node. The sample code is as follows:

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

The style node of the component

vue stipulates: The

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

where

Learn one more trick: support less syntax in style

如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置：

①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持

②在

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

【相关推荐：vuejs视频教程、web前端开发】

The above is the detailed content of The vue component consists of several parts. For more information, please follow other related articles on the PHP Chinese website!