vue之组件理解(一)
组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 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之组件理解(一)的更多相关文章
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue的组件化运用(数据在两个组件互传,小问题总结)
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- vue.js组件(component)
简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...
- 沉淀,再出发:VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
随机推荐
- HTML5 Geolocation(地理位置)
HTML5 Geolocation(地理位置).是用来定位用户的位置的. HTML5 Geolocation API 用于获得用户的地理位置,鉴于该特性可能侵犯用户的隐私权,除非用户同意,否则不能获取 ...
- iOS Crash
常见原因及解决方法: 1. 访问数组类对象越界或插入了空对象NSMutableArray/NSMutableDictionary/NSMutableSet 等类下标越界,或者 insert 了一个 n ...
- ios之自定义UINavigationBar
ios5 自定义导航条问题 在ios5之前的系统中,可以通过定义导航条类别的方式自定义导航条: @implementation UINavigationBar (CustomImage)- (void ...
- ABAQUS用户子程序一览表
说明 ABAQUS用户子程序一览表 ABAQUSStandard subroutines Refence 说明 本系列文章本人基本没有原创贡献,都是在学习过程中找到的相关书籍和教程相关内容的汇总和梳理 ...
- UVa-12096-集合栈计算机
这题的话,我们读入操作之后,首先对于空集就是初始化为空. 我们可以使用typedef 对于 set 重命名为Set,这样就可以直接用Set()的语法进行空集的初始化了. 这题主要是对于集合的处理,我们 ...
- 【linux】 【网络】【转发】服务器版自定义安装无法有线上网问题
- Python、机器学习、计算机视觉、深度学习入门
1.简明Python教程 2.Python计算机视觉编程 3.机器学习实践 4.吴恩达机器学习 5.李飞飞深度学习与计算机视觉
- python基础学习笔记——迭代器
我们之前一直在用可迭代对象进行操作,那么到底什么是可迭代对象.我们现在就来讨论讨论可迭代对象.首先我们先回顾下我们 熟知的可迭代对象有哪些: str list tuple dic set ...
- centos 装 jdk
1.源码包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jdk7- downloads-1880260. ...
- js根据银行卡号判断属于哪个银行,并返回银行缩写及银行卡类型
在做绑定银行卡,输入银行卡的时候,产品有这么一个需求,需要用户输入银行卡号的时候,显示对应的银行卡名称及简称.于是苦苦寻觅,终于找到了支付宝的开放API,银行卡校验接口 https://ccdca ...