A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 23rd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Today we will focus on the concept of components in Vue

0. The concept of components

Write applications the traditional way

Existing problems:

Dependencies are messy and difficult to maintain
Code reuse rate is not high

Write applications as components

Component definition – a collection of code and resources that implements local functionality in an application

1 Non-single file components

1.1 Three steps to using components

Defining a component (creating a component)
Certified components
Working with components (write component labels)

1.2 How to define a component

Created using vue.extend (options), where options are almost the same as the one passed in when new Vue (options), but with the following differences

Don’t writeelUltimately, all components are managed by a VM, within a VMelDecide which container to serve
dataMust be written as a function – to avoid references when components are reused

[Remarks] You can use Tempalte to configure the component structure

1.3 How Do I Register components

Local registration:new VueWhen passed incomponentsoptions
Global registration:Vue.component(‘ Component name ‘, component)

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>The basic use</title>
  <script type="text/javascript" src=".. /js/vue.js"></script>
</head>

<body>
  <! -- Get a container ready -->
  <div id="root">
    <hello></hello>
    <hr>
    <h1>{{msg}}</h1>
    <hr>
    <! Step 3: Write component tags -->
    <school></school>
    <hr>
    <! Step 3: Write component tags -->
    <student></student>
  </div>

  <div id="root2">
    <hello></hello>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  // Create the school component
  const school = Vue.extend({
    template: 
        
         schoolName: {{schoolName}} {{address}} < button@click ="showName"
       .// el:'#root', // Do not write el configuration items when defining components, because ultimately all components are managed by a VM, and the VM decides which container to serve.
    data() {
      return {
        schoolName: Silicon Valley.address: 'Beijing Changping'}},methods: {
      showName() {
        alert(this.schoolName)
      }
    },
  })

  // Create the student component
  const student = Vue.extend({
    template: ` < div > < h2 > student's name: {{studentName}} < / h2 > < h2 > student age: {{age}} < / h2 > < / div > `.data() {
      return {
        studentName: 'Joe'.age: 18}}})// Step 1: Create hello component
  const hello = Vue.extend({
    template: '
        
         Hello! {{name}} 
       
 `.data() {
      return {
        name: 'Tom'}}})// Step 2: Register the component globally
  Vue.component('hello', hello)

  / / create the vm
  new Vue({
    el: '#root'.data: {
      msg: 'Hello! '
    },
    // Step 2: Register component (partial registration)
    components: {
      school,
      student
    }
  })

  new Vue({
    el: '#root2',})</script>

</html>
Copy the code

1.4 pay attention to the point

About Component names

One word

First (lowercase) : school

Second (capital letter) : School

Multiple words

The first (kebab-case naming) is my-school

Second (CamelCase naming) : MySchool (requires Vue scaffolding support)

note

① Component names should avoid existing element names in HTML, such as h2 and H2

② You can use the name configuration item to specify the name of the component to display in the developer tools

About Component Labels

Second way to write:
(not using scaffolding causes subsequent components not to render)

shorthand

Const school = vue.extend (options) can be shortened to const school = options

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>A couple of points</title>
  <script type="text/javascript" src=".. /js/vue.js"></script>
</head>

<body>
  <! -- Get a container ready -->
  <div id="root">
    <h1>{{msg}}</h1>
    <school></school>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  // Define the component
  const s = Vue.extend({
    name: 'atguigu'.template: ` < div > < h2 > school name: {{name}} < / h2 > < h2 > school address: {{address}} < / h2 > < / div > `.data() {
      return {
        name: Silicon Valley.address: 'Beijing'}}})new Vue({
    el: '#root'.data: {
      msg: 'Welcome to Vue! '
    },
    components: {
      school: s
    }
  })
</script>

</html>
Copy the code

1.5 Component Nesting

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Nesting of components</title>
  <! Vue -->
  <script type="text/javascript" src=".. /js/vue.js"></script>
</head>

<body>
  <! -- Get a container ready -->
  <div id="root">

  </div>
</body>

<script type="text/javascript">Vue.config.productionTip = false // Prevents Vue from generating production prompts at startup. // Define student component const student = vue.extend ({name: 'student', template: '<div>
            <h2>Student Name:{{name}}</h2>	
            <h2>Student Age:{{age}}</h2>	
        </div>Const school = Vue. Extend ({name: 'school', template: ') // Define school component const school = Vue. Extend ({name: 'school', template: '<div>
            <h2>School Name:{{name}}</h2>	
            <h2>School Address:{{address}}</h2>	
            <student></student>
        </div>', data() {return {name: ' ', address: ' '}}, // Register components (local) : {student}}) // Define hello component const hello = vue.extend ({template: '<h1>{{msg}}</h1>', data() {return {MSG: 'Welcome to Silicon Valley! '}}}) // Define app component const app = vue.extend ({template: '<div>	
            <hello></hello>
            <school></school>
        </div>', components: {school, hello}}) // Create vm new Vue({template: '<app></app>', el: '#root', // Register components: {app}})</script>

</html>
Copy the code

2. VueComponent

The app component is essentially a constructor called VueComponent that is not defined by the programmer but generated by vue.extend
We just need to write
or
. Vue will help us create instance objects of app components. Vue will help us execute new VueComponent(options).
Special note: Each call to vue. extend returns a brand new VueComponent
This refers to (1) data, (methods), (watch), (computed), and (this) are VueComponent instances. (2) New Vue(options) : The data function, the methods function, the watch function, and the computed function are all Vue instance objects.
VueComponent instance object, hereafter referred to as VC (also known as component instance object)
The instance object of Vue, hereafter referred to simply as VM

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>VueComponent</title>
  <script type="text/javascript" src=".. /js/vue.js"></script>
</head>

<body>
  <! -- Get a container ready -->
  <div id="root">
    <school></school>
    <hello></hello>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  // Define the school component
  const school = Vue.extend({
    name: 'school'.template: `
        <div>
            <h2>学校名称：{{name}}</h2>	
            <h2>学校地址：{{address}}</h2>	
            <button @click="showName">点我提示学校名</button>
        </div>
        `.data() {
      return {
        name: Silicon Valley.address: 'Beijing'}},methods: {
      showName() {
        console.log('showName'.this)}}})const test = Vue.extend({
    template: `<span>atguigu</span>`
  })

  // Define the Hello component
  const hello = Vue.extend({
    template: ` 
        
        {{msg}} 
         
       
 `.data() {
      return {
        msg: 'Hello! '}},components: {
      test
    }
  })


  // console.log('@',school)
  // console.log('#',hello)

  / / create the vm
  const vm = new Vue({
    el: '#root'.components: {
      school,
      hello
    }
  })
</script>

</html>
Copy the code

An important built-in relationship

VueComponent.prototype.__proto__ === Vue.prototype
Copy the code

This allows the component instance object VC to access properties and methods on the Vue prototype

<! DOCTYPEhtml>
<html>

<head>
  <meta charset="UTF-8" />
  <title>An important built-in relationship</title>
  <! Vue -->
  <script type="text/javascript" src=".. /js/vue.js"></script>
</head>

<body>
  <! -- Get a container ready -->
  <div id="root">
    <school></school>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
  Vue.prototype.x = 99

  // Define the school component
  const school = Vue.extend({
    name: 'school'.template: ` < div > < h2 > school name: {{name}} < / h2 > < h2 > school address: {{address}} < / h2 > < button @ click = "showX" > point I output x < / button > < / div > `.data() {
      return {
        name: Silicon Valley.address: 'Beijing'}},methods: {
      showX() {
        console.log(this.x)
      }
    },
  })

  // Create a VM
  const vm = new Vue({
    el: '#root'.data: {
      msg: 'hello'
    },
    components: {
      school
    }
  })


  // Define a constructor
  /* function Demo(){this.a = 1 this.b = 2} // create an instance of Demo object const d = new Demo() console.log(demo.prototype) // display prototype attributes Console. log(d.__proto__) // Implicit prototype attribute console.log(demo.prototype === D.__proto__) // Programmers manipulate prototype objects by displaying prototype attributes, append an X attribute, X = 99 console.log('@',d) */
</script>

</html>
Copy the code

3. Single file component VUE file composition (3 parts)

Composition of 3.1

The template page

<template>The page template</template>
Copy the code

JS module object

<script>
export default {
    data() {return {}},
    methods: {},
    computed: {},
    components: {}}</script>
Copy the code

style

<style>Style definitions</style>
Copy the code

3.2 Basic Usage

The introduction of the component
Map to label
Using component labels

App.vue

<template>
    <div>
        <HelloWorld></HelloWorld>
        <hello-world></hello-world>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld'
    export default {
        name: 'App'.components: {
            HelloWorld
        }
    }
</script>
Copy the code

main.js

import App from './App'

new Vue({
    el: '#root'.component: {App},
})
Copy the code

3.3 Writing label names and attribute names

Notation 1: Exactly the same
Notation 2: Write smaller capitals and use – to connect

Finally, welcome to my column and make friends with YK bacteria

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

VueComponent Definition and Use – Non-single file component – Single file component – VueComponent

0. The concept of components

1 Non-single file components

1.1 Three steps to using components

1.2 How to define a component

1.3 How Do I Register components

schoolName: {{schoolName}}

Hello! {{name}}

1.4 pay attention to the point

1.5 Component Nesting

2. VueComponent

{{msg}}

3. Single file component VUE file composition (3 parts)

Composition of 3.1

3.2 Basic Usage

3.3 Writing label names and attribute names

VueComponent Definition and Use – Non-single file component – Single file component – VueComponent

0. The concept of components

1 Non-single file components

1.1 Three steps to using components

1.2 How to define a component

1.3 How Do I Register components

schoolName: {{schoolName}}

Hello! {{name}}

1.4 pay attention to the point

1.5 Component Nesting

2. VueComponent

{{msg}}

3. Single file component VUE file composition (3 parts)

Composition of 3.1

3.2 Basic Usage

3.3 Writing label names and attribute names

Related Posts

The establishment of front-end knowledge system HTTP :(3) advanced HTTP

Flux Redux Context Mobx!

HTML5 final big homework: website design — heavy machinery equipment testing production enterprise official website homepage template (HTML+CSS+JavaScript)