建站免费加盟,企业网站建设网站优化推广,广州工程承包总公司,wordpress调用作者头像什么是:
拥有专属的HTML#xff0c;CSS#xff0c;数据的#xff0c;可重用的页面独立区域 一个页面由多个组件聚合而成一个大型的页面 在代码层面上#xff0c;一个组件就是一个可反复使用的自定义标签。
vs jq插件 vs boot组件
boot插件: 虽然可重用#xff0c;但仍需…什么是:
拥有专属的HTMLCSS数据的可重用的页面独立区域 一个页面由多个组件聚合而成一个大型的页面 在代码层面上一个组件就是一个可反复使用的自定义标签。
vs jq插件 vs boot组件
boot插件: 虽然可重用但仍需要大量工作亲力亲为 且不能绑定数据比如: 轮播图如果图片变化就得改HTML无法根据数据库变化自动动态变化。
为什么:
松散耦合便于重用便于大项目维护便于协作开发
何时:
今后所有页面都是由多个组件组合而成。 凡是重用的必须先定义为组件再使用
如何:
(1)创建一个组件
div idapp...
div
new Vue({el:#app,data: { ... }
})根组件
Vue.component( 组件名 , {template: 一批HTML元素,data: function(){ return {....} },methods:{ },computed: { },watch: { }
} )Vue.component(‘组件名’, {
//组件名推荐写法: xz-counter 用横线分割多个单词不推荐使用驼峰命名 /*data:{ count: 1 }*/ //报错: The “data” option should be a function that returns a per-instance value in component definitions. data: function(){ //强调: 自定义子组件中的data必须是一个函数然后函数返回一个包含子组件模型数据的对象 return { //因为每个组件为了避免在重用时模型数据互相影响就要求必须有自己专属的对象而不是共用同一个对象。 //只有通过函数动态创建{}才能反复创建多个模型数据对象分别服务于各自所属的组件
count: 1}},methods:{add(){this.count; //this指当前组件对象}},watch:{}, computed:{}, template: //组件最终会翻译为普通的html显示html要定义在template中 div //强调: 组件模板中必须只能有一个父级根元素 //如果不加唯一父元素报错: Component template should contain exactly one root element.
button-/buttonspan{{count}}/spanbutton clickadd/button/div
})(2)在视图中使用组件
div idapp组件名/组件名
/div其实: var vmnew Vue({ //也是一个组件而且是整个页面的根组件 el: //只有根组件才能使用el属性来绑定根元素 //其它自定义子组件中都必须使用template属性代替el: //其余以下属性子组件也可使用 data:method: computed:watch:
})模板HTML的写法: 2种:
写在template属性中: 问题: 不符合内容与行为分离的原则不便于编写和维护 无法利用IDE的HTML语法提示写在一个独立的template元素中: ——强烈推荐
