How to write components in vue

This time I will show you how to write components in Vue, and what are theprecautionswhen writing components in Vue. The following is a practical case, let's take a look.

Write a vue component

What I write below is how to write a single file component ending with .vue, which is a project built based on webpack . If you still don’t know how to use webpack to build a vue project, you can move to vue-cli.

A complete vue component will include the following three parts:

1. template: Template

2. js: Logic

3. css: Style

Each component has its own template, js and style. If a page is compared to a house, the components are the living room, bedroom, kitchen, and toilet in the house. If the kitchen is taken out separately, the components can be knives, range hoods...etc. That is to say, pages are made up of components, and components can also be made up of components. This makes it very flexible and has very low coupling.

Let’s first look at how a component is written in a .vue file:

Vue.component('simple-counter', { template: '
', data () { // 数据 return { counter: 0 } }, methods: { // 写点方法 }, created () { // 生命钩子 }, computed: { // 计算属性 } })

What is template used for?

js part

export default { data () { return { counter: 0 } }, methods: { // 方法 }, created () { // 生命钩子 }, computed: { // 计算属性 } } // 在这里很明显js部分就是对应的原生写法内的非template部分了。 // export default这个是es6的模块写法，不懂的可以先去了解es6的模块化

css part

Introduction

How toreference this component in other components?

Component one (button.vue)

Component two (box.vue)

I believe I read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of webpack hot refresh and hot loading

code spliting optimization Vue packaging steps detailed explanation

The above is the detailed content of How to write components in vue. For more information, please follow other related articles on the PHP Chinese website!