VUE组件相关总结！
定义使用一个组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>Document</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
{{msg}}
<h3>账号</h3>
<h3>密码</h3>
<button @click="login">登录</button>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
// 组件的数据
data:function(){
return{
msg:"hello"
}
},
// 组件的方法
methods:{
login:function(){
console.log("执行登录");
}
}
});
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return { }
},
// 方法
methods:{ }
})
</script>
</body>
</html>
父组件传值到子组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>父组件传值给子组件</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
<h1>组件:{{name1}}</h1>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1 :name1="name"></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
// 接收数据
props:{
name1:String //文本用String 数字用Number
} });
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return {
name:"小明"
}
},
// 方法
methods:{ }
})
</script>
</body>
</html>
子组件传值到父组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>子组件传值给父组件</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
<h1 @click="sendData">发送数据</h1>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1 v-on:send="getData"></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
methods:{
sendData(input){
this.$emit('send',);
}
} });
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return { }
},
methods:{
getData(input){
console.log(input);
}
}
})
</script>
</body>
</html>
VUE组件相关总结！的更多相关文章
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件库的那些事儿，你都知道吗？
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
随机推荐
- 数据库优化之SQL语句优化-记录
1. 操作符优化 (a) IN 操作符 从Oracle执行的步骤来分析用IN的SQL与不用IN的SQL有以下区别: ORACLE试图将其转换成多个表的连接,如果转换不成功则先执行IN里面的子查询,再查 ...
- 2018 焦作icpc现场赛总结
Day 0 没有直达焦作的飞机,所以选择了先到新郑机场,再转乘城际列车.城际列车猜是专门给学生开通的吧,每天只有来和回一共两趟(所以机票选择的余地也不多).买的时候只有无座票了,本来以为会一直站着,但 ...
- BZOJ5006 THUWC2017随机二分图（概率期望+状压dp）
下称0类为单边,1类为互生边,2类为互斥边.对于一种匹配方案,考虑其出现的概率*2n后对答案的贡献,初始为1,如果有互斥边显然变为0,否则每有一对互生边其贡献*2.于是有一个显然的dp,即设f[S1] ...
- oracle 存储过程创建报错 Procedure created with compilation errors
出现这错误的话,存储过程还是会成功创建的,创建好后再逐个打开查找存储过程的问题 问题:基本上就是存储过程里面的表不存在,dblink 不存在 ,用户名.xx表 要么用户名不存在要么表不存在 创 ...
- BZOJ 3357: [Usaco2004]等差数列
3357: [Usaco2004]等差数列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 338 Solved: 160[Submit][Statu ...
- 【BZOJ1455】罗马游戏（左偏树）
[BZOJ1455]罗马游戏(左偏树) 题面 BZOJ 然而权限题. 题解 左偏树模板题. #include<iostream> #include<cstdio> #inclu ...
- 解题：NOI 2009 管道取珠
题面 考虑这个平方的实际意义,实际是说取两次取出一样的序列 那么设$dp[i][j][k][h]$表示第一次在上面取$i$个下面取$j$个,第二次在上面取$k$个下面取$h$个的方案数 等等$n^4$ ...
- BRIEF特征点描述子
简介 BRIEF是2010年的一篇名为<BRIEF:Binary Robust Independent Elementary Features>的文章中提出,BRIEF是对已检测到的特征点 ...
- win7，Ubuntu 12.04 双系统修改启动项顺序三方法
修改启动项顺序的三种方法 本文所涉及的方法都是在Ubuntu的安装时将引导加载程序grub安装在了整个硬盘(即MBR内),即开机以grub引导. 方法1在Ubuntu终端下输入:sudo mv /et ...
- Redis3未授权访问漏洞导致服务器被入侵
今天在腾讯云上搭的开发环境里的一台机器cpu load飚升老高,然后还能登陆上去,top后发现两个可疑进程./root/目录下有修改过的文件./opt目录被干掉了, 后经分析,这台机器上有redis外 ...