组件的创建

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧！

这里有一个Vue组件的示例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<div id="app">

    <Vheader></Vheader>

    <Vheader></Vheader>

</div>

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

<script type="text/javascript">

    //组件的创建

     Vue.component('Vheader',{

            data:function(){

                return {

                   // 必须要return

                }

            },

            template:`<div class="header">

                        <div class="w">

                            <div class="w-l">

                                <img  src="./logo.png"/>

                            </div>

                            <div class="w-r">

                                <button>登录</button><button>注册</button>

                            </div>

                        </div>

                    </div>`

        })

    var app = new Vue({

        el:"#app",

        data:{

        },

        computed:{

        },

        method:{

        },

    })

</script>

</body>

</html>

官网：

https://cn.vuejs.org/v2/guide/components-registration.html

vue - 组件的创建的更多相关文章

  1. Vue组件component创建及使用

    组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...

  2. [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick

    思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...

  3. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  4. [vue]组件最佳实战

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  5. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  6. vue组件创建学习总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue系列之 => vue组件创建

    创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. vue 组件创建与销毁

    vue 组件(如对话框组件)实时创建与销毁: 使用v-if <search-history :show="showSearchHistory" @close="sh ...

  9. vue基础：组件的创建方式和组件的data值

    vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...

随机推荐

  1. 【权限维持】window服务端常见后门技术

    0x00 前言 未知攻焉知防,攻击者在获取服务器权限后,通常会用一些后门技术来维持服务器权限,服务器一旦被植入后门,攻击者如入无人之境.这里整理一些window服务端常见的后门技术,了解攻击者的常见后 ...

  2. Ansible 使用 Playbook 管理 Nginx 配置文件

    前面我们已经安装完 Nginx,但是在日常维护中经常需要修改配置文件,并重新加载配置文件,因此来写一个管理 Nginx 配置文件的 Playbook: [root@localhost ~]$ mkdi ...

  3. Push rejected: Push master to origin/master was rejected /failed to push some refs to /git did not exit cleanly

    用studio提交代码报 Push rejected: Push master to origin/master was rejected 用TortiuseGit提交代码报下面错,(我是用这种方法解 ...

  4. js同步 异步 运行机制

    需要知道的那些事: 1.JS是单线程的(为什么?因为能提高效率.作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM.而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执 ...

  5. Struts2(一)基本配置

    一.Struts2概述 1.什么是Struts2? Struts2以WebWork为核心,采用拦截器的机制来处理用户的请求,这样使得业务逻辑控制器能够和ServletAPI脱离开来. 2.工作原理 当 ...

  6. iOS - 实现语言本地化/国际化

      实现iOS语言本地化/国际化(图文详解) 前言 语言本地化,又叫做语言国际化.是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言.往往一些应用程序需要提供给多个 ...

  7. linux禁止IPv6

    1. 禁止加载IPv6模块 # echo "install ipv6 /bin/true" > /etc/modprobe.d/disable-ipv6.conf 每当系统需 ...

  8. Delphi应用程序的调试（四）The Debug Inspector

    调试检查器(The Debug Inspector) Debug Inspector使用户能查看诸如类和记录的数据对象,也可以用它来查看整数.字符数组等简单数据类型,但这类简单数据类型最好是用Watc ...

  9. jQuery缓存机制（三）

    缓存机制提供的入口有: $.data([key],[value]) // 存取数据 $.hasData(elem) // 是否有数据 $.removeData([key]) // 删除数据 $.acc ...

  10. 使用 mysql workbench 建议

    在日常使用mysql workbench时,未免操作失误,不建议启用远程管理.