// 组件  自定义全局组件
Vue.component('mycom', {
template: '<div v-on:click="count++">自定义组件 +{{myMessage}} {{MyTitle}} {{count}} childarry:{{myChildarry}} myInfo:{{myInfo}}</div>', // 在父组件中的写法必须是 my-Message(小写字母开始 + 与第一个大写字母之间必须有-,否则不生效)
props: ['myMessage', 'MyTitle', 'myChildarry', 'myInfo'],
// 组件中的data必须是函数
//注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数。
// 这是因为如果像Vue实例那样,传入一个对象,由于JS中对象类型的变量实际上保存的是对象的引用,
//所以当存在多个这样的组件时,会共享数据,导致一个组件中数据的改变会引起其他组件数据的改变。
// 而使用一个返回对象的函数,每次使用组件都会创建一个新的对象,这样就不会出现共享数据的问题来了。

data() {
return {
count:0
}
} });

  

 <div id="app30">
<div>{{ parentArray }}</div>
<!--my-Message 注意小写字母与大写字母之间的--->
<!--1 、v-bind:my-Childarry 使用v-bind绑定的属性是一个动态属性,父组件的值发生变化时,子组件的值也将发生变化
2、当父组件传递的属性是引用类型时,在子组件中更改相应的属性会导致父组件相应属性的更改。
3、当父组件传递值为基本类型时,在子组件中更改这个属性会报错。正确的做法是,在父组件中绑定属性值时,加上.sync修饰符。
-->
<mycom my-Message="dasdasda" my-Info="infos" my-Title="112ewqdw" v-bind:my-Childarry="parentArray">111</mycom>
<mycom my-Message="adadada"></mycom>
<runoob></runoob>
</div> <script> new Vue({
el: "#app30",
data: { parentArray:'nhzheng'
}
});
</script>

  

vue 组件的简单使用01的更多相关文章

  1. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  2. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  3. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  4. vue组件,撸第一个

    实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...

  5. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  6. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  8. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  9. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

随机推荐

  1. 所有anaconda安装包失败的解决办法汇总

    多试几次,有时候网络不稳定下载一半会停掉 更改Pip源 pip install scrapy -i https://pypi.tuna.tsinghua.edu.cn/simple 1.首先确认镜像源 ...

  2. c++后台开发面试常见知识点总结(三)操作系统

    静态链接库和动态链接库的区别 一个进程可以通过调用waitpid函数来等待它的子进程终止或者停止 Debug和Release的区别 临界区互斥量信号量事件进程互斥与同步 进程有哪几种状态,状态转换图, ...

  3. 查看tomcat的版本号

    本经验主要介绍在windows下,如何查看tomcat的版本号. 工具/原料 安装了tomcat server的操作系统. 一.绿色版tomcat版本查看--命令catalina version 或者 ...

  4. Java中的多表&事务&DCL&一个多表操作例子

    准备sql: 创建部门表 CREATE TABLE dept( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20) ); INSERT INTO d ...

  5. Linux文件压缩、解压缩及归档工具一

    主题Linux文件压缩.解压缩及归档工具 压缩工具很重要的,因为要经常到互联网下载包 一compress/uncompress compress [-dfvcVr] [-b maxbits] [fil ...

  6. 文本处理工具——sed进阶

    一sed的搜索替代 (一)常见的和替代相关的选项 搜索替代,和vim的写法很像 s///:查找替换,支持使用其它分隔符,s@@@,s### p: 显示替换成功的行,就是打印. w /PATH/TO/S ...

  7. hdu 3974 Assign the task (线段树+树的遍历)

    Description There is a company that has N employees(numbered from 1 to N),every employee in the comp ...

  8. stm32 单片机

    STM32系列基于专为要求高性能.低成本.低功耗的嵌入式应用专门设计的ARM Cortex-M3内核(ST's product portfolio contains a comprehensive r ...

  9. 线程同步(基于java)

    java线程 同步与异步 线程池 1)多线程并发时,多个线程同时请求同一个资源,必然导致此资源的数据不安全,A线程修改了B线 程的处理的数据,而B线程又修改了A线程处理的数理.显然这是由于全局资源造成 ...

  10. 25. Postman的使用

    Postman下载与安装 不管是接口测试人员还是开发人员大概率下都绕不开一个工具,那就是Postman.当然可能还有一些接口测试工具,比如soapUI.Jmeter.Robot Framework 等 ...