一、组件介绍

  • 每一个组件都是一个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. svn回退到具体的版本

    svn回退到具体的版本 找到项目的版本号 命令行中输入相关命令  到指定地点找到项目即可

  2. umount nfs文件系统 显示 umount.nfs: device is busy

    网上的方法一般都是 fuser -m  /nfs 查出进程号,然后杀死进程号,或者fuser -km /nfs直接杀死,我试了下都不行 解决方法: 对于nfs文件系统来说,umount -l /nfs ...

  3. Linux 文件的详解[分类/扩展名/inode/block]

    关于Linux文件的介绍 Linux里文件扩展名和文件类型没有关系,Linux系统中一切皆文件 关于Linux文件分类 纯文本文件(可以cat的)     二进制文件(Linux的可执行文件等,如/b ...

  4. Office 365 Pass-through身份验证及Seamless Single Sign-On

    Hello 小伙伴们, 这篇文章将视点聚焦在传递身份验证(Pass-through Authentication)上,将分享如何安装,配置和测试Azure Active Directory(Azure ...

  5. wrap装饰器包

    import wrapt # without argument in decorator @wrapt.decorator def logging(wrapped, instance, args, k ...

  6. 字符串,元组,列表; 切片&range

    总结:字符串: "" 组成元组: () 组成列表: [] 组成 切片 中括号冒号: [5: 0: -2] # print(s2[5:0:-2]) 此步长为-2,则从右往左取, 则a ...

  7. cocos2d-x发生undefined reference to `XX'异常 一劳永逸解决的方法

    转自:http://www.myexception.cn/operating-system/1620542.html cocos2d-x发生undefined reference to `XX'错误 ...

  8. 1、JVM-走进java

    1.1.概述 Java不仅仅是一门编程语言,还是一个由一系列计算机软件和规范形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于嵌入式系统.移动终端.企业服务器.大 ...

  9. virtualbox+vagrant学习-2(command cli)-6-vagrant init命令

    Init——创建Vagrantfile文件 格式: vagrant init [options] [name [url]] 通过创建初始的Vagrantfile文件(如果不存在的话),将当前目录初始化 ...

  10. zoc license code

    点击导航栏上的zoc-about zoc,然后: 点击enter license: 然后输入内容即可: part A:  51698/01027/34713 part B:  00937 还有很多其他 ...