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 ...
随机推荐
- 初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序
初入码田--ASP.NET MVC4 Web应用开发之一 实现简单的登录 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-29 在此之前,需要一台电脑( ...
- list 交换位置扩展
public static List<T> Swap<T>(this List<T> list, int index1,int index2) { if(index ...
- UVA 12633 Super Rooks on Chessboard(FFT)
题意: 给你一个R*C的棋盘,棋盘上的棋子会攻击,一个棋子会覆盖它所在的行,它所在的列,和它所在的从左上到右下的对角线,那么问这个棋盘上没有被覆盖的棋盘格子数.数据范围R,C,N<=50000 ...
- 数据结构开发(14)：KMP 子串查找算法
0.目录 1.KMP 子串查找算法 2.KMP 算法的应用 3.小结 1.KMP 子串查找算法 问题: 如何在目标字符串S中,查找是否存在子串P? 朴素解法: 朴素解法的一个优化线索: 示例: 伟大的 ...
- 【BZOJ 3326】[Scoi2013]数数 数位dp+矩阵乘法优化
挺好的数位dp……先说一下我个人的做法:经过观察,发现这题按照以往的思路从后往前递增,不怎么好推,然后我就大胆猜想,从前往后推,发现很好推啊,维护四个变量,从开始位置到现在有了i个数 f[i]:所有数 ...
- 【刷题】BZOJ 3732 Network
Description 给你N个点的无向图 (1 <= N <= 15,000),记为:1-N. 图中有M条边 (1 <= M <= 30,000) ,第j条边的长度为: d_ ...
- 使用cmstp绕过应用程序白名单
默认情况下,AppLocker允许在文件夹中执行二进制文件,这是可以绕过它的主要原因.已经发现,这样的二进制文件可以很容易地用于绕过AppLocker和UAC.与Microsoft相关的二进制文件之一 ...
- APK反编译之一：基础知识—APK、Dalvik字节码和smali文件
refs: APK反编译之一:基础知识http://blog.csdn.net/lpohvbe/article/details/7981386 APK反编译之二:工具介绍http://blog.csd ...
- Android 65535 问题与 MultiDex分包
Android Multidex 遇到的问题 http://blog.csdn.net/wangbaochu/article/details/51178881 Android 使用android-su ...
- redis3.2装完后 其它机子访问爆protocol error, got 'n' as reply type byte
服务器上装了reids3.2版本,配置文件中已将bind的选项注释掉, linux的iptables的redis端口也开放 其它机子的PHP访问redis爆“protocol error, got ' ...