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 值 } } ---------------------- ...
随机推荐
- Netty源码分析--创建Channel（三）
恩~,没错,其实这一篇才是真正的开始分析源码,你打我呀~. 先看一下我Netty的启动类 private void start() throws Exception { EventLoopGroup ...
- ajax中error函数参数与返回值详解 200 300 400 500
201-206:都表示服务器成功处理了请求的状态代码,说明网页可以正常访问. 200:(成功) 服务器已成功处理了请求.通常,这表示服务器提供了请求的网页. 201:(已创建) 请求成功且服务器已创建 ...
- LR编写Socket脚本方法1(XML/16进制报文data.ws格式)
本文主要讲述了Socket协议脚本的基础知识和编写方法,让大家能够在短时间内快速掌握简单的Socket协议脚本的编写方法.1.socket协议介绍Socket协议有万能协议之称,很多系统底层都是用的s ...
- node.js的异步I/O、事件驱动、单线程
nodejs的特点总共有以下几点 异步I/O(非阻塞I/O) 事件驱动 单线程 擅长I/O密集型,不擅长CPU密集型 高并发 下面是一道很经典的面试题,描述了node的整体运行机制,相信很多人都碰到了 ...
- Programming In Lua 第六章
1, 2, 3,
- python 基本数据类型之字符串功能
字符串常用功能: # name.upper() #全部大写变小写 # name.lower() #全部小写变大写 # name.split() #分割 # name.find() #找到指定子序列的索 ...
- Java并发框架:Executor
介绍 随着当今处理器中可用的核心数量的增加, 随着对实现更高吞吐量的需求的不断增长,多线程 API 变得非常流行. Java 提供了自己的多线程框架,称为 Executor 框架. 1. Execut ...
- Linux使用httpd配置反代理
Linux安装httpd请看上一篇:https://www.cnblogs.com/tuituji27/p/11189095.html 首先,httpd默认监听端口号是80,增加或修改代理的端口号的文 ...
- SQL Server 根据日期分组、 根据时间段分组（每三个小时一组）
所用数据表: 一.根据日期分组 1. 使用convert() 函数方式 --根据年月 ),CreatTime,)日期,COUNT(*) 次数,sum(Money)总数 from Orders ),Cr ...
- C# 收集几条ToString()格式
.ToString("C");//￥1,200.00 .ToString("D3");//025 string r3 = 2500.1231.ToString( ...