The vue component consists of several parts-Front-end Q&A-php.cn

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; " " is a container tag provided by Vue, which only functions as a wrapper and will not be rendered as Real DOM elements. " is a container tag provided by Vue. It only plays a wrapping role. It will not be rendered as a real DOM element.

# #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 -&gt ; 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 node. Copy after login Note: is a container tag provided by vue, which only serves as a wrapper function, it will not be rendered as a real DOM element.

Use the directive in the template In the component The node supports the use of the instruction syntax learned previously to assist developers in rendering the DOM structure of the current component. The code example is as follows:

这是App根组件 生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}

我在黑马程序员学习vue. js

按钮 Copy after login

in template Define the root node in In the vue 2.x version, the DOM structure within the node only supports a single root node:

这是App根组件 这是副标题 Copy after login However, in the vue 3.x version, supports defining multiple root nodes:

这是App根组件 这是副标题 Copy after login

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

//今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} Copy after login # 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:

export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: 'MyApp'， } Copy after login 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: export default { //组件的名称 name: 'MyApp'， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: '哇哈哈 ', } }, } Copy after login

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 } Copy after login

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++ }, }, } Copy after login

The style node of the component

vue stipulates: The node within a component is optional. Developers can write styles in the node to beautify the UI structure of the current component. The basic structure of the node is as follows: h1{ font -weight: normal; Copy after login

where The lang="css" attribute on the tag is Optionally, it indicates the style language used. By default, only common css syntax is supported, and optional values include less, scss, etc.

Learn one more trick: support less syntax in style

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

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

②在 标签上添加lang="less" 属性，即可使用less 语法编写组件的样式

h1{ font-weight: normal; i { color: red; font-style: normal; } Copy after login

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