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>
</head>
<body>
    <div id="root">
        <input v-model="inputValue"/>
        <button @click="addTextFunc">提交</button>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>
        //全局组件
        Vue.component("TodoItem", {
            props: ["content"],
            template: "<li>{{content}}</li>"
        })
        var app = new Vue({
            el: "#root",
            data: {
                list: []
            },
            methods: {
                addTextFunc: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ""
                }
            }
        });
    </script>
</body>
</html>

局部组件

<!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>
</head>
<body>
    <div id="root">
        <input v-model="inputValue"/>
        <button @click="addTextFunc">提交</button>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>
        //局部组件
        var TodoItem = {
            props: [‘content‘],
            template: "<li>{{content}}</li>"
        }
        var app = new Vue({
            el: "#root",
            //注册TodoItem组件
            components: {
                TodoItem: TodoItem //命名叫TodoItem,在实例中也叫TodoItem
            },
            data: {
                list: []
            },
            methods: {
                addTextFunc: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ""
                }
            }
        });
    </script>
</body>
</html>

子组件、父组件双向传递数据

<!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> -->
</head>
<body>
    <div id="root">
        <input v-model="inputValue"/>
        <button @click="addTextFunc">提交</button>
        <ul>
            "v-bind:"可以简写为":"
            <todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleItemDelete"></todo-item>
        </ul>
    </div>
    <script>
        //局部组件
        var TodoItem = {
            props: [‘content‘, ‘index‘], //要使用就要声明(父组件给子组件传值,子组件要接收!)
            //v-on:click的简写:@click
            template: "<li @click=‘handleItemClick‘>{{content}}</li>",
            methods: {
                handleItemClick() {
                    //子组件向父组件传值(触发事件,父组件的@delete="handleItemDelete"在监听)
                    this.$emit("delete", this.index); //不但触发delete时间,同时还把this.index作为参数给父组件
                }
            }
        }
        var app = new Vue({
            el: "#root",
            //注册TodoItem组件
            components: {
                TodoItem: TodoItem //命名叫TodoItem,在实例中也叫TodoItem
            },
            data: {
                list: []
            },
            methods: {
                addTextFunc: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ""
                },
                handleItemDelete: function(index) { //此处接收传过来的this.index
                    //全部删除
                    //this.list = []
                    //删除点击的数据(标识为当前数据的index)
                    this.list.splice(index, 1)
                }
            }
        });
    </script>
</body>
</html>

原文地址:https://blog.51cto.com/5660061/2418866

时间: 2024-10-01 01:24:53

vue组件化的相关文章

vue组件化的应用

前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个页面中,需要一个固定的内容,这个内容可以多次引用,那么就可以考虑把他分离出来,在下次需要的时候,实现引用就好. 比如: <input type="text" v-model="content" > <button @click = addList>

前端框架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组件化开发实战 - 实现简易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官网. 我把列表和底部的全选计数分别写