一、组件介绍

  • 每一个组件都是一个vue实例

  • 每个组件均具有自身的模板template，根组件的模板就是挂载点

  • 每个组件模板只能拥有一个根标签

  • 子组件的数据具有作用域，以达到组件的复用

二、局部组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>局部组件</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 错的 -->

        <!-- <localTag></localTag> -->

        <!-- ① -->

        <!-- <localtag></localtag> -->

        <!-- ② ③ ④ ⑤ -->

        <local-tag></local-tag>

        <local-tag></local-tag>

        <!-- 总结：组件与html公用的名称(组件名、方法名、变量名)，不要出现大写，提倡使用-语法 -->

    </div>

</body>

<script type="text/javascript">

    // 创建局部组件:就是一个拥有模板(满足vue写法)的对象

    var localTag = {

        // 模板

        // 错误: 只能解析第一个标签，以它作为根标签

        // template: '<div>局部组件1</div><div>局部组件2</div>'

        template: '\

        <div>\

            <div>局部组件1</div>\

            <div>局部组件2</div>\

        </div>'

    }

    // 局部组件需要被使用它的父组件注册才能在父组件中使用

    // 模板: html代码块

    // 根组件，拥有模板，可以显式的方式来书写template，一般不提倡，模板就是挂载点及内部所有内容

    // 注：挂载点内部一般不书写任何内容

    new Vue({

        el: '#app', // old

        // template: '<div></div>' // new

        // 用components进行组件的注册

        // ①

        // components: {

        //     'localtag': localTag

        // }

        // ②

        // components: {

        //     'local-tag': localTag

        // }

        // ③

        // components: {

        //     'localTag': localTag

        // }

        // ④

        components: {

             'LocalTag': localTag

        }

        // ⑤

        // ES6 key与value一直，可以单独写key

        // components: {

        //     localTag

        // }

    })

</script>

</html>

三、全局组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>全局组件</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <global-tag></global-tag>

        <global-tag></global-tag>

    </div>

</body>

<script type="text/javascript">

    // 创建全局组件： 组件名, {template:''}

    Vue.component('global-tag', {

        // data: function () {

        //     return {

        //         num: 0

        //     }

        // },

        data () {

            return {

                num: 0

            }

        },

        template: '<button @click="btnClick">点击了{{num}}下</button>',

        methods: {

            btnClick () {

                console.log("你丫点我了！！！");

                this.num ++

            }

        }

    })

    new Vue({

        el: '#app',

        data: {

        }

    })

</script>

</html>

四、父组件传递数据给子组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>父传子</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 通过属性绑定的方式 -->

        <!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> -->

        <global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag>

        <!-- 模板名用-连接命名，属性名用_连接命名 -->

    </div>

</body>

<script type="text/javascript">

    // 子组件需要接受数据

    Vue.component('global-tag', {

        // 通过props来接收绑定数据的属性

        // props: ['abc', 'supd2'],

        props: ['abc', 'sup_d2'],

        // template: '<div><p @click="fn">{{ abc }}</p></div>',

        template: '<div><p @click="fn(abc)">{{ abc }}</p></div>',

        methods: {

            // fn () {

            //     alert(this.abc)

            // }

            fn (obj) {

                console.log(obj, this.sup_d2)

            }

        }

    })

    // 数据是父组件的

    new Vue({

        el: '#app',

        data: {

            sup_d1: "普通字符串",

            sup_d2: [1, 2, 3, 4, 5]

        }

    })

</script>

</html>

五、子组件传递数据给父组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>子传父</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 通过发送事件请求的方式进行数据传递(数据作为请求事件的参数) -->

        <global-tag @send_data='receiveData'></global-tag>

        <p>{{ msg }}</p>

    </div>

</body>

<script type="text/javascript">

    Vue.component('global-tag', {

        data () {

            return {

                sub_v1: '普通字符串',

                sub_v2: [1, 2, 3, 4, 5]

            }

        },

        template: '<button @click="btnClick">发送</button>',

        methods: {

            btnClick () {

                console.log("子>>> ", this.sub_v1, this.sub_v2);

                // 通过emit方法将数据已指定的事件发生出去

                // 事件名, 参数...

                this.$emit("send_data", this.sub_v1, this.sub_v2)

            }

        }

    })

    // 数据是父组件的

    new Vue({

        el: '#app',

        data: {

            msg: ''

        },

        methods: {

            receiveData(obj1, obj2) {

                console.log("父>>> ", obj1, obj2)

                this.msg = obj2;

            }

        }

    })

