(15) playing chicken teaches you Vue.js

Componentized vue.js

Component Tree

One way binding of components
Component two-way binding
Single binding of components

Create component builder
Registration component
Use components

Vue.extend()

Vue.component()

Use components

<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>

// Create a component constructor
var myComponent = Vue.extend({
 template: '<div>my</div>'
})

// Registration component
Vue.component('my-component', myComponent)

new Vue({
el: '#app'
});
image.png

Global and local registration
Local registration method:

new Vue({
el: '#app',
components: {
 'my-component' : myComponent
}
});
image.png
|  | <!DOCTYPE html> |
|  | <html> |
|  | 
 |
|  | <head> |
|  | <meta charset="UTF-8"> |
|  | <title></title> |
|  | <link rel="stylesheet" href="[styles/demo.css](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/styles/demo.css)" /> |
|  | </head> |
|  | 
 |
|  | <body> |
|  | 
 |
|  | <div id="app"> |
|  | 
 |
|  | <table> |
|  | <tr> |
|  | <th colspan="3">Parent component data</td> |
|  | </tr> |
|  | <tr> |
|  | <td>name</td> |
|  | <td>{{ name }}</td> |
|  | <td><input type="text" v-model="name" /></td> |
|  | </tr> |
|  | <tr> |
|  | <td>age</td> |
|  | <td>{{ age }}</td> |
|  | <td><input type="text" v-model="age" /></td> |
|  | </tr> |
|  | </table> |
|  | <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> |
|  | </div> |
|  | 
 |
|  | <template id="myComponent"> |
|  | <table> |
|  | <tr> |
|  | <th colspan="3">Subcomponent data</td> |
|  | </tr> |
|  | <tr> |
|  | <td>my name</td> |
|  | <td>{{ myName }}</td> |
|  | <td><input type="text" v-model="myName" /></td> |
|  | </tr> |
|  | <tr> |
|  | <td>my age</td> |
|  | <td>{{ myAge }}</td> |
|  | <td><input type="text" v-model="myAge" /></td> |
|  | </tr> |
|  | </table> |
|  | </template> |
|  | </body> |
|  | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
|  | <script> |
|  | var vm = new Vue({ |
|  | el: '#app', |
|  | data: { |
|  | name: 'keepfool', |
|  | age: 28 |
|  | }, |
|  | components: { |
|  | 'my-component': { |
|  | template: '#myComponent', |
|  | props: ['myName', 'myAge'] |
|  | } |
|  | } |
|  | }) |
|  | </script> |
|  | 
 |
|  | </html> |
image.png

Component registration syntax sugar

Vue.component()
// Global registration:
Vue.component('my-component', {
 template: '<div>this is the first component!</div>'
})
var vm1=new Vue({
el: '#app'
})

Partial registration:

var vm = new Vue({
el: '#app',
components: {
// Partial registration
'my-component': {
template: '<div></div>'
},
}
})
| <!DOCTYPE html> |
|  | <html> |
|  | <head> |
|  | <meta charset="UTF-8"> |
|  | <title></title> |
|  | </head> |
|  | <body> |
|  | <div id="app1"> |
|  | <my-component1></my-component1> |
|  | </div> |
|  | ---------------app1 and ap2 Dividing line--------------- |
|  | <div id="app2"> |
|  | <my-component1></my-component1> |
|  | <my-component2></my-component2> |
|  | <my-component3></my-component3> |
|  | </div> |
|  | </body> |
|  | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
|  | <script> |
|  |  |
|  | // Global registration, my-component1 is the label name|
|  | Vue.component('my-component1',{ |
|  | template: '<div>This is the first component!</div>' |
|  | }) |
|  |  |
|  | var vm1 = new Vue({ |
|  | el: '#app1' |
|  | }) |
|  |  |
|  | var vm2 = new Vue({ |
|  | el: '#app2', |
|  | components: { |
|  | // Local registration, my-component2 is the label name|
|  | 'my-component2': { |
|  | template: '<div>This is the second component!</div>' |
|  | }, |
|  | // Local registration, my-component3 is the label name|
|  | 'my-component3': { |
|  | template: '<div>This is the third component!</div>' |
|  | } |
|  | } |
|  | }) |
|  |  |
|  | </script> |
|  | </html> |
|  |
image.png
<!DOCTYPE html>
<html>

<body>

<div id="app">
<my-component></my-component>
</div>

<script type="text/x-template" id="myComponent">
<div>this is a component</div>
</script>

</body>

<script src="js/vue.js"></script>

<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>

</html>

Use < template > tags

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<div id="app">
 <my-component></my-component>
</div>

<template id="myComponent">
<div>this is a component</div>
</template>

</body>

<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})

new Vue({
el: '#app'
})
</script>
</html>
image.png
image.png

Using props

var vm = new Vue({
el: '#app',
data: {
 name: 'jeskson',
 age: 0
},
components: {
 'my-component': {
  template: '#myComponent',
  props: ['myName', 'myAge']
 }
}
})

If we want the data of the parent component, we must first define props attribute in the child component.
Define the html template of the subcomponent:

