vue之组件理解（一）

　　组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

　　其中，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

data: function () {return {count: 0}
}

　　使用组件为了更好的复用，相当于自定义标签，你可以进行任意次数的复用。

　　首先要明确自己组件的功能

　　比如实现两个按钮，一个喜欢，一个不喜欢，每次点击可以记录次数。当点击按钮时，每个组件会各自独立维护它的count，每使用一个组件都会有一个新的实例被创建。

// 调用button组件
<hello-world heading="Likes" color="green"></hello-world>
<hello-world heading="Dislikes" color="red"></hello-world>

<template id="button-component">
<div id="box"><h1>{{ heading }}</h1><button @click="count += 1" :class="color">{{ count }}</button>
</div>
</template><script>export default {name: "button-component",props:['heading','color'],data:function () {return{count:0}}}
</script><style scoped>button{width: 50px;height: 30px;border-radius: 5px;}
.green{background:green;
}.red{background: red;}
</style>

出现的问题：对于直接绑定改变style的background值，

style="background: {{ color }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

转载于:https://www.cnblogs.com/songForU/p/10511909.html

vue之组件理解（一）相关推荐

iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
理解Vue递归组件，实现Tree树形控件实例~
思考了两天时间,准备仿照ant-design-vue实现一个基于vue的树形控件.主要用到了vue递归组件思想.input的CheckBox类型输入框的使用. 需求能够将传入的Json数据生成树形目 ...
快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值  ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...

vue之组件理解（一）

vue之组件理解（一）相关推荐

最新文章

热门文章