Vue组件开发、
将不同的功能封装到不同的组件中,再将组件组个起来,实现完整的功能
开发思想
标准 分治 重用 组合
组件化规范Web Components
自定义组件存在的问题
方式不容易
多次使用组件可能会导致冲突
Web Components 是通过创建封装好功能的定制元素解决上述问题 但是目前这个组件没有被浏览器广泛的支持,vue实现了上述规范的部分
组件使用
全局组件注册语法–必须在vue实例对象中的el的使用区域内使用
Vue.component('组件名称',{
data:组件数据,
template: 组件模块内容
})
定义好组件之后用标签的形式进行使用<组件名称></组件名称>
在组件内部,可以定义函数(methods:{}),在template中可以使用methods中的方法,直接写名字就好
组件可以多次使用,并且每个组件的数据都是相互独立的,是互不影响的
组件注册代码示例
<body>
<div id="app">
<button-count></button-count>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('button-count', {
data: function () {
return {
count: 0
}
},
template: '<button @click="countAdd">点击了{{count}}</button>',
methods: {
countAdd: function () {
this.count += 3;
}
}
});
var vm = new Vue({
el: '#app'
})
</script>
</body>
组件的注意事项
- data是一个函数,返回值是一个对象,主要是为了形成一个闭包的环境
- 组件的模板只能包含一个根元素,如果要放多个控件,要用盒子包起来
- 组件模板内容可以是模板字符串,需要浏览器支持以为是es6
- 命名方式 短横线方式和驼峰方式
如果使用驼峰式命名组件,在使用组件的时候们只能在字符串模板中使用驼峰式组件,但是在普通的标签模板中(HTML)必须使用短横线方式使用组件,注意既使定义的时候使用的是驼峰式在使用在HTML中还是可以使用短横线的方式的
局部组件注册
只能在注册他的父组件中使用
是写在vue的实例对象的component属性中的,和全局的写法差不多,但是可以在外面就把对象定义好,再引用
调试工具安装
- 克隆仓库https://github.com/vuejs/vue-devtools
- 安装依赖包 npm install
- 构建 npm run bulid
- 打开Chrome拓展页面
- 选中开发者模式
- 加载已解压的拓展,选择shells/chrome
可以直接在google应用商店直接查找安装