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 值 } } ---------------------- ...
随机推荐
- 报错:java.sql.SQLException: The server
报错:java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized 在IDEA运行是报出例如相识的错误时: ...
- 用arduino制作具有无限数据传输功能的气象站
本项目是用arduino开源硬件,来快速制作具有无限数据传输功能的气象站,我之前做过一个带数据记录功能的气象站项目,这次算是升级和改进的版本. 第1步:构想 首先,需要增加从气象站到室内接收器的无线数 ...
- Python random() 生成随机数
random() 函数中常见的函数如下: #!/usr/bin/python # -*- coding: UTF-8 -*- import random print( random.randint(1 ...
- F#周报2019年第27期
新闻 介绍Femto--使用Fable绑定的自动化npm包解决方案 Babel 7.5.0发布,包含动态导入与F#管道 iOS 13预览版发布 视频及幻灯片 Fabulous--F#用于跨平台移动应用 ...
- 【算法•日更•第六期】头脑风暴：洛谷P1528 切蛋糕题解
▎(一个没有用处的)前言 为什么这次题解特意写明题号呢?因为我发现了这样的事情: 所以不要混了,想看P1714题解的同志们可以圆润的滚开了. 好了,不说没用的了,切入正题: ▎题目 题目及测评链接:戳 ...
- CentOS 网络互通情况下把一个Linux服务器的文件发送到另一个服务器
scp -r 文件名/目录名 root@192.168.2.144:/home/hsw -r 发送目录使用,表示把该目录下的所有子目录以及文件发送过去
- python数据库-MySQL查询基本操作(50)
一.条件查询 1.使用where子句对表中的数据筛选,结果为true的行会出现在结果集中 select * from 表名 where 条件; 2.比较运算符 等于= 大于> 大于等于>= ...
- 为什么Python 3.6以后字典有序并且效率更高？
在Python 3.5(含)以前,字典是不能保证顺序的,键值对A先插入字典,键值对B后插入字典,但是当你打印字典的Keys列表时,你会发现B可能在A的前面. 但是从Python 3.6开始,字典是变成 ...
- 嵊州D1T1 总统先生，一路走好！
嵊州D1T1 总统先生,一路走好! 在总统先生的所有财产就是 n 杯黑咖啡,咖啡店可以用 m 个空杯子换一杯黑咖啡. 因为总统的特殊身份,心地善良而心生怜悯的咖啡店店长决定先借给总统一杯黑咖啡,只要他 ...
- 关于在记事本写入"\n"不显示换行的原因
Linux系统下直接使用 "\n" 即可换行 windows下需要使用 "\r\n"