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>通过 发布-订阅 模式进行组件间的数据传递和事件通知；
转载于:https://www.cnblogs.com/hippieZhou/p/9484698.html
Vue 系列之 组件相关推荐
- VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
- 通过自定义组件学习Vue系列（二）【时间轴】（附源码）
需求: 用于升级日志的显示 效果图: 实现原理: 主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示 然后做一下循环,将每个日期的数据显示出来 布局采用f ...
- npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
- Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- 20.番外篇——Vue如何自定义组件并且进行全局配置
20.番外篇--如何自定义组件并且进行全局配置 前言 1.创建自定义组件 2.导出自定义组件 3.main.js中引入自定义的公共组件并挂在到Vue 4.使用自定义的公共组件 前言 通过之前的系列文章 ...
- 基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例 一.项目概要 1.效果前瞻 2.开发流程 3.开发环境 二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
- Vue系列之分支结构v-if和v-show
文章の目录 一.v-if 二.v-else-if 1.限制: 2.用法 三.v-else 1.限制 2.不需要表达式 四.v-show 写在最后 一.v-if 根据v-if后面表达式的值的真假来有条件 ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
最新文章
- apk转换ipa在线转换工具_gif转换工具
- 玩游戏计算机配置,玩游戏的电脑需要什么配置？
- java调用sap接口_(二)通过JAVA调用SAP接口 (增加一二级参数)
- LiveVideoStack Meet | 苏州：视频会议研发中心一日游
- MyBatis传入参数为list、数组、map写法
- 教程-Delphi第三方控件安装卸载指南
- python中空字符串的布尔值是什么_Python的布尔值与空值
- 计算机中Git配置环境变量 - 教程篇
- pandas isnull函数检查数据是否有缺失
- Java中的两种异常类型及其区别？
- BZOJ 1001 平面图转对偶图
- win10禁用浏览器css,Win10系统解决使用Edge浏览器下的隐藏设置
- python cookies是什么_Python获取cookie有什么用
- C#使用wkhtmltopdf将网页存为pdf或图片
- 【STM32利用CuBe MX生成HID设备】1-熟悉软件以及生成一个8键的游戏控制器
- P13 JPanel 面板
- 【Spark深入学习 -10】基于spark构建企业级流处理系统
- SKYLIN TerraExplorer Pro 后台控制导航控件的显示隐藏（指北针、放大、缩小等）
- 为什么要学习单片机？如何开始上手学习单片机？
- 计算机网络——DNS域名解析服务器原理