组件的创建

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. 开源CMS的比较和选择

    最近就cms系统折腾了一下,主要还是以 构架为主,以下做一个大概的比较: 1. Nuke 一般称为DNN,这是最开始Microsoft发布 的时候,用vb做了一个web的演示例子,最终这个例子发展成了 ...

  2. ice服务初探

    http://masterkey.iteye.com/blog/182975 http://blog.csdn.net/moxiaomomo/article/details/6773979 http: ...

  3. python中的数据类型与json的数据类型之间的转化

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  4. 删除sql注入

    ), );--过滤字符串 字符串及之后的数据将被替换为空 set @FilterStr='</title><style>.alx2{'; set @curTable='user ...

  5. PHP之Composer类库依赖管理神器

    Composer中文版说明见:https://github.com/kaka987/Composer-zh Composer 是PHP的类包依赖管理工具,用它可以轻松的引用第三方类包,类似于node的 ...

  6. Qt自定义控件大全（一）云台仪表盘控件

    做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程序简单 ...

  7. 【Spring Boot && Spring Cloud系列】那些Spring Boot中踩过的坑

    一.不连接数据库启动springboot报错 Cannot determine embedded database driver class for database type NONE 原因:Spr ...

  8. JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  9. IIS7 windows 下安装PHP

    首先要下载 php for windows 这个软件,百度一搜一大把. 1.我安装的是5.3.22版,就以这个为例给大家解说一下. 安装就是下一步,下一步,到一个选项 IIS FastCGI 选这个! ...

  10. java.util.concurrent.Future Basics

    Hereby I am starting a series of articles about future concept in programming languages (also known ...