vue组件化的应用

前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了。可能一会儿我心情好的时候,可以去整理一下。

1、应用的内容:在一个页面中,需要一个固定的内容,这个内容可以多次引用,那么就可以考虑把他分离出来,在下次需要的时候,实现引用就好。

比如:

<input type="text" v-model="content" >
<button @click = addList>添加</button>
<ul>
      <li v-for="( item ) of todoList">{{item}
      </li>
</ul>

通过输入框添加列表项,原本是这样的,但我可以考虑优化一下,把ul中的内容分离出去,再来引用它。作为一个简单的demo来学习。

2、父组件中给子组件命名,li-item

<input type="text" v-model="content" >
<button @click = addList>添加</button>
<ul>
      <li-item v-for=‘( item ,index) of todoList‘ :key = "index" :index="index" :content = ‘item‘ @delete="deleteitem">
      </li-item>
</ul>

在组件中,必须有key值做索引,index值和content。

3、此时我们把分离的内容(子组件)写在一个新的叫LiItem的页面中。

<template>
    <li @click="deleteItem"> {{content}}</li>
</template>

<script>
export default {
  name: ‘LiItem‘,
  props: [‘content‘, ‘index‘],
  data () {
    return {
      item: ‘item‘
    }
  },
  methods: {
    deleteItem () {
      this.$emit(‘delete‘, this.index)
    }
  }
}
</script>

<style scoped>

</style>

子组件name,方便引用。子组件的值需要传在props中作为记录。在父组件中有需要调用。

4、然后在父组件中引入子组件的内容。

import LiItem from ‘@/components/LiItem‘

在components里面加入子组件的值。

components: {  ‘li-item‘: LiItem}

5、此时就分离出来了,如果还子组件上面还有相应的点击函数,那么就需要在子组件中定义。比如上面的代码中,有一个删除函数,即删除添加的选项deleteItem,方法需要在methods中定义。

deleteItem () {this.$emit(‘delete‘, this.index)}

然后在父组件中引入并实现功能

@delete="deleteitem"

deleteitem(){this.todoList.splice(this.item, 1)}

总结:这只是一种分离的方式,还有更多独立的更优化的方法,后期我会好好去探讨总结。

 

原文地址:https://www.cnblogs.com/zjingjing/p/9155703.html

时间: 2024-10-04 02:13:33

vue组件化的应用的相关文章

前端框架Vue自学之Vue组件化开发(三)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue组件化开发) 内容:通过官网说明,掌握Vue组件化开发. 正文: Vue组件化开发 一.认识组件化 原文地址:https://www.cnblogs.com/xinkuiwu/p/12037281.html

vue组件化之模板优化及注册组件语法糖

vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验,输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接. enter description here vue.extend函数需要一个对象,这个对象的属性是个模板,这个模板的源码是H5. 模板优化 创建组件构造器 在JavaScript里面写H5代码

Vue组件化开发

一. 通过axios实现数据请求 1. json简介 json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式. json的作用:在不同的系统平台,或不同编程语言之间传递数据. 1.1 json数据的语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者jso

vue组件化编程

一:vue项目目录 build : webpack.base.conf.js : config --> index.js 二:组件化编程相关文件分析 1.主页面 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initi

vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

vue组件化

全局组件 <!DOCTYPE html> <html> <head> <title>vue</title> <!-- <script src="./vue.js"></script> --> <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>

vue组件化开发实战 - 实现简易ElementUI的Form表单组件

Input 组件 功能: 进行数据双绑 通知FormItem组件校验 <template> <div> <input :type="type" :value="value" @input="onInput" v-bind="$attrs" > </div> </template> <script> export default { inheritAttrs

前端面试项目冲刺,京东金融Vue组件化实战

<section>课程地址 http://icourse8.com/vue_jujinahua.html </section> 章节信息第1章 课程介绍第2章 环境及知识准备第3章 业务开发流程与工程构建安装第4章 项目设计与原理分析第5章 京东金融首页第6章 京东金融理财页第7章 京东金融白条页第8章 京东金融众筹页第9章 活动专题页第11章 工程构建详解第12章 面试知识点与技巧第13章 课程总结第14章 直播视频<前端人的危机如何破解> public class

vue框架下的组件化的购物车实现

最近在学习vue,然后了解到这个框架的一个突出特点就是组件化,所以用这种形式实现了一个购物车,因为在实际项目中,数量加减可能不只在购物车里用到,所以把这个小的效果也提取出来了,在实现过程中形成了很多坑,这里记录一下,希望对大家能有所帮助. tip1: 这里会用到使用的组件库是vux,  需要先安装(npm insatall vux --save   npm install vux-loader --save-dev),然后具体怎么使用,如果不清楚请去看vux官网. 我把列表和底部的全选计数分别写