vue注册和简单使用

组件的出现就是为了解决页面布局等等一些列的问题。

vue中的组件分为两种，全局组件和局部组件。

一、注册全局组件

通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

<script>

    // Vue注册全局组件直接渲染使用

    Vue.component("global-component", {

            template: `

                <div>

                    <h1>{{name}}</h1>

                    <h3>{{name}}</h3>

                </div>`,

            data() {

                return {

                    name: "hello word"

                }

            }

        },

    );

    // 第二种  查找template

    new Vue({

        el: '#d1',

    })

</script>

全局组件简单示例

2. 第二种展示方法

示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

</div>

<script>

    // Vue注册全局组件直接渲染使用

    Vue.component("global-component", {

            template: `

                <div>

                    <h1>{{name}}</h1>

                    <h3>{{name}}</h3>

                </div>`,

            data() {

                return {

                    name: "hello word"

                }

            }

        },

    );

    // 第二种  查找template

    new Vue({

        el: '#d1',

        template: "<global-component></global-component>"

    })

</script>

<!-- 实例二 -->

<div id="components-demo">

    <button-counter></button-counter>

</div>

<script>

    Vue.component('button-counter', {

        data(){

            return {

                count: 0

            }

        },

        template: '<button v-on:click="count++">你点击了 {{ count }} 次.</button>'

    })

    new Vue({el: '#components-demo'})

</script>

</body>

</html>

二、组件的复用性

每个实例维护自己的一份独立的数据。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

    <global-component></global-component>

    <global-component></global-component>

    <global-component></global-component>

</div>

<script>

    // Vue注册全局组件直接渲染使用

    Vue.component("global-component", {

            template: `

                <div>

                    <h3>{{name}}</h3>

                    <h6>{{name}}</h6>

                </div>`,

            data() {

                return {

                    name: "hello word"

                }

            }

        },

    );

    // 第二种  查找template

    new Vue({el: '#d1', })

</script>

<!-- 实例二 -->

<div id="components-demo">

    <button-counter></button-counter>

    <button-counter></button-counter>

    <button-counter></button-counter>

</div>

<script>

    Vue.component('button-counter', {

        data(){

            return {

                count: 0

            }

        },

        template: '<button v-on:click="count++">你点击了 {{ count }} 次.</button>'

    });

    new Vue({el: '#components-demo'})

</script>

</body>

</html>

组件复用性

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

data（）{ }

data 必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

页面显示

三、局部组件注册和使用

1.全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

全局组件适中是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。

所以我们需要局部组件。不用的时候，被垃圾回收。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

    <!--局部组件使用 第一种展示  以DOM去展示 -->

    <App></App>

</div>

<script>

    // 创建局部组件

    let Header = {

        template: `

        <div>

            <h1>{{name}}</h1>

        </div>

        `,

        data() {

            return {

                name: 'hello word'

            }

        },

    };

    //声明一个Vue局部组件的入口

    // 所有组件都可以统一 一个接口

    let App = {

        template: `

        <div>

            <app-header></app-header>

        </div>

        `,

        components: {

            'app-header': Header  //所以的子组件都可以注册到这接口

            // 、、、、、  其他子组件等等

        }

    };

    //实例化一个Vue 注册 入口局部组件

    new Vue({

        el: "#d1",

        // template: `<App></App>`,

        //  第二种方法 就是作为根组件去展示

        components: {

            App,    //把入口组件注册下  不用注册所有的组件了

        },

    })

</script>

</body>

</html>

组件的注册和使用

注意：在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称

包含了这个组件选项的变量名

2.在模块中系统中局部注册

如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

四父子组件的通讯

1.props

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

porps:[数组 or object]

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="./static/vue.min.js"></script>

</head>

<body>

    <div id="app"></div>

<script>

    // 创建一个局部组件

    let Header = {

        template: `<div>

                <h2>{{ greeting }}</h2>

                <h3>{{ fData }}</h3>

            </div>

        `,

        props: ['fData'],  // 相当于相应复制一份数据用来子父之间数据交流

        data() {

            return {

                greeting: 'Hello, World'

            }

        },

    };

    // 在入口组件中注册你写的局部组件

    let App = {

        template: `

            <div>

                <page-header v-bind:fData="fatherData"></page-header>

            </div>

        `,

        // 绑定一个属性  对应父组件的 数据    通过在子组件 porps 设置的的 fData 来响应式获得父组件的数据

        components: {

            'page-header': Header,

        },

        data(){

            return {

                fatherData: "我是父组件中的数据"

            }

        }

    };

    new Vue({

        el: '#app',

        // 在Vue实例中注册你的所有组件的入口

        template: `<App></App>`,

        components: {

            App,

        }

    })

