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入坑之旅(一)不 ...
随机推荐
- 一个自己实现的js表单验证框架。
经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...
- 第三周Access的总结
一.问;这节课你学到了什么知识? 答:这周我学得比较少,主要是学Access的数据库进行基本的维护. 2.3数据库的基本维护 对Access定期检查,修复是整个数据库重要部分: 1.Access可修复 ...
- <Listener>servletContextListener、httpSessionListener和servletRequestListener使用整理
在java web应用中,listener监听器似乎是不可缺少的.经常常使用来监听servletContext.httpSession.servletRequest等域对象的创建.销毁以及属性的变化等 ...
- git cmd 命令在已有的仓库重新添加新的文件夹
正确步骤: 1. git init //初始化仓库 git add .(文件name) //添加文件到本地仓库 git commit -m “first commit” //添加文件描述信息 git ...
- C++ lamba使用
Moderm Effective C++ 条款31 第206提到了按引用捕获局部变量和函数形参时,如果lambda式的生命期依赖于局部变量和函数形参的生命期,需注意空悬引用的问题. 原书的例子不够直观 ...
- MySQL 基础--字符类型
##=====================================================================================## MySQL支持的字符 ...
- 背水一战 Windows 10 (74) - 控件（控件基类）: UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件
[源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...
- 使用MSF打造各种ShellCode
MSF 生成各种后门 Windows: 生成Windows后门. msfvenom -a x86 --platform Windows -p windows/meterpreter/reverse_t ...
- 使用js做LeetCode
概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...
- 如何设置 sass 全局变量，js如何使用 sass 变量
关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...