vue 组件基本使用
组件的基本使用
注册组件
注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置。vue.component()注册的全局组件
Vue.component('hello-world',{
template: `<div>这是一个自定义组件</div>`,
data () {
return {
message: 'hello world'
}
}
})
组件使用
以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用
html
<div id="app">
<hello-world></hello-world>
</div>
var app = new Vue({ el: '#app'})
定义局部组件(局部组件只能在当前vue实例中使用)
var app = new Vue({
el: '#app',
data: {
},
components: {
'my-component': {
template: `<div>这是一个局部的自定义组件,只能在当前Vue实例中使用</div>`,
}
}
})
模板的要求
注意:组件的模板只能有一个根元素。下面的情况是不允许的。
template: `<div>这是一个局部的自定义组件,只能在当前Vue实例中使用</div>
<button>hello</button>`,
//改为
template: `<div>
<div>这是一个局部的自定义组件,只能在当前Vue实例中使用</div>
<button>hello</button>
</div>`,
模板可以在外面定义
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mycomponent">
<h1>mycomponent</h1>
</template>
<script>
Vue.component('mycomponent', {
template: '#mycomponent'
})
var app = new Vue({ el: '#app'})
</script>
组件中的data必须是函数
可以看出,注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数。
这是因为如果像Vue实例那样,传入一个对象,由于JS中对象类型的变量实际上保存的是对象的引用,所以当存在多个这样的组件时,会共享数据,导致一个组件中数据的改变会引起其他组件数据的改变。
而使用一个返回对象的函数,每次使用组件都会创建一个新的对象,这样就不会出现共享数据的问题来了。
DOM模板的解析问题
当使用 DOM 作为模版时 (例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素 ul,ol,table,select 限制了能被它包裹的元素,而一些像 这样的元素只能出现在某些其它元素内部
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table>
<my-tr>...</my-tr>
</table>
自定义组件 被认为是无效的内容,因此在渲染的时候会导致错误。这时应使用特殊的 is 属性:
<table>
<tr is="my-tr"></tr>
</table>
也就是说,标准HTML中,一些元素中只能放置特定的子元素,另一些元素只能存在于特定的父元素中。比如table中不能放置div,tr的父元素不能div等。所以,当使用自定义标签时,标签名还是那些标签的名字,但是可以在标签的is属性中填写自定义组件的名字。
应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用:
- <script type="text/x-template">
- JavaScript 内联模版字符串
- vue 组件
vue 组件基本使用的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件,撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
随机推荐
- docker启动常见报错
Docker启动时的报错汇总 22017.11.10 16:30:29字数 575阅读 27184 八个Docker常见故障 https://mp.weixin.qq.com/s/2GNKmRJtBG ...
- PHP AJAX返回 "TEXT"
例子:通过AJAX间接访问数据库,查出Nation表显示在页面上,并添加删除按钮 //首先在外层添加一个按钮,并造好表头 <div><input type="button& ...
- Shutdown 源码阅读
Shutdown /** * 虚拟机关闭步骤 * @since 1.3 */ class Shutdown { /* 关闭状态 */ private static final int RUNNING ...
- for...in 与 for...of
在js中, 对于Object,一般for...in 来进行迭代,不能使用for...of // let obj = {a:1,b:2} for(let i of obj){console.lo ...
- laydate中设置动态改变max与min值的方法
参考网址: 原网址:https://blog.csdn.net/cherry_11qianqian/article/details/82259704 改进的网址:https://blog.csdn.n ...
- Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据,可视化结果
感谢下面的博主,我学习的博客有: https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp+Servlet+Echarts实现动态数据可 ...
- Linux中编译C文件
C/C++程序编译的过程 预处理,展开头文件,宏定义,条件编译处理等.通过gcc -E source.c -o source.i或者cpp source.c生成. 编译.这里是一个狭义的编译意义,指的 ...
- Debian10服务器安装
对于使用惯windows系统的人来说,刚开始接触使用linux系统一定是很不习惯,因为使用环境的变化经常会出现一些错误.当然,对于我来说,我也是刚刚才开始接触Linux,对此,有些地方想不到的,可以多 ...
- Htmlunit 设置缓存文件
起因:最近用Htmlunit爬取网页.demo运行起来后,发现速度相当慢,一直在不停的加载js文件,偶尔还会报错,js超时等.抓包工具看了一下请求,发现一直在不停的下载js文件.按理说请求过js文件后 ...
- PJzhang:我发现一个有两个答案的数独题
猫宁!!! 最近做数独题,发现了一个答案不唯一的数独,之前对此类数独有所耳闻,但是没有亲手发现,碰巧发现一个,很是欣喜. 下面展示了两个答案 第一个 第二个 绿色标签是答案 ...