一、组件介绍

  • 每一个组件都是一个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. json格式转换（json,csjon)（天气预报）

    json格式数据默认为string,可以使用eval()函数或者json模块将其转换为dict.标准Json字符串必须使用双引号(")而不能使用单引号('),否则从字符串转换成dict类型会 ...

  2. November 23rd 2016 Week 48th Wednesday

    I always like walking in the rain, so no one can see me crying. 我一直喜欢在雨中行走,那样就没人能看到我的眼泪. I like walk ...

  3. #001 Emmet的API图片

    这个是一张Emmet的快捷键图片,里面包含了所有的快捷键. 虽然有很多的快捷键,但是常用的也就那么几个   .   样式 #  ID >  上下级节点 +  .col-md-8+.col-md- ...

  4. chrome开发者工具那点事

    Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行She ...

  5. 4-5 R语言函数 split

    #split根据因子或因子列表将 向量或其他对象分组 #通常与lapply一起使用 #split(参数):split(向量/列表/数据框,因子/因子列表) > x <- c(rnorm(5 ...

  6. 20165318 2017-2018-2 《Java程序设计》第六周学习总结

    20165318 2017-2018-2 <Java程序设计>第六周学习总结 教材内容学习总结 第八章 常用实用类 1.String类 String类用来处理字符序列,在java.lang ...

  7. R执行报错：Error in `[<-.ts`(`*tmp*`,...only replacement of elements is allowed

    原因: pred$mean是Time-Series类型,rbind函数不支持.通过as.double将其转换成double类型即可. 修改前代码: all_predata_time <- dat ...

  8. 记录一个python公式罗列的方法 join()方法和map()方法的妙用

    题干: 怎样将一个列表中的元素读出,并列出计算式子 比如:[,,,] 输出:+++ = 列表中的元素个数不定 小白和大神的方法: #小白的 numlist=[,,,] sum1='' cal='+' ...

  9. TCL函数“参数自动补全” 与 “help 信息显示”

    tcl 函数参数自动补全和 help 信息显示 在EDA tool 中使用命令时,命令的参数可以通过 tab 键自动补全,而且可以使用 -help 显示帮助信息,使用起来很方便: 那么我们自己编写的 ...

  10. java xml文件

    xml: 是可扩展的标签语言.其中标签可以自定义. 作用是存储数据,即配置文件. 书写规范: 1:区分大小写,html不区分. 2:应该有根标签(类似html的<html>标签) 3:标签 ...