Creation and switching of vue components

Catalog

How to create a component 1

How to create components2

How to create a component 3

data and methods in components

Component switching - mode 1

Component switching mode 2

Component switch - switch animation (including effect demonstration)

 

How to create a component 1

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- If you want to use a component, put the name of the component directly to HTML The form of label can be introduced into the page -->
      <!-- <my-com1></my-com1> -->
      <mycom1></mycom1>
    </div>

    <script>
      // 1.1 use Vue.extend to create a global Vue component template object, and specify the HTML content to be displayed by the component through the template attribute
      // var com1 = Vue.extend({
      //  Template: '< H3 > this is a component created with Vue.extend < / H3 >'
      // })

      // 1.2 use Vue.component('name of component ', created component template object) to define components
      // Vue.component('myCom1', com1)
      // <my-com1></my-com1>
      // When using Vue.component to define a global component, if the component name uses the hump name, when referencing the component, you need to change the upper case hump to the lower case letter, and at the same time, before two words, use - connect;
      // If the hump is not used, the name can be used directly;
      // Vue.component('mycom1', com1)

      // Simplified method 1:
      // Vue.component first parameter: name of component
      // The second parameter: the component created by Vue.extend
      Vue.component('mycom1', Vue.extend({
        template: '<h3>This is used. Vue.extend Components created</h3>'
      }))

      var vm = new Vue({
        el: '#app'
      });
    </script>
  </body>

</html>

Be careful:

Use Vue.component('name of component ', created component template object) to define global components, such as Vue.component('myCom1', com1)
When using Vue.component to define the global component, if the component name uses the hump name, when referencing the component, you need to change the upper case hump to the lower case letter. At the same time, before two words, use - connection, such as < my-com1 > < my-com1 >
If the hump is not used, just use the name, such as Vue.component('mycom1', com1)

What is a global component? What are local components?

If you define a global component, you can create many vue objects, such as vm1, vm2, vm3... You can use this global component in them

But if you define a local component, that is, the component you defined in your vue object instance vm1, you cannot use this component in vm2, vm3, etc

vue.extend is to declare global template, vue.component is to define global component

 

How to create components2

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- Use label form,Introduce your own components -->
      <mycom2></mycom2>
    </div>

    <script>
      // Note: no matter which way the component is created, the template content pointed to by the template attribute of the component must have only one root element
      // Simplified mode 2:
      Vue.component('mycom2', {
        template: '<div><h3>This is a direct use Vue.component Components created</h3><span>123</span></div>'
      })

      var vm = new Vue({
        el: '#app'
      });
    </script>
  </body>

</html>

Be careful:

No matter which way the component is created, the template content pointed to by the template attribute of the component must have only one root element, which is generally written as < div > < div >. If there are two divs, an error will be reported.

For example, template: '< div > < H3 > this is a component created directly by using Vue.component < / H3 > < span > 123 < / span > < div > < div > this must report an error < / div >'

 

How to create a component 3

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <mycom3></mycom3>
      <!-- <login></login> -->
    </div>

    <hr>

    <div id="app2">
      <mycom3></mycom3>
      <login></login>
    </div>

    <!-- Under control #Outside the app, use the template element to define the HTML template structure of the component -- >
    <template id="tmpl">
      <div>
        <h1>This is through template element,Component structure defined externally,This way,Only prompt and highlight the code</h1>
        <h4>Easy to use,Pretty good!</h4>
      </div>
    </template>

    <template id="tmpl2">
      <h1>This is private login assembly</h1>
    </template>

    <script>
      Vue.component('mycom3', {
        template: '#tmpl '/ / load the template with id tmp1
      })

      var vm = new Vue({
        el: '#app'
      });

      var vm2 = new Vue({
        el: '#app2',
        components: { // Defining the (local component) of a private component within an instance
          login: {
            template: '#tmpl2'
          }
        }
      })
    </script>
  </body>

</html>

Don't explain too much here, just read it

 