<template id="myComponent">
<table>
<tr>
<th colspan="2">
Subcomponent data
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
</tr>
<tr>
 <td>my age</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>
image.png

Pass the parent component data to the child component through the defined props attribute:

<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

My name defined in prop needs to be converted to my name when used as an attribute

Binding type of prop
One way binding - modifies the data of the child component without affecting the data of the parent component

<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component">


<template id="myComponent">
 <table>
 <tr>
 <ht colspan="3">Subcomponent data</td>
 </tr>
 <tr>
 <td>my name</td>
 <td>{{ myName}}</td>
 <td><input type="text" v-model="myName"/></td>
  
 <tr>
 <td>my age</td>
 <td>{{myAge}}</td>
 <td><input type="text" v-model="myAge"/></td>
 </tr>
 
 </table>
</template>
image.png
<!DOCTYPE html> 
 <html> 
 
  <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="styles/demo.css" /> 
 </head> 
 
  <body> 
 
  <div id="app"> 
 
  <table> 
 <tr> 
 <th colspan="3">Parent component data</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>{{ name }}</td> 
 <td><input type="text" v-model="name" /></td> 
 </tr> 
 <tr> 
 <td>age</td> 
 <td>{{ age }}</td> 
 <td><input type="text" v-model="age" /></td> 
 </tr> 
 </table> 
 <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> 
 </div> 
 
  <template id="myComponent"> 
 <table> 
 <tr> 
 <th colspan="3">Subcomponent data</td> 
 </tr> 
 <tr> 
 <td>my name</td> 
 <td>{{ myName }}</td> 
 <td><input type="text" v-model="myName" /></td> 
 </tr> 
 <tr> 
 <td>my age</td> 
 <td>{{ myAge }}</td> 
 <td><input type="text" v-model="myAge" /></td> 
 </tr> 
 </table> 
 </template> 
 </body> 
 <script src="js/vue.js"></script> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 name: 'keepfool', 
 age: 28 
 }, 
 components: { 
 'my-component': { 
 template: '#myComponent', 
 props: ['myName', 'myAge'] 
 } 
 } 
 }) 
 </script> 
 
  </html> 

Bidirectional binding
Using.sync

<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
image.png
 <!DOCTYPE html> 
 <html> 
 
  <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="styles/demo.css" /> 
 </head> 
 
  <body> 
 
  <div id="app"> 
 
  <table> 
 <tr> 
 <th colspan="3">Parent component data</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>{{ name }}</td> 
 <td><input type="text" v-model="name" /></td> 
 </tr> 
 <tr> 
 <td>age</td> 
 <td>{{ age }}</td> 
 <td><input type="text" v-model="age" /></td> 
 </tr> 
 </table> 
 
  <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component> 
 </div> 
 
  <template id="myComponent"> 
 <table> 
 <tr> 
 <th colspan="3">Subcomponent data</td> 
 </tr> 
 <tr> 
 <td>my name</td> 
 <td>{{ myName }}</td> 
 <td><input type="text" v-model="myName" /></td> 
 </tr> 
 <tr> 
 <td>my age</td> 
 <td>{{ myAge }}</td> 
 <td><input type="text" v-model="myAge" /></td> 
 </tr> 
 </table> 
 </template> 
 </body> 
 <script src="js/vue.js"></script> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 name: 'keepfool', 
 age: 28 
 }, 
 components: { 
 'my-component': { 
 template: '#myComponent', 
 props: ['myName', 'myAge'] 
 } 
 } 
 }) 
 </script> 
 
  </html> 

Single bind:
Using.once

<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

Modified data will not be transmitted to sub components

 <!DOCTYPE html> 
 <html> 
 
  <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="styles/demo.css" /> 
 </head> 
 
  <body> 
 
  <div id="app"> 
 
  <table> 
 <tr> 
 <th colspan="3">Parent component data</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>{{ name }}</td> 
 <td><input type="text" v-model="name" /></td> 
 </tr> 
 <tr> 
 <td>age</td> 
 <td>{{ age }}</td> 
 <td><input type="text" v-model="age" /></td> 
 </tr> 
 </table> 
 
  <my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component> 
 </div> 
 
  <template id="myComponent"> 
 <table> 
 <tr> 
 <th colspan="3">Subcomponent data</td> 
 </tr> 
 <tr> 
 <td>my name</td> 
 <td>{{ myName }}</td> 
 <td><input type="text" v-model="myName" /></td> 
 </tr> 
 <tr> 
 <td>my age</td> 
 <td>{{ myAge }}</td> 
 <td><input type="text" v-model="myAge" /></td> 
 </tr> 
 </table> 
 </template> 
 </body> 
 <script src="js/vue.js"></script> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 name: 'keepfool', 
 age: 28 
 }, 
 components: { 
 'my-component': { 
 template: '#myComponent', 
 props: ['myName', 'myAge'] 
 } 
 } 
 }) 
 </script> 
 
  </html> 
image.png

image.png

image.png

Please praise! Because your encouragement is the biggest driving force of my writing!

Official WeChat public address

Forced communication group: 711613774

Push communication group

Tags: Vue github Attribute

Posted on Fri, 01 Nov 2019 13:28:41 -0700 by inquisitive