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 ...
随机推荐
- 使用userData兼容IE6-10，chrome，FF 及360等浏览器的本地存储
开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...
- Day24-图片验证码----待续
一,上课所讲---------没听懂!!! 1,首先,图片验证码不能放到客户浏览器的cookie上,否则,客户可以直接从它的浏览器上拿到,然后自动提交,这样的话,验证码就没有任何用处了.所以图片验证码 ...
- [LOJ3049] [十二省联考 2019] 字符串问题
题目链接 LOJ:https://loj.ac/problem/3049 洛谷:https://www.luogu.org/problemnew/show/P5284 BZOJ:https://www ...
- Java考试题之十
QUESTION 230 Given: 10. class One { 11. public One foo() { return this; } 12. } 13. class Two extend ...
- Andorid APK反逆向
Andorid APK反逆向解决方案---梆梆加固原理探寻http://blog.csdn.net/androidsecurity/article/details/8892635 Android AP ...
- js replace如何实现replaceAll
js下string对象的replace方法的定义如下: stringObject.replace(regexp/substr,replacement) 其中: 参数 | ...
- 微信开发使用 frp 实现本地测试
前提条件: 1.有公网服务器(如阿里云) 2.需要独立的 80 端口,也就是说,想要实现这个目标,服务器上不能跑 nginx 之类占用 80 端口的程序 3.有可以测试使用的域名,并解析到上面说的公网 ...
- python print end=' ' 不换行
python3.x 实现print 不换行 python中print之后是默认换行的,是因为其默认属性 end 默认值为"\n"(\n为换行符). 做练习99乘法表时不想换行,改变 ...
- 51NOD 1445 变色DNA
1445 变色DNA 有一只特别的狼,它在每个夜晚会进行变色,研究发现它可以变成N种颜色之一,将这些颜色标号为0,1,2...N-1.研究发现这只狼的基因中存在一个变色矩阵,记为colormap,如果 ...
- 视音频数据处理入门：PCM音频采样数据处理
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...