data and methods in components

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <mycom1></mycom1>
    </div>

    <script>
      // 1. Components can have their own data
      // 2. The data of the component is a little different from that of the instance. The data in the instance can be an object, but the data in the component must be a method
      // 3. In addition to a method, the data in the component must return an object;
      // 4. The data data in the component is used in the same way as the data in the instance!!!
      Vue.component('mycom1', {
        template: '<h1>This is a global component --- {{msg}}</h1>',
        data: function () {
          return {
            msg: 'I am in the component data Defined data'
          }
        }
      })

      var vm = new Vue({
        el: '#app'
      });
    </script>
  </body>

</html>

It should be noted that

1. Components can have their own data
2. The data of the component is a little different from that of the instance. The data in the instance can be an object, but the data in the component must be a method

This is that after we apply Vue to engineering, we will separate the Vue components, such as A.vue, and then in your main view (assuming login.vue), we will use < script >

import  A from '.\A.vue'

</script>

In A.vue, you will export the default {....} which is an object. Data can only be written as data(){return {....}} (this is the data in the Vue component), not as data: {....} (this is the data of the Vue instance)
3. In addition to a method, the data in the component must return an object;
4. The data data in the component is used in the same way as the data in the instance!!!

 

 

Component switching - mode 1

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <a href="" @click.prevent="flag=true">Sign in</a>
      <a href="" @click.prevent="flag=false">register</a>

      <login v-if="flag"></login>
      <register v-else></register>
    </div>

    <script>
      // Define two components
      Vue.component('login', {
        template: '<h3>Login component</h3>'
      })
      Vue.component('register', {
        template: '<h3>Registration component</h3>'
      })

      // Create Vue instance
      var vm = new Vue({
        el: '#app',
        data: {
          flag: false
        }
      });
    </script>
  </body>

</html>

Be careful:

Considering that this section is about components, we will not discuss the implementation of routing.

flag is used to control the switching between login and register components

 

 

Component switching mode 2

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <a href="" @click.prevent="comName='login'">Sign in</a>
      <a href="" @click.prevent="comName='register'">register</a>

      <!-- Vue Provided component ,To show the component with the corresponding name -->
      <!-- component Is a placeholder, :is attribute,Can be used to specify the name of the component to display -->
      <component :is="comName"></component>
    </div>

    <script>
      // Component name is a string
      Vue.component('login', {
        template: '<h3>Login component</h3>'
      })

      Vue.component('register', {
        template: '<h3>Registration component</h3>'
      })

      // Create Vue instance to get ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          comName: 'login' // Name of: is bound component in current component
        }
      });
    </script>
  </body>

</html>

Be careful:

This is very similar to the above example. By controlling comName, you can control whether it is "login" or "register" to control the switching component

Dynamic component < component: is = "comName" >, which can include the name of registered component or the option object of a component. Here is the former.

The official website explains < component: is = "..." > as follows:

Dynamic components

 

 

Component switch - switch animation (including effect demonstration)

Can't vue animation (let me see) The effect of this example is as follows:

The code is as follows:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
      }

      .v-enter-active,
      .v-leave-active {
        transition: all 0.3s ease;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <a href="" @click.prevent="comName='login'">Sign in</a>
      <a href="" @click.prevent="comName='register'">register</a>

      <!-- adopt transition Of mode Property to set the mode of component switching -->
      <transition mode="out-in">
        <component :is="comName"></component>
      </transition>

    </div>

    <script>
      // Component name is a string
      Vue.component('login', {
        template: '<h3>Login component</h3>'
      })
      Vue.component('register', {
        template: '<h3>Registration component</h3>'
      })

      // Create Vue instance to get ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          comName: 'login' // In the initial component: is the name of the bound component
        }
      });
    </script>
  </body>

</html>

Annotation:

Here is the last example with vue animation, there is not much to explain

 

 

===============Talk is cheap, show me the code================

208 original articles published, 342 praised, 890000 visitors+
His message board follow

Tags: Vue IE Attribute

Posted on Sun, 12 Jan 2020 00:48:30 -0500 by freenity