vue教程二 vue组件(2)
每个组件都可以有自己的data、methods、computed和您之前看到的所有内容—就像Vue实例本身一样。
您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象，而组件上的数据属性是一个函数。这是因为您可以在同一个页面上多次使用组件，而且您可能不希望它们共享数据对象
【前端全套视频教程】https://m.tb.cn/h.eR5xKOJ 点击链接，再选择浏览器咑閞；或椱ァ製这段描述￥EgZvYRaMUoS￥后到><
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<custom-button></custom-button> <my-button></my-button>
</div>
<script>
//全局定义组件
Vue.component('my-button',{
template:'<button v-on:click="showNumbers">this is my button {{positiveNumbers}}</button>',
data(){
return {
numbers:[1,-2,3,-4,-5,6]
}
},
computed: {
//获取正数数组
positiveNumbers() {
return this.numbers.filter(function(number){
if(number>0){
return number;
}
});
}
},
methods:{
showNumbers(){
alert(this.numbers);
}
}
}); var app = new Vue({
el: '#app',
data: {
isVisible:true,
} });
</script>
</body>
</html>
vue教程二 vue组件(2)的更多相关文章
- vue教程二 vue组件(3)
给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- vue教程二 vue组件(1)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak
vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span> --& ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
随机推荐
- 数据库读写分离Master-Slave
数据库读写分离Master-Slave 一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢,这时我们需要一些有效的优化手段来提高数据库的执行速度:如SQL优化.表结构优化.索引优化.引擎 ...
- Scala 学习之路（十三）—— 隐式转换和隐式参数
一.隐式转换 1.1 使用隐式转换 隐式转换指的是以implicit关键字声明带有单个参数的转换函数,它将值从一种类型转换为另一种类型,以便使用之前类型所没有的功能.示例如下: // 普通人 clas ...
- wireshark数据包分析实战 第一章
1,数据包分析工具:tcpdump.wireshark.前者是命令行的,后者是图形界面的. 分析过程:收集数据.转换数据(二进制数据转换为可读形式).分析数据.tcpdump不提供分析数据,只将最原始 ...
- 【运维实战】利用tar -g 实现简单全量备份和增量备份（带演示）
备份产生 全量备份指完全备份,增量备份指针对上次至今的修改进行备份.linux提供tar -g可实现备份功能. 第一次运行 tar -g 备份存放目录/snapshot -czvf 备份存放目录/备 ...
- V语言横空出世，C/C++/Java/Python/Go地位不保
V语言已在github正式开源,目前已收获近9000星,引发开发者的强烈关注. V语言到底是怎样一门语言?已经有了C/C++/Java/Python/Go..., 我们还需要另外一门语言吗? 先看看V ...
- python的输入和输出
基本输出 python中的输出使用关键字--print,与python2不同的是,python3的输出后面必须要加括号,示例如下: python3.0以上输出: python2.0以上的输出: 格式化 ...
- feign服务端出异常客户端处理的方法
在使用feign进行远程方法调用时,如果远程服务端方法出现异常,客户端有时需要捕获,并且把异常信息返回给前端,而如果在开启熔断之后,这个异常会被消化,所以说,如果希望拿到服务端异常,feign.hys ...
- 驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案
CCMobile与安卓.IOS集成过程中的问题与解决方案 前言: CCMobile(2019版本)是CCFlow&JFlow 的一款移动端审批的产品.系统基于mui框架开发,是一款可以兼容An ...
- BZOJ 2435：[Noi2011]道路修建（树型DP）
http://www.lydsy.com/JudgeOnline/problem.php?id=2435 题意:中文题意. 思路:很简单的树形DP,sz记录儿子有多少个和cur记录走的哪条弧,然后直接 ...
- 深入学习Spring框架（一）- 入门
1.Spring是什么? Spring是一个JavaEE轻量级的一站式开发框架. JavaEE: 就是用于开发B/S的程序.(企业级) 轻量级:使用最少代码启动框架,然后根据你的需求选择,选择你喜欢的 ...