组件基础—Vue学习笔记
ammm学习Vue有好几天了，今天遇到难点所以打算写一点随笔加深印象。
一、首先最简单的创建组件
1全局组件 Vue.component()
Vue.component('hello',{
template:'<h1>hello world<h1>'
})
然后就可以调用了，前提：你需要先设置Vue的接管范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="vm">
<hello></hello>
</div>
</body>
<script>
Vue.component('hello',{
template:'<h1>hello world<h1>'
}) new Vue({
el:'#vm'
})
</script>
</html>
2. 局部组件
先在外部声明，然后在Vue实例中实例化
var hello={
template:'<h1>hello world</h1>'
}
var app=new Vue({
el:'#app',
components:{
hello:hello //在此处生成局部组件两个hello可以不同
}
})
二、组件传值
1.父组件向子组件传值
最简单的方法通过 <slot></slot>传值
<hello></hello>里面的hiboy会传递到子组件中替代slot
<body>
<div id="app">
<hello>hiboy</hello>
</div>
</body>
<script>
Vue.component('hello',{
template:'<h1><slot></slot></h1>'
})
var app=new Vue({
el:'#app'
})
</script>
常规方法通过props传值
<body>
<div id="app">
<hello message="hi boy"></hello>
</div>
</body>
<script>
Vue.component('hello',{
props:['message'],//此处的值和dom里的值对应
template:'<h1>{{message}}</h1>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
当然我们可能会遇到像这样的Bug
（当你在一个表格中使用组件时会发现...）
<body>
<div id="app">
<table>
<tbody>
<hello></hello>
<hello></hello>
</tbody>
</table>
</div>
</body>
<script>
Vue.component('hello',{
template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
我们想要在表格的tbody中插入两个组件，组件为tr但是仔细看一下运行后的Dom
我们会发现插入的两个组件并没有在我们预想的tbody中（疑惑...）
解决方法：采用 is 声明
<body>
<div id="app">
<table>
<tbody>
<tr is="hello"></tr>//采用is把tr转化为hell组件
<hello></hello>
</tbody>
</table>
</div>
</body>
<script>
Vue.component('hello',{
template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
看一下运行结果吧！
类似于以上情况的标签有 table、select、ul、ol
2.子组件向父组件传值
子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个
<body>
<div id="app">
<hello @addnum="handleAddClick"></hello><!-- 接收子节点传过来的值 -->
<h3>{{num}}</h3>
</div>
</body>
<script>
Vue.component('hello',{
data:function(){ //组件的data为一个函数
return{
number:0
}
},
template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
methods:{
handleClick:function(){
//这里点击一次我们让自身加一
this.number++;
//向上传递事件给父节点
this.$emit('addnum',1);//第一个参数为事件名，第二个为所需要传的值，这里我们传1，当然可以传多个值
}
}
})
var app=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handleAddClick:function(step){
this.num+=step;
}
}
})
</script>
注意：组件的data是一个函数通过返回值来实现
接下来我们通过两个子组件的值计算出父组件的值。此时我们会引入一个新的东西 ref 它可以让我们获取所需dom
<body>
<div id="app">
<hello @addnum="handleAddClick" ref="one"></hello><!-- 接收子节点传过来的值 -->
<hello @addnum="handleAddClick" ref="two"></hello>
<h3>{{num}}</h3>
</div>
</body>
<script>
Vue.component('hello',{
data:function(){ //组件的data为一个函数
return{
number:0
}
},
template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
methods:{
handleClick:function(){
//这里点击一次我们让自身加一
this.number++;
//向上传递事件给父节点
this.$emit('addnum');
}
}
})
var app=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handleAddClick:function(){
this.num=this.$refs.one.number+this.$refs.two.number;
}
}
})
</script>
通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容，
this.$refs.one.number获取了组件中的number
Ok就是这样，至于最基础的模板语法就自己看官方文档吧。
组件基础—Vue学习笔记的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
随机推荐
- attempt to create delete event with null entity
解决办法:删除之前判断是否为空 if(Object != null){ session.delete(Object); }
- Mybatis之拦截器原理（jdk动态代理优化版本）
在介绍Mybatis拦截器代码之前,我们先研究下jdk自带的动态代理及优化 其实动态代理也是一种设计模式...优于静态代理,同时动态代理我知道的有两种,一种是面向接口的jdk的代理,第二种是基于第三方 ...
- cucumber安装可能发生的错误
1.--ignore-certification-errors 解决:可能是你的chromedriver版本与ruby版本不匹配,换一个版本 2.找不到文件,certification verify ...
- IC向管理者角色转换
1. 虽然你认为自己已经想明白怎么干,但还是从怎么干回归到要解决的问题,抛给正确的人(应该对这些问题负责的人),引导他们想出问题的答案. 给别人机会和空间,帮助他们成长: 人们对自己“想”出的方案更有 ...
- 2018.10.23 NOIP模拟 行星通道计划(bit)
传送门 卡常题. 成功卡掉了作死写树套树的zxy. 然而对我的二维bit无能为力. 直接维护两棵bit. bit1[i][j]bit1[i][j]bit1[i][j]表示左端点小于等于iii,右端点小 ...
- 2018.09.02 bzoj1003: [ZJOI2006]物流运输（dp+最短路转移）
传送门 dp好题. 每一天要变更路线一定还是走最短路. 所以l~r天不变更路线的最优方案就是把l~r天所有不能走的点都删掉再求最短路.显然是可以dp的. 设f[i]表示第i天的最优花销.那么我们枚举在 ...
- gj7 对象引用、可变性和垃圾回收
7.1 python变量到底是什么 #python和java中的变量本质不一样,python的变量实质上是一个指针 int str, 便利贴 a = 1 a = "abc" #1. ...
- kallinux2.0安装网易云音乐
安装 dpkg -i netease-cloud-music_1.0.0_amd64.kali2.0(yagami).deb apt-get -f install dpkg -i netease-cl ...
- (转) MVC 中 @help 用法
ASP.NET MVC 3支持一项名为“Razor”的新视图引擎选项(除了继续支持/加强现有的.aspx视图引擎外).当编写一个视图模板时,Razor将所需的字符和击键数减少到最小,并保证一个快速.通 ...
- ACM STEPS——Chapter Two——Section One
数学题小关,做得很悲剧,有几道题要查数学书... 记下几道有价值的题吧 The area(hdoj 1071) http://acm.hdu.edu.cn/showproblem.php?pid=10 ...