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入坑之旅(一)不 ...
随机推荐
- Eclipse中一些真正常用的快捷键
F2 文件重命名(要使用某个过长的文件名或者不好打的文件名时,直接F2再Ctrl+C非常好用,比如:Validform_v5.3.2_min.js) Ctrl+S 保存当前文件 Ctrl+Shift+ ...
- EBS server log日志
Log file location for Oracle E-Business Suite R12 April 13, 2010 in Oracle Database&EBS General ...
- Android-Java-抽象类
定义抽象类,就一定会定义抽象方法,抽象方法没有方法体{},就证明抽象方法 是不运行的,抽象方法 是给子类继承覆盖运行的, 子类继承->抽象类 就必须覆盖抽象方法,否则编译都失败: 水果案例: 定 ...
- MongoDB学习小结
启动对应server:cd:到mangodb安装根目录下 mongod --dbpath db路径 创建MangoDB服务: mongod.exe --logpath d:/mongodb/logs/ ...
- 1.viewpager
ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view. ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类. ...
- Android Studio 配置 androidAnnotations框架详细步骤
第一步:打开app的build.gradle文件 第二步:添加下面红色的部分 apply plugin: 'com.android.application' android { compileSdkV ...
- Redis 分布式锁进化史（解读 + 缺陷分析）
Redis分布式锁进化史 近两年来微服务变得越来越热门,越来越多的应用部署在分布式环境中,在分布式环境中,数据一致性是一直以来需要关注并且去解决的问题,分布式锁也就成为了一种广泛使用的技术,常用的分布 ...
- sql 语句的limit的用法
SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset mysql> SELECT * FROM table LIMIT ...
- Tools - 源代码阅读分析工具Source Insight
简介 https://www.sourceinsight.com/ Source Insight是一个面向项目开发的程序编辑器和代码浏览器,可以分析C/C++.C#.Java.Python等语言源代码 ...
- [EXP]Drupal < 8.6.10 / < 8.5.11 - REST Module Remote Code Execution
Analyzing the patch By diffing Drupal and , we can see that in the REST module, FieldItemNormalizer ...