组件的创建

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. Struts2开发模式漏洞

    当Struts2中的devMode模式设置为true时,存在严重远程代码执行漏洞.如果WEB服务以最高权限运行时,可远程执行任意命令,包括远程控制服务器. 如果为受影响的版本,建议修改配置文件stru ...

  2. 基于端口的弱口令检测工具--iscan

    亲手打造了一款弱口令检测工具,用Python编写,主要可以用于内网渗透.弱口令检测等方面,目前集成了常见端口服务,包含 系统弱口令:ftp.ssh.telnet.ipc$ 数据库弱口令:mssql.m ...

  3. Python 网络爬虫

    爬虫介绍 爬取图片 爬取文本 爬虫相关模块:re 爬虫相关模块:urllib 爬虫相关模块:urllib2 爬虫相关模块:cookielib 爬虫相关模块:requests 爬取需要登录的页面

  4. 【Studio】解决格式化时，注释部分没有缩进的问题

    android studio默认代码格式化(默认Ctrl+Alt+L),是让注释从每行最左边开始显示,比如这样: 我个人喜欢注释也要缩进对齐.其实这个需要自己设置,打开studio的设置,依次找 Se ...

  5. VS自动添加头部注释

    让VS自动生成类的头部注释,只需修改两个文集即可,一下两个路径下个有一个 Class.cs文件 D:\Program Files (x86)\Microsoft Visual Studio 14.0\ ...

  6. 题目1448：Legal or Not（有向无环图判断——拓扑排序问题）

    题目链接:http://ac.jobdu.com/problem.php?pid=1448 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  7. sencha touch 实现安卓toast效果（2013-9-26）

    如图中效果,代码很简单.就是利用st的loadmask来实现,可以看看api实现其他效果. /*添加消息提示组件*/ masked: { xtype: 'loadmask', cls: 'messag ...

  8. mysql概要（十四）(二)索引（补充：外键级联操作）

    [ ON DELETE { NO ACTION | CASCADE | SET NULL | SET DEFAULT } ] [ ON UPDATE { NO ACTION | CASCADE | S ...

  9. iOS － 沙盒机制（SandBox)和获取沙盒路径

    iOSAPP可以在自己的沙盒里读写文件,但是,不可以访问其他APP的沙盒.每一个APP都是一个信息孤岛,相互是不可以进行通信的,唯独可以通过URLScheme.沙盒里面的文件可以是照片.声音文件.文本 ...

  10. yii的安装

    1.安装composer windows系统直接下载Composer-Setup.exe 运行安装. 2.安装Composer asset plugin composer安装完成后,在一个可通过web ...