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 值 } } ---------------------- ...
随机推荐
- C++模板的理解与使用
最近发现原来学的东西根本都不理解,所以本人正在恶补C++,把自己对C++中概念的最简单粗暴的理解写下来. 有问题的地方还请指出~随时更正 模板:顾名思义,就是为了方便以后使用而出现的东西,生活中的模板 ...
- happy machine learning(Second One)
发现机器学习就根本停不下来 今天来用RNN算法来爽爽僵尸网络宿主预测 首先我们下载好数据,然后打开我们可爱的熊猫 import numpy as np import pandas as pd impo ...
- CentOS7.x mini安装OVS
命令均在root用户下运行: 一.关闭防护墙及selinux sed -i '/SELINUX/s/enforcing/disabled/g' /etc/selinux/config setenfor ...
- 丢给你一个txt并同时获取你shell
丢给你一个txt并同时获取你shell 0x00:回顾 <文本编辑器Vim/Neovim被曝任意代码执行漏洞> 听闻很多人知道这个漏洞,但是有一部分人能复现成功,一部分人复现不出来.这里我 ...
- Programming In Lua 第五章
1, 2, 3, 4, 5, 6, 7, 8, 9, 第9点非常重点. 10,
- JavaScript 之有趣的函数（函数声明、调用、预解析、作用域）
前言:“函数是对象,函数名是指针.”,函数名仅仅是指向函数的指针,与其他包含函数指针的变量没有什么区别,话句话说,一个函数可能有多个名字. -1.函数声明,function+函数名称.调用方法:函数名 ...
- Visual Studio中View页面与Js页面用快捷键互相跳转
现在已经将源码放到GitHub中了 地址是 https://github.com/liningit/ViewJsLN 公司开发的项目使用的是Mvc框架,且Js与View页面是分开在两个文件夹下的,所以 ...
- mysql的数据存储
# pycharm 连接mysql import pymysql username = input("输入用户名:") pwd = input("输入密码:") ...
- spring boot admin抛出"status":401,"error":"Unauthorized"异常
打开spring boot admin的监控平台发现其监控的服务明细打开均抛出异常: Error: {"timestamp":1502749349892,"status& ...
- 计算机组成原理第五章（中央处理器CPU）
---恢复内容开始--- 指令周期(取指令.分析指令到执行完该指令所需的全部时间) 机器周期通常又称CPU周期 通常把一条指令周期分成若干个机器周期,每个机器周期完成一个基本操作 以主存的工作周期(存 ...