一、组件介绍

  • 每一个组件都是一个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. 设置全局context变量 （显示用户登录名）

    比如在每个页面的最上面部分需要显示用户的登录名称,如果不登录则显示为Guest.这部分内容在每个页面都会出现,所以可将该部分内容作为一个公共模板(如userauth.html),如然后在其他模板中进行 ...

  2. Linux 用户和用户组详解

    用户分类 超级用户:UID范围 0 root用户:uid=0(root) gid=0(root) groups=0(root) 普通用户:由管理员创建,UID范围(500-65535) --> ...

  3. Linux sudo详解

    sudo:控制用户对系统命令的使用权限,root允许的操作.通过sudo可以提高普通用户的操作权限,不过这个权限是需要进行配置才可使用. 常用的命令展示 配置sudo的2种方式 1. visodu 编 ...

  4. ZT Android 4.2蓝牙介绍

    Android 4.2蓝牙介绍 分类: Android开发系列 2013-06-27 14:16 7110人阅读 评论(22) 收藏 举报 目录(?)[-] Android 42蓝牙介绍 一  蓝牙规 ...

  5. 循环while 和 continue

    while 1: print("行动吧") # 组成:while 条件: #条件为真,则执行语句块.之后再回去判断条件是否为真,再执行....till条件为假为止. 语句块 # 条 ...

  6. 【转载】uWSGI配置翻译

    英文原版: http://uwsgi-docs.readthedocs.io/en/latest/Options.html 转载地址: http://www.cnblogs.com/zhouej/ar ...

  7. python多进程（二）

    之前实现的数据共享的方式只有两种结构Value和Array.Python中提供了强大的Manager专门用来做数据共享的,Manager是进程间数据共享的高级接口. Manager()返回的manag ...

  8. OpenCV2马拉松第2圈——读写图片

    收入囊中 用imread读取图片 用nameWindow和imshow展示图片 cvtColor彩色图像灰度化 imwrite写图像 Luv色彩空间转换 初识API 图像读取接口 image = im ...

  9. [luogu3942] 将军令

    题面 ​ 题目的意思大概是给你一棵n个点的树, 求最少需要多少个多少个点, 整棵树都被覆盖(覆盖的意思是所有离被选中的点距离不大于k的点都视作已覆盖). ​ 考虑贪心(其实我考试的时候以为是道树形dp ...

  10. Python之Bottle框架使用

    本文主要包含的内容是Bottle框架介绍和安装使用. 一.Bottle框架介绍 Bottle是一个快速小巧,轻量级的 WSGI 微型 web 框架.同时Bottle也是一个简单高效的遵循WSGI的微型 ...