Home > Web Front-end > JS Tutorial > body text

How to write components in vue

php中世界最好的语言
Release: 2018-04-28 16:39:07
Original
3159 people have browsed it

This time I will show you how to write components in Vue, and what are the precautions when 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: '<p id="inputBox"><input type="text"></p>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})
Copy after login

What is template used for?

<template>
 <p id="inputBox">
 <input type="text">
 </p>
</template>
<!--
template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来):
-->
<p id="inputBox">
 <input type="text">
</p>
<!--
 对应原生写法的话,就是template内的dom字符串
-->
Copy after login

js part

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

css part

<style lang="scss" scoped>
...样式
</style>
Copy after login

Introduction

How to reference this component in other components?

Component one (button.vue)

<template>
 <p class="button">
 <button @click="onClick">{{text}}</button>
 </p>
</template>
<script>
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {
 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>
Copy after login

Component two (box.vue)

<template>
 <p class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值(text)-->
 </p>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
</script>
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template