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

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

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

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

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

  比如实现两个按钮,一个喜欢,一个不喜欢,每次点击可以记录次数。当点击按钮时,每个组件会各自独立维护它的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">.

vue之组件理解(一)的更多相关文章

  1. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  4. vue的组件化运用(数据在两个组件互传,小问题总结)

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

  5. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  6. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  7. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  8. vue.js组件(component)

    简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...

  9. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

随机推荐

  1. 歌乐第二弹:C++九九八十一

    第一弹传送门:极乐净土 二话不说,上代码(注意事项在第一弹里): #include <windows.h> //q前缀为低音,g为高音,s前缀为半音阶 const int q1 = 131 ...

  2. javase(11)_juc并发库

    一.传统线程技术 public static void main(String[] args) { Thread thread = new Thread(){ @Override public voi ...

  3. 智能指针之 weak_ptr

    1. weak_ptr 介绍 std::weak_ptr 是一种智能指针,它对被 std::shared_ptr 管理的对象存在非拥有性("弱")引用.在访问所引用的对象指针前必须 ...

  4. 分享一个C++与Python开发的中小型通用游戏服务端框架(跨平台,开源,适合MMORPG游戏)

    在开发一款游戏项目时,在立项时我们往往会考虑或者纠结很多,比如: 1,对于开发来说:服务端和客户端应该选择什么语言?用什么协议通信才更效率?协议后期如何维护?Socket是用长连接还是短连接?TCP还 ...

  5. 牛客练习赛40 C-小A与欧拉路

    求图中最短的欧拉路.题解:因为是一棵树,因此当从某一个节点遍历其子树的时候,如果还没有遍历完整个树,一定还需要再回到这个节点再去遍历其它子树,因此除了从起点到终点之间的路,其它路都被走了两次,而我们要 ...

  6. 【Java_基础】java类加载过程与双亲委派机制

    1.类的加载.连接和初始化 当程序使用某个类时,如果该类还未被加载到内存中,则系统会通过加载.连接.初始化三个步骤来对类进行初始化.如果没有意外,jvm将会连续完成这三个步骤,有时也把这三个步骤统称为 ...

  7. memory bist lib

    model NVIC_REG6T_1024x32(resetb,margin,clk,en,we,addr,d,q) ( bist_definition( clock clk high; chip_e ...

  8. cf891a Pride

    倘若存在 1,那么答案是 \(n-cnt_1\). 否则,设最短的公约数为 1 的区间长度为 \(minlen\),答案是 \(minlen-1+n-1\). #include <iostrea ...

  9. map 插入数据的方式局别

    #include<map> #include<iostream> usingnamespace std; int main() { map <int, int> m ...

  10. 【JavaScript 6—基础知识点】:正则表达式(应用)

    导读:其实,我不像大家一样,从一开始就重视着正则表达式,我甚至都觉得好浪费时间浪费精力,都没用的.因为,如果我要判断是不是为数字,我可以使用Numberic()方法,如果要去空格的话,使用trim() ...