（15）打鸡儿教你Vue.js

达达前端

发布于 2019-07-03 11:09:19

8810

发布于 2019-07-03 11:09:19

文章被收录于专栏：达达前端

组件化vue.js

Component Tree

组件单向绑定组件双向绑定组件单次绑定

创建组件构造器注册组件使用组件

Vue.extend()

Vue.component()

使用组件

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

// 创建一个组件构造器
var myComponent = Vue.extend({
 template: '<div>my</div>'
})

// 注册组件
Vue.component('my-component', myComponent)

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

image.png

全局注册和局部注册局部注册的方式：

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">父组件数据</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">子组件数据</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

组件注册语法糖

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

局部注册：

var vm = new Vue({
el: '#app',
components: {
// 局部注册
'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和ap2的分割线--------------- |
|  | <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> |
|  |  |
|  | // 全局注册，my-component1是标签名称 |
|  | 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: { |
|  | // 局部注册，my-component2是标签名称 |
|  | 'my-component2': { |
|  | template: '<div>This is the second component!</div>' |
|  | }, |
|  | // 局部注册，my-component3是标签名称 |
|  | '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>

使用<template>标签

<!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

使用props

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

如果我们想使父组件的数据，则必须先在子组件中定义props属性定义子组件的html模板：

<template id="myComponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
</tr>
<tr>
 <td>my age</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>

image.png

将父组件数据通过已定义好的props属性传递给子组件：

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

在prop中定义的myName，在用作特性时需要转换为my-name

prop的绑定类型单向绑定-修改了子组件的数据，没有影响父组件的数据

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


<template id="myComponent">
 <table>
 <tr>
 <ht colspan="3">子组件数据</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">父组件数据</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">子组件数据</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>

双向绑定使用.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">父组件数据</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">子组件数据</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>

单次绑定：使用.once

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

修改了数据，也不会传导给子组件

 <!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">父组件数据</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">子组件数据</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>