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入坑之旅(一)不 ...
随机推荐
- POJ3422费用流
Description: 一个N * N的奖赏地图,你可以走k次这个地图,但是每一次你走过一个有分的节点,你获得得分,但这个节点的得分都要清零,问你走k次地图的最大得分 Solution: 把得分变成 ...
- MFC 多窗口通信时，使用RadioButton和Button时冲突问题
最近项目需要我们实现在两个窗口间进行通信,其中有个小功能如图所示: 当我点击GDIProgram中的Button1时,会更新Dialog的Radio1和Radio2的状态. Dialog中的Radio ...
- 696. Count Binary Substrings
Give a string s, count the number of non-empty (contiguous) substrings that have the same number of ...
- JavaScripts中关于数字的精确计算方法
问题描述: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) ,我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这 ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- U-boot的编译方式及目录结构解析
U-boot的整体结构和linux基本类似,编译方式一般也是非常类似的,一般的编译命令: make CROSS_COMPILE=arm-linux-gnueabihf- XXX(目标名) 清除命令: ...
- 机器学习基石笔记：11 Linear Models for Classification
一.二元分类的线性模型 线性分类.线性回归.逻辑回归: 可视化这三个线性模型的代价函数, SQR.SCE的值都是大于等于0/1的. 理论分析上界: 将回归应用于分类: 线性回归后的参数值常用于pla/ ...
- Spark架构
Spark架构 为了更好地理解调度,我们先来鸟瞰一下集群模式下的Spark程序运行架构图. 1. Driver Program 用户编写的Spark程序称为Driver Progr ...
- 【sping揭秘】19、关于spring中jdbctemplate中的DataSource怎么来呢
我们这是可以正好借助之前学的factorybean类,自己吧jdbctemplate加载到spring容器中,我们可以封装多个这种对象,那么可以实现针对不同的数据库的jdbctemplate 首先我们 ...
- 对话Task
上一篇简单讲解了 线程和线程池以及上下文切换.创建线程代价高昂,默认每个线程都要占用大量虚拟内存1M.更有效的做法使用线程池,重复利用线程.在.NET4.0中引入了TPL任务并行库,你可以在将精力集中 ...