</script>

</html>

六、父组件实现todoList

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>组件todoList</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div>

            <input type="text" v-model='in_val'>

            <button @click='pushAction'>提交</button>

        </div>

        <!-- <ul>

            <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>

        </ul> -->

        <!-- 父 将list传输给 子 -->

        <todo-list :list_data='list' @delete_action='deleteAction'></todo-list>

    </div>

</body>

<script type="text/javascript">

    Vue.component('todo-list', {

        props: ['list_data'],

        template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>',

        methods: {

            li_action (index) {

                // 子 反馈index给 父

                this.$emit('delete_action', index);

            }

        }

    })

    new Vue({

        el: '#app',

        data: {

            in_val: '',

            list: []

        },

        methods: {

            pushAction () {

                this.list.push(this.in_val);

                this.in_val = ''

            },

            deleteAction (index) {

                this.list.splice(index, 1);

            }

        }

    })

</script>

</html>

七、搭建Vue开发环境

1、安装nodeJS

2、安装脚手架

  • vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

安装全局vue：npm install -g @vue/cli

​

在指定目录创建vue项目：vue create my-project

​

进入项目目录启动项目：npm run serve

​

通过指定服务器路径访问项目页面：http://localhost:8080/

3、项目创建

babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、vue基础模板

<template>

</template>

<script>

    export default {

    }

</script>

<style scoped>

</style>


npm install -g vue-cli

​

vue init webpack my-project

​

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue复习(二)的更多相关文章

  1. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  2. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. vue复习

    vue 复习   options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象   对象中的key, 可以直接在页面中 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  6. 前端笔记之Vue（二）组件&案例&props&计算属性

    一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...

  7. Vue（二十七）当前GitHub上排名前十的热门Vue项目（转载）

    原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components ...

  8. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  9. vue(基础二)_组件，过滤器，具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

随机推荐

  1. 显示脉冲效果的PulsingView

    显示脉冲效果的PulsingView 效果如下: 源码: PulsingView.h 与 PulsingView.m // // PulsingView.h // PulsingView // // ...

  2. cxfreeze打包python程序的方法说明（生成安装包，实现桌面快捷方式、删除快捷方式）

    一.cxfreeze基础 1.cxfreeze功能 python代码文件转exe方法有三种,分别是cx_freeze,py2exe,PyInstaller,这三种方式各有千秋,本人只用过py2exe和 ...

  3. C++:sprintf()的用法（转）

    转:http://blog.csdn.net/masikkk/article/details/5634886 更多:http://blog.csdn.net/zjuwispersure/article ...

  4. python第三课——数据类型2

    day03: 1.列表:list 特点:有序的(有索引.定义和显示顺序是一致的).可变的(既可以改变元素内容也可以自动扩容).可重复的. 可以存储任何的数据类型数据 定义个列表如下: lt = ['宋 ...

  5. PHPExcel 导入

    首先: //包含excel的类库require APPPATH . 'third_party/PHPExcel.php';require APPPATH . 'third_party/PHPExcel ...

  6. UVa 10213 - How Many Pieces of Land ?（欧拉公式）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. Golang包管理工具glide简介

    Golang包管理工具glide简介 前言 Golang是一个十分有趣,简洁而有力的开发语言,用来开发并发/并行程序是一件很愉快的事情.在这里我感受到了其中一些好处: 没有少了许多代码格式风格的争论, ...

  8. JS判断指定dom元素是否在屏幕内的方法实例

    前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...

  9. 安装github教程

    1.注意事项 .在FF和chrome会把GitHub.application当成一个应用程序下载下来,安装下载下来的程序也会失败的,只能通过ie直接安装. 2.要用https,不能用http. 2.安 ...

  10. Jumpserver堡垒机搭建

    系统: CentOS 7 IP: 192.168.11.199关闭 selinux 和防火墙 # setenforce # 临时关闭,重启后失效 # systemctl stop firewalld. ...