vue.js_08_vue-组件的定义
1.vue组件常用定义方式
<body>
<div id="app">
<!--1.3使用组件-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="mycom3">
//只能有一个 根元素
<div>
<h3>这是使用Vue 创建的模板组件</h3>
</div>
</template>
<script>
Vue.component('mycom1', {
//只能有一个 根元素
template: '<div><h3>这是使用Vue 创建的全局组件</h3></div>'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
mycom2: {
//只能有一个 根元素
template: '<div><h3>这是使用Vue 创建的私有组件</h3></div>'
},
mycom3: {
template: '#mycom3'
}
}
})
</script>
</body>
2.组件中的data和methods
<div id="app">
<count></count>
<hr />
<count></count>
<hr />
<count></count>
</div>
<template id="tpl1">
<div>
<input type="button" value="+1" @click="incrment" />
<h3>{{count}}</h3>
</div>
</template> <script>
Vue.component('count', {
template: '#tpl1',
data: function() {
return {
count: 0
}
},
methods: {
incrment() {
this.count++
}
},
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
});
</script>
</body>
3.vue组件之间的切换
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登陆</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- component是一个占位符 :is 属性，可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<script>
Vue.component('login',{
template:'<h3>登陆组件<h3>'
});
Vue.component('register',{
template:'<h3>注册组件<h3>'
}); var vm = new Vue({
el: '#app',
data: {
comName:'login',
},
methods:{}
})
</script>
</body>
4.vue父子组件之间对象的传递
1>通过 属性绑定(v-bind:)的形式将对象传递给子组件
<com1 v-bind:parentmsg="msg"></com1>
将父组件中data中的msg属性传递给子组件
子组件必须用 props: ['parentmsg'],来接收
<body>
<div id="app">
<!-- 父组件 通过 属性绑定(v-bind:)的形式，把需要传递给子组件，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123,这是父组件中的数据'
},
methods: {}, components: {
com1: {
data() {
//组件中的data数据都是，组件私有的，比如：子组件动过ajax，请求回来的数据，都可以放到data上。是可读可写的
return {
title: '123',
content: 'qqq'
}
},
//默认子组件是无法访问父组件中的data和methods
template: '<h1>这是子组件----{{parentmsg}}</h1>',
// 把父组件传递过来的 parentmsg属性接受
//props这个数据是只读的
props: ['parentmsg'],
}
}
})
</script>
</body>
5.vue父子组件之间的方法的传递
1>父组件向子组件传递方法 用的是事件绑定 v-on:
<com1 @func="show"></com1>
//当点击子组件的按钮的时候，如何拿到 父组件传递过来的额func方法
//调用父组件 @func绑定的方法 并传递参数
this.$emit('func', this.son)
<body>
<div id="app">
<!-- 父组件向子组件传递方法 用的是事件绑定 v-on: -->
<com1 @func="show"></com1>
</div> <template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮-点击它触发父组件传递过来的fun方法" @click="myclick">
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
datason:null
},
methods: {
show(data) {
console.log('调用了父组件身上的show方法--' + data),
this.datason=data
}, },
components: {
com1: {
template: '#tmpl',
data() {
return {
son: { name: '大头儿子', age: 5 }
}
},
methods: {
myclick() {
//当点击子组件的按钮的时候，如何拿到 父组件传递过来的额func方法
//调用父组件 @func绑定的方法 并传递参数
this.$emit('func', this.son)
}
}
}, }
})
</script>
</body>
6.veu中DOM元素的获取
<h3 id="h3" ref="myh3">哈哈哈，今天天气太好了！！！</h3>
设置要获取的dom元素的ref
console.log(this.$refs.myh3.innerHTML)
<body>
<div id="app">
<h3 id="h3" ref="myh3">哈哈哈，今天天气太好了！！！</h3>
<input type="button" value="获取元素" @click="getElement" />
<com1 id="com1" ref="com1"></com1>
</div>
<script>
Vue.component('com1',{
template:'<h3>我是com1组件</h3>',
data(){
return {
msg:'msg'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods:{
getElement(){
//$refs获取DOM元素
console.log(this.$refs.myh3.innerHTML)
console.log(this.$refs.com1.msg)
}
}
})
</script>
</body>
vue.js_08_vue-组件的定义的更多相关文章
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- Vue组件的定义、注册和调用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...
- Vue.js 2.x：组件的定义和注册（详细的图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- CSS——背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很 ...
- 最大流任务调度+离散化——hdu2883
思想就是把时间段离散化,然后用个点来表示一段时间 #include<iostream> #include<cstdio> #include<cstring> #in ...
- git 使用案例（本地仓库无缝迁移远程仓库）
之前都是直接从gitlab上clone代码,然后把本地代码copy过去,然后push.有点麻烦,查询了一下如何无缝从本地仓库迁移到远程仓库.记录一波... 下面的例子采用github来做例子. 1. ...
- Invalid argument value：无效参数值。原因是：把Session值user0当做username作为参数了。 而实际上此时username是user0的成员变量。参数应该是user0.getUsername();然后发现别人的List得加泛型，我的怎么不用加，运行报错，上网收了错误原因，因为导包错误，不小心导错包了，改为util.List包对了。
- UNIT对话系统（杂记）
单轮对话指标: 召回率=机器人能回答的问题数/问题总数 准确率=机器人正确回答的问题数/问题总数 问题解决率=机器成功解决的问题数/问题总数 多轮对话指标: 任务完成率=成功结束的多轮会话数/多轮会话 ...
- Django框架基础-MTV模型
一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model(模型):和数据库相关的,负 ...
- 【LGP5437】【XR-2】约定
题目 显然每一条边出现在生成树中的方案数是相等的 根据矩阵树定理,\(n\)个节点的完全图生成树个数是\(n^{n-2}\)种,完全图共有\(\frac{n(n-1)}{2}\)条边,一棵生成树共\( ...
- JSP四个域对象的应用场景
request 如果客户向服务器发请求,产生的数据,用户看完就没用了,像这样的数据就存在request域 比如新闻数据,属于用户看完就没用的 session 如果客户向服务器发请求,产生的数据,用户用 ...
- 便携版Mysql安装
目录 1.安装 0.Mysql下载地址 1.解压 2.在主目录下新建data和tempData两个文件夹 3.配置环境变量 4.配置my.ini 5.安装服务(管理员模式CMD) 6.清空data文件 ...
- 如何在 Apache Flink 中使用 Python API？
本文根据 Apache Flink 系列直播课程整理而成,由 Apache Flink PMC,阿里巴巴高级技术专家 孙金城 分享.重点为大家介绍 Flink Python API 的现状及未来规划, ...