vue.js 组件的作用: 拆分功能, 便于复用.
组件化与模块化的区别:
模块化: 从代码逻辑的角度进行划分, 每个功能模块的职能单一
组件化: 从 UI 界面的角度进行划分, 便于 UI 的复用
一个页面的 ui 可以切割成由不同的组件构成, 这些组件毕竟独立, 这样拆分的好处在于可以做到如同堆积木般快速将页面搭建及重构
全局定义组件
使用 vue.extend 配合 Vue.component 方法
创建组件
- Vue.component('test-component', Vue.extend({ template: '<h3 class="text-center text-success"> 这是一个由 Vue.extend 创建的组件 </h3>'
- }));
页面中引用组件
- <div id="app">
- <test-component></test-component>
- </div>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/25.html
组件
直接使用 Vue.component
- Vue.component('test-component', {
- template: '<h3 class="text-center text-danger"> 这是一个由 Vue.component 创建出来的组件 </h3>'
- });
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/26.html
使用 template 标签定义组件
定义两个组件
- <template id="tmp1">
- <h3 class="text-center text-warning"> 这是通过 template 元素定义的组件结构, 这是一个全局组件, 可用于各个 vue 实例中 </h3>
- </template>
- <template id="tmp2">
- <h3 class="text-center text-info"> 这是一个私有的组件, 只能用于特定的 vue 实例 </h3>
- </template>
将两个组件分别定义为全局组件和局部私有组件
全局组件
- Vue.component('test-component', {
- template: '#tmp1'
- });
局部组件
- let vm2 = new Vue({
- el: "#app2",
- data: {},
- components: { // 定义私有组件
- 'private-component': {
- template: "#tmp2"
- }
- }
- })
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/27.html
全局组件与局部组件
组件中定义数据
定义数据
- Vue.component('test', {
- template: '#tmp',
- data: function () { // 必须用 function 返回一个对象
- return {
- msg: '我是组件中 data 定义的数组, 我狂得很'
- }
- }
- });
显示数据
- <template id="tmp">
- <h3 class="text-center text-success">{{ msg }}</h3>
- </template>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/28.html
组件定义数据
案例: 制作一个计数器
计数器组件的功能
- Vue.component('counter', {
- template: '#tmp',
- data: function () {
- return { count: 0}
- },
- methods: {
- increment() {
- this.count++;
- }
- }
- });
计数器样式
- <template id="tmp">
- <div>
- <button class="btn btn-success" @click="increment"> 计数器 </button>
- <h3>{{ count }}</h3>
- </div>
- </template>
多次调用计数器
- <div id="app">
- <counter></counter>
- <counter></counter>
- <counter></counter>
- </div>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/29.html
计数器. gif
来源: http://www.jianshu.com/p/3e39f8c33cf3