vue.js组件学习(上)
组件是vue.js中非常重要的一部分,打个比方,会用组件得人喝着茶就写完的页面,不会用的代码打到手抽筋也未必完的成。
首先何为组件
组件可以封装重用的代码,扩展HTML元素,更高的说组件是自定义元素。
组件化的html
写入vue.js的基本结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="./../vue.js"></script><script>var vm = new Vue({el:"#app", })</script>
</body>
</html>
然后实例new中加入components 组件
components:{ child } //注册局部组件
在id=app中添加<child></child>
实例化一个child对象,里边添加模板组件template,然后添加内容为
template:"<div class="child">children</div>" //这里的模板会替代child
这样我们就可以在后台发现多出来一个class名为child的标签,页面内容为children
可我们想组建出多个该怎么弄呢?
只需要在我们在components组件中加入childSibling
components:{ child,childSibling }
然后如同上边一样实例一个childSibling对象那样,然后在id="app"中再添加一个<child-sibling>自定义标签,这样我们就可以得到两个标签了。这里要注意这里的命名转换
创建子组件
首先,我们应实例化一个子组件son
var son = {template:"<div>这是子元素</div>"
}
然后我们要在目标父组件中添加components组件,里边写入这个son,再然后在template中添加<son></son>
template:"<div><son></son</div>"
这样我们就完成了html的组件化,当然实际应用不可能这么简单,不过都是以此类推的。
从父元素中获取数据
如果我们用常规的方法获取data里数据添加到模板里会报错,这时就用到props,这个属性是用来声明子组件预期的数据,我们可以通过这个方法来得到data里的数据。
声明子组件预期的数据
props:["预期数据"]
绑定data数据,假设父元素为<ele>
data:{数据:"111"
}
<ele v-bind 预期数据="数据" ></ele>
这样我们在组件中添加预期数据就可得到data里的数据内容了
还有很多这样的方法可以参照官网进行操作https://cn.vuejs.org/v2/guide...
vue.js组件学习(上)相关推荐
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
- 构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- 三十七、深入Vue.js组件Component(下篇)
@Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
- 三十六、深入Vue.js组件Component(上篇)
@Author:Runsen @Date:2020/6/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
- VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
- (24)Vue.js组件—组件注册
一.Vue.js组件注册内容 • 全局注册 • 组件基础 • 局部注册 二.全局注册 • 全局注册的组件在注册后可以用于任意实例或组件中. <body><div id="a ...
- vue.js 组件之间传递数据 1
vue.js 组件之间传递数据 框架 浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
- 如何对第一个Vue.js组件进行单元测试
by Sarah Dayan 通过莎拉·达扬 In Build Your First Vue.js Component we made a star rating component. We've c ...
最新文章
- Θ(n)反转单链表(算法导论第三版第十章10.2-7)
- Leetcode 209.长度最小子序列(滑动窗口)
- Activiti 基础概念
- Hibernate讲解(三)-类映射文件中常用属性的了解
- android selector(转)
- 【浙江大学PAT真题练习乙级】1005 继续(3n+1)猜想 (25分) 真题解析
- fiddler4请求拒绝原因
- 坐标旋转变换 公式图解
- 基于OpenStack的云测试平台
- Linux下安装并运行TMHMM
- Linux手机DIY.夏新E600和飞利浦968的重大突破
- 阿铭Linux_传统IDC 部署网站学习笔记20190129
- LAMP基础环境的搭建,即Linux、Apache、MySQL、PHP环境
- 保护小程序,防止反编译:打造不怕反编译的小程序
- 1062: 最大公约数
- python3中编解码、进制、字节、bytes及爬虫中经常遇到的编码问题的总结
- 泰雷兹高科技赋能全球最安全的电子护照之一,泰国公民咸受其益
- 在ubuntu20.04环境安装noetic ROS
- 固定资产管理系统的作用和重要意义
- 对AnyChat录屏解决方案的调研报告