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 值 } } ---------------------- ...
随机推荐
- Hexo+NexT（六）：手把手教你编写一个Hexo过滤器插件
Hexo+NexT介绍到这里,我认为已经可以很好地完成任务了.它所提供的一些基础功能及配置,都已经进行了讲解.你已经可以随心所欲地配置一个自己的博客环境,然后享受码字的乐趣. 把博客托管到Github ...
- 阿里云主机CentOS7设置远程连接MySQL数据库
有一个困扰了我好久的问题,今天终于解决了. 看网上的答案只有一部分.今天把完整的发篇博客纪念一下下. 首先,连接阿里云主机并登录数据库, 1.添加一个Host mysql>select User ...
- 从理论到实践，全方位认识HTTP/2
前言 为了降低加载时间,相信大多数人都做过如下尝试 - Keep-alive: TCP持久连接,增加了TCP连接的复用性,但只有当上一个请求/响应完全 完成后,client才能发送下一个请求 ...
- 【Zookeeper01】ubuntu下安装zookeeper单例以及集群
参考链接:http://zookeeper.apache.org/ https://www.cnblogs.com/lyhc/p/6560993.html 系统: 乌班图16.04 虚拟机(zk一般要 ...
- Map集合的4种遍历方式
import java.util.HashMap;import java.util.Iterator;import java.util.Map; public class TestMap { p ...
- ComboBox过滤
在View层完成数据筛选,无需改变ViewModel层的数据,这样就不必担心在其它地方的使用了. 从路由事件 TextBoxBase.TextChanged 中获取输入的文本,并设置视图的过滤器就可以 ...
- web前端css(三)
一 . 文本属性和字体属性(常用) 1. 文本属性 text-align: left, right, enter, justify(两端对齐,只适用于英文); /*对齐方式*/ color: ...
- Java实现异步调用
一.创建线程 @Test public void test0() throws Exception { System.out.println("main函数开始执行"); Thre ...
- 给即将或刚进入it行业的朋友的参考--体育生转行到Java的经历
首先声明,不喜勿喷我这个历经千辛万苦转入Java行业的人.相信很多正在学校中迷茫和在毕业后对于现状不满意的朋友通过各种的渠道进行信息汇总,了解了软件行业的高工资和多机会,正摩拳擦掌准备在这个领域大干一 ...
- VM虚拟机 VMWare Workstation Pro v15.0.1 中文破解版
虚拟机软件VMware Workstation Pro 15.0 全新版本发布,此次更新了诸多客户机操作系统版本,另外完全兼容Win10创意者更新支持.12.0之后属于大型更新,专门为Win10的安装 ...