This is the 8th day of my participation in the More text Challenge. For details, see more text Challenge
Components in Vue
The soul of the Vue view layer – componentization
Component is one of the most powerful features of vue.js;
Components can extend HTML elements to encapsulate reusable code;
At a higher level, a component is a custom element to which the vue.js compiler adds special functionality. In some cases, components can also be in the form of native HTML elements, extended with the IS feature.
Create and register global components
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
var Profile = Vue.extend({
template:' Custom component
'
})
Vue.component('my-component',Profile);
new Vue({
el:'#app'
})
new Vue({
el:'#app1'
})
</script>
</body>
</html>
Copy the codeA call to vue.extend () creates a component constructor with an option object whose Template property defines the HTML to be rendered by the component
When you call Vue.component() to register a component, you need to provide two parameters: the tag name of the component and the component constructor; A registered component does not take effect unless it is mounted to a Vue instance.
Vue.extend() and Vue.component() : Since Vue is itself a constructor, vue.extend () is a class inheritance method that creates a subclass of Vue and returns its constructor;
Vue.component() establishes the relationship between the specified constructor and the ID string so that vue.js can use it in the template. When options are passed directly to Vue.component(), it calls vue.extend () internally.
Creation and registration of local components
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
var Profile = Vue.extend({
template:' Local component
'
})
new Vue({
el:'#app'.components: {'my-compoent':Profile
}
})
new Vue({
el:'#app1'
})
</script>
</body>
</html>
Copy the codeAnother way to create and register components
Use Vue.com Ponent to register or obtain global components in the following ways:
// Register the component, passing in an extended constructor
Vue.component(‘my-component’, Vue.extend({ /* … */ }))
// Register the component, passing in an option object (automatically calling vue.extend)
Vue.component(‘my-component’, { /* … */ })
// Get the registered component (always return constructor)
var MyComponent = Vue.component(‘my-component’)
4.1 Customizing Global Components
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component', {template:' Custom global component
'
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
Copy the code4.2 Customizing Local Components
<! doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component1></my-component1>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component', {template:' Custom global component
'
})
Vue.component('my-component1', {template:' Custom global component
'
})
new Vue({
el:'#app'.components: {'my-component1': {template:' Custom Global Component 1
'
},
'my-component1': {template:' Custom Global Component 2
'}}})</script>
</body>
</html>
Copy the codeFive, father and son components
Components are meant to work together, usually in such A parent-child relationship that component A uses Component B in its template.
Simplest parent-child components:
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent-component></parent-component>
<parent-component1></parent-component1>
</div>
<script src="js/vue.js"></script>
<script>
/ / child component
var Child = Vue.extend({
template:'<img src="img/a.jpg">'
})
/ / the parent component
var Parent = Vue.extend({
template:Child - component '< div > < > < / child - component > < p > this is a very nice little sister < / p > < / div >'
components: {'child-compoent':Child
}
})
Vue.compoent('parent-compoent',Parent)
new Vue({
el:'#app'
})
</script>
</body>
</html>
Copy the codeNote the following issues when using parent-child components together:
Uninstantiated child components cannot be used alone!
<div id="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
Copy the codeNest child tags inside parent tags!
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
Copy the codeAs soon as the parent tag generates the real DOM, its inner child tags are parsed into normal HTML tags for execution, and are not standard HTML tags, which are filtered out by the browser.
Bind classes and styles to components
A common requirement for data binding is a list of classes to manipulate an element and its inline style. Because they are all attributes, we can handle them with V-bind: we just need to evaluate the final string of the expression.
Furthermore, when v-bind is used for class and style, the result type of the expression can be an object or array in addition to a string.
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component :calss="{'active':isActive}"></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.compoent('my-compoent', {template:'
I'm starm,
'
})
new Vue({
el:'#app'.data: {isActive:true}})</script>
</body>
</html>
Copy the codeTemplate and script tags
Despite the simplicity of component registration in the above component, concatenating HTML tags in the Template option is not normal programming practice, and the mixing of HTML elements and JS code creates a lot of coupling.
So, the Template and script tags help us separate out the HTML templates defined in JS.
Note: both registration methods have the same effect, the official recommendation is to use the first one.
(1) Register a component with the Template tag:
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
<template id="myComponent">Custom Templates</template>
</div>
<script src="js/vue.js"></script>
<script>
Vue.compoent('my-compoent', {template:'#myComponent'
})
new Vue({
el:'#app',})</script>
</body>
</html>
Copy the code(2) Register components with script tags:
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
<script type="text/x-template" id="myCompoent"></script>
</div>
<script src="js/vue.js"></script>
<script>
Vue.compoent('my-compoent', {template:'#myComponent'
})
new Vue({
el:'#app',})</script>
</body>
</html>
Copy the codeNote: When using the
The mount option data must be a function
When using a component, most of the options that can be passed into the Vue constructor can be used when registering the component in vue.extend () or Vue.component(), with one important prerequisite: Data must be a function.
Vue.component('my-component', {
template: '#myTemplate'.data: function () {
return {
message: 'Hello China'}}})Copy the code