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 ...
随机推荐
- RHEL/Centos下VSFTPD服务器搭建
目的 Linux下安装配置vsfptd服务器,并通过客户端验证. 环境 Centos 6 局域网 内容 配置Vsftpd服务器:实现匿名用户.本地用户和虚拟用户登录的配置.匿名用户可以上载文件,上载后 ...
- 第217天：深入理解Angular双向数据绑定的原理
一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...
- ACdream1092
题意是给出某个地鼠的出现位置以及出现时间,人有一个移动速度,求此人最多可以打多少个地鼠? 我们根据时间把所有的地鼠排序,如果两个地鼠之间的距离不超过时间只差与速度的乘积,那说明打完上一只地鼠还可以打到 ...
- UVAlive5135_Mining Your Own Business
好题.给一个无向图,求最少染黑多少个点后,使得任意删除一个点,每一个点都有与至少一个黑点联通. 一开始的确不知道做.看白书,对于一个联通分量,如果它有两个或以上的割点,那么这个分量中间的任何一个点都是 ...
- 浅谈kmp
简介: 一种由Knuth(D.E.Knuth).Morris(J.H.Morris)和Pratt(V.R.Pratt)三人设计的线性时间字符串匹配算法.这个算法不用计算变迁函数δ,匹配时间为Θ(n), ...
- 【题解】洛谷P4707重返现世
在跨年的晚上玩手机被妈妈骂了赶来写题……呜呜呜……但是A题了还是很开心啦,起码没有把去年的题目留到明年去做ヾ(◍°∇°◍)ﾉﾞ也祝大家2019快乐! 这题显然的 kth min-max 容斥就不说了, ...
- 洛谷 P1357 花园 解题报告
P1357 花园 题目描述 小\(L\)有一座环形花园,沿花园的顺时针方向,他把各个花圃编号为\(1~N(2<=N<=10^{15})\).他的环形花园每天都会换一个新花样,但他的花园都不 ...
- 洛谷 P2389 电脑班的裁员 解题报告
题意: 给定一段长为N的序列,选取其中的至多M段使这些子段和最大. 当N=1000时,我们可以采用动态规划解法 令\(dp[i][j][k]\)代表当前选至位置\(i\)处于第\(j\)段当前是否选取 ...
- 洛谷 P1878 舞蹈课 解题报告
P1878 舞蹈课 题目描述 有\(n\)个人参加一个舞蹈课.每个人的舞蹈技术由整数来决定.在舞蹈课的开始,他们从左到右站成一排.当这一排中至少有一对相邻的异性时,舞蹈技术相差最小的那一对会出列并开始 ...
- Effective C++ 条款08：别让异常逃离析构函数
1.别让异常逃离析构函数的原因 <Effective C++>第三版中条款08建议不要在析构函数中抛出异常,原因是C++异常机制不能同时处理两个或两个以上的异常.多个异常同时存在的情况下, ...