Vue 系列之 组件
一个简单的 TodoList
<body>
<div id="root">
<div>
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<li v-for="(item, index) in items" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
todo: "hello",
items: []
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
往数组里面添加元素使用 push 方法，删除使用
组件
全局组件
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
Vue.component("todo-item", {
props: ["content"],
template: "<li>{{content}}</li>"
})
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
局部组件
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content"],
template: "<li>{{content}}</li>"
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
组件与实例的关系
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content"],
template: "<li @click='handleClick'>{{content}}</li>",
methods: {
handleClick: function () {
alert(1111)
}
}
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
Vue程序 是由众多的 vue实例 构建而成的。对于根实例，对应的模板是挂载点下所有的 Dom 节点；
组件的 data 必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
事件的发布与订阅
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<!--订阅事件-->
<todo-item @delete="handledelete" v-for="(item, index) in items" :key="index" :content="item" :index="index"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content", "index"],
template: "<li @click='handleClick'>{{index}} - {{content}}</li>",
methods: {
handleClick: function () {
//发布事件
this.$emit('delete', this.index)
}
}
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
},
//实现事件
handledelete: function (index) {
this.items.splice(index)
}
}
})
</script>
</body>
通过 发布-订阅 模式进行组件间的数据传递和事件通知；
Vue 系列之 组件的更多相关文章
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...
- Vue系列之 => 组件切换
组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- vue系列---Vue组件化的实现原理（八）
_ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
随机推荐
- cobbler学习
note.youdao.com/share/?id=2f8383d6e9824929012b041f069da26e&type=note#/ IPADDR=192.168.86.4 TYPE= ...
- hive 语法 case when 语法
' then '精选' else null end as sale_type 注意: end不能少
- cant found Microsoft.VSSDK.BuildTools.15.0.26201
如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...
- 微服务应用新趋势：Service Mesh、AIOps和中台化
微服务技术由于天生支持快速迭代.弹性扩展的特点,使企业能够在不确定性下提升发展速度及抗风险能力,受到了越来越多的关注.当前,云服务商纷纷试水微服务产品,最为典型的,当属推出轻舟微服务平台.剑指整个微服 ...
- MyBatis 源码分析 - 插件机制
1.简介 一般情况下,开源框架都会提供插件或其他形式的拓展点,供开发者自行拓展.这样的好处是显而易见的,一是增加了框架的灵活性.二是开发者可以结合实际需求,对框架进行拓展,使其能够更好的工作.以 My ...
- Android 发展思路
1. 做一个有 ‘特色’ 的程序员 Android 开发,本身并不是一个可以走得多远的方向,真正有价值的地方在于与具体的业务方向结合,比如:Android 与音视频技术,Android 与智能硬件交互 ...
- ElasticSearch权威指南学习（排序）
排序方式 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 相关性分值会用_score字段来给出一个浮点型的数值,所以默认情况下,结果集以_score进行倒序排列. ...
- [git] 基本原理
1. 基本原理 工作目录:本地项目所在目录 暂存区: 被 git 所管理的文件 本地仓库:本地的版本仓库,一般的提交操作会将变更信息先提交到本地仓库的版本库中 远程仓库:远程的版本仓库,将变更信 ...
- Ajax 的学习
(一)基础知识和新的概念 1,AJAX 就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应.实现 网络编程. 2,AJAX(Asynchr ...
- LeetCode：111_Minimum Depth of Binary Tree | 二叉树的最小深度 | Easy
要求:此题正好和Maximum Depth of Binary Tree一题是相反的,即寻找二叉树的最小的深度值:从根节点到最近的叶子节点的距离. 结题思路:和找最大距离不同之处在于:找最小距离要注意 ...