</script>

</body>

</html>

porps

2..vm.$emit( eventName, […args] )

参数：

{string} eventName
[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

实例：只配合一个事件名使用 $emit：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

    <welcome-button v-on:welcome="sayHi"></welcome-button>

    <!-- 展示元素 -->

</div>

<script>

    Vue.component('welcome-button', {

        template: `<button v-on:click="$emit('welcome')">

                        Click me to be welcomed

                    </button>`

        // 要生成元素的样式     绑定触发welcome   welcome的value是sayHi  sayHi的对应的函数的  弹窗

    });

    new Vue({

        el: '#d1',

        methods: {

            sayHi: function () {

                alert('Hi!')

            }

        }

    })

</script>

</body>

</html><!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

    <welcome-button v-on:welcome="sayHi"></welcome-button>

    <!-- 展示元素 -->

</div>

<script>

    Vue.component('welcome-button', {

        template: `<button v-on:click="$emit('welcome')">

                        Click me to be welcomed

                    </button>`

        // 要生成元素的样式     绑定触发welcome   welcome的value是sayHi  sayHi的对应的函数的  弹窗

    });

    new Vue({

        el: '#d1',

        methods: {

            sayHi: function () {

                alert('Hi!')

            }

        }

    })

</script>

</body>

</html>

$emit之弹窗示例

实例：配合额外的参数使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

</div>

<script>

    // 创建局部组件

    let Header = {

        template: `

        <div>

            <button @click="sonClick">点击变大</button>

        </div>>

        `,

        // 给按钮点击绑定上sonClick

        methods: {

            sonClick: function () {

                this.$emit('FatherSize', 0.1)  // 触发FatherSize，传参0.1

            }

        }

    };

    //创建一个父组件

    let App = {

        template: `

        <div>

            <span :style="{fontSize:postFontSize + 'em'}">我是父组件，我要变大</span>

            <my-header v-on:FatherSize="fatherClick"></my-header>

        </div>

        `,

        components: {

            "my-header": Header  // 注册子组件

        },

        data() {

            return {

                postFontSize: 1,  // 初始数据是1

            }

        },

        methods: {

            fatherClick: function (value) {

                // fatherClick 对应的方法是     默认初始数据 + 参数

                this.postFontSize += value

            }

        }

    };

    //实例化一个Vue 注册 入口局部组件

    new Vue({

        el: "#d1",

        template: `<App></App>`,

        components: {

            App,

        },

    })

</script>

</body>

</html>

$emit 传参之字体变大

五、混入：混入可以提高代码的重用性。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="vue.js"></script>

    <title>标题</title>

</head>

<body>

<div id="d1">

    <my-xiaoming></my-xiaoming>

    <my-xiaohong></my-xiaohong>

</div>

<script>

    // 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

    // 组件 1和 2 都是执行show和hide方法   那我就定义mixins  混合使用这个函数

    let mixs = {  // 定义一个混入对象

        methods: {

            show: function (name) {

                console.log(name + '来了');

            },

            hide: function (name) {

                console.log(name + '去了');

            }

        }

    };

    // 声明第一个使用混入的组件

    let name1 = {

        template: `<div>

                        <button @click="show('小明')">点击显示小明来了</button>

                        <button @click="hide('小明')">点击显示小明走了</button>

                    </div>`,

        mixins: [mixs],

    };

    //声明第二个使用混入的组件

    let name2 = {

        template: `<div>

                        <button @mouseenter="show('小红')">鼠标移入显示小红来了</button>

                        <button @mouseenter="hide('小红')">鼠标移入显示小红走了</button>

                    </div>`,

        mixins: [mixs],

    };

    //声明一个Vue实例

    new Vue({

        el: "#d1",

        components: {

            "my-xiaoming": name1,  // name1组件注册

            "my-xiaohong": name2,  // name2组件注册

        }

    })

</script>

</body>

</html>

混入

六、插槽

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

1.插槽

有时候需要给组件传递一些数据，这时候可以使用插槽

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="./static/vue.min.js"></script>

    <style>

        body {

            margin: 0;

        }

        .box {

            width: 50px;

            height: 50px;

            background-color: cornflowerblue;

            float: left;

            margin-left: 5px;

        }

    </style>

</head>

<body>

    <div id="app">

        <global-component>首页</global-component>

        <global-component>免费课程</global-component>

        <global-component>轻课</global-component>

        <global-component>智能题库</global-component>

        <global-component>学位课程</global-component>

    </div>

<script>

    Vue.component("global-component", {

        template: `

            <div class="box"><slot></slot></div>

        `

    });

    //

    new Vue({

        el: "#app",

    })

</script>

</body>

</html>

插槽

当组件渲染的时候，这个 <slot> 元素将会被替换为“首页”、"免费课程"、、等等你需要曹汝的数据。插槽内可以包含任何模板代码，包括 HTML

2.具名插槽

有些时候我们需要多个插槽 并且需要按照自己的顺序展示

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="./static/vue.min.js"></script>

    <style>

        body {

            margin: 0;

        }

        .box {

            width: 50px;

            height: 50px;

            background-color: cornflowerblue;

            float: left;

            margin-left: 5px;

        }

    </style>

</head>

<body>

    <div id="app">

        <global-component>

            <div slot="home">首页</div>

            <div slot="Qing">轻课</div>

            <div slot="Ke">课程</div>

        </global-component>

    </div>

<script>

    Vue.component("global-component", {

        template: `

            <div >

                <slot name="Qing"></slot>

                <slot name="Ke"></slot>

                <slot name="home"></slot>

            </div>

        `

    });  // 页面展示顺序 是按照template中的顺序  插入数据 按照自己的顺序展示

    // 轻课

    // 课程

    // 首页

    new Vue({

        el: "#app",

    })

</script>

</body>

</html>

具名插槽

vue注册和简单使用的更多相关文章

全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客具体内容展示开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
为什么VUE注册组件命名时不能用大写的？
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题本节目录一阶段性项目流程梳理二 vue切换图片三 vue中使用ajax 四 vue实现音乐播放器五 vue的计算属性和监听器六 ...
angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
前台vue的使用简单小结
前台vue的使用简单小结本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
axios在Vue中的简单应用（一）
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题本节目录一阶段性项目流程梳理二 vue切换图片三 vue中使用ajax 四 vue实现音乐播放器五 vue的计算属性和监听器六 ...
C#操作注册表(简单方便,兼容X32和X64)
C#操作注册表(简单方便,兼容X32和X64) 大家好,我在这里给大家介绍本人实现的操作注册表的类,简单方便,兼容32位系统和64位系统. 一般大家用C#操作注册的方法是使用命名空间Microsoft ...

随机推荐

《剑指offer》二维数组中的查找
本题目是<剑指offer>中的题目二维数组中的查找题目: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个 ...
CF451E
一道不错的题,对排列组合能力的要求较高题意:给定s个相同的小球放在n个不同的盒子里,可以不放,每个盒子有一个放的上限,求一共有多少种放法解析:首先考虑没有上限的情况,这里比较好解决,采用隔板法,可 ...
CF558E
非常好的一道题,是线段树的常见玩法将字符串转化为1~26个数对区间开一棵线段树,用两个数组分别维护区间中1~26每个数的个数以及一个区间覆盖标记,表示这个区间是否被某一个值覆盖了在每次排序时,首 ...
JS判断元素动画是否执行完成
使用animationend方法 var ele = document.getElementById("box"); ele.addEventListener("anim ...
python函数之各种器
一: 装饰器 1:装饰器模板 def wrapper(func): def inner(*args,**kwargs): ret =func(*args,**kwargs) return ret re ...
Tensorflow生成唐诗和歌词（下）
整个工程使用的是Windows版pyCharm和tensorflow. 源码地址:https://github.com/Irvinglove/tensorflow_poems/tree/master ...
支持向量机-完整Platt-SMO算法加速优化
完整版SMO算法与简单的SMO算法: 实现alpha的更改和代数运算的优化环节一模一样,唯一的不同就是选择alpha的方式.完整版应用了一些能够提速的方法. 同样使用Jupyter实现,后面不在赘述 ...
笔记本如何设置插入USB鼠标自动禁用触摸板
Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Synaptics\SynTPEnh] [HKEY_LOCAL_MAC ...
jdk1.8学习、jdk1.9学习、jdk10.0学习和总结
由于中文参考资料很少,参考链接: https://www.oschina.net/translate/109-new-features-in-jdk-10 http://chuansong.me/n/ ...
javaScript事件（七）事件类型之键盘与文本事件
键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...

vue注册和简单使用

vue注册和简单使用的更多相关文章

随机推荐

热门专题