组件的创建

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. SaltStack salt-run 命令

    salt-run 常见用法如下: salt-run manage.up # 查看在线的minion salt-run manage.down # 查看不在线的minion salt-run manag ...

  2. Splash 简介与安装

    Splash 说白了就是一个轻量级的浏览器,利用它,我们同样可以实现跟其他浏览器一样的操作,我们使用 Docker 来安装 Splash: [root@localhost ~]# docker run ...

  3. Java中获取资源文件的方法总结

    这里总结3中方法获取资源文件的 ServletContext Class ClassLoader 文件的位置 1. ServletContext public void doGet(HttpServl ...

  4. U3D优化

    容易忽略的美术资源的优化: 优化的美术制作真是一种感觉和经验的积累,能看出制作水平的不是做的效果多么犀利,而是得看制作的效果与对机器的要求等的性价比. 关于合并:  100个三角形的MESH,在渲染时 ...

  5. Windows命令行参数的知识（一）

    最近没事的时候,准备研究一下Windows命令行参数的知识,因为每次自己在操作电脑时总是效率太慢,如果能够了解Windows参数的一些知识,绝对能提高效率! 基本外部命令和内部命令 首先是基本的知识, ...

  6. STL——算法简介

    一.算法概观 以有限的步骤,解决逻辑或数学上的问题,这一专门科目我们称为算法.特定的算法往往搭配特定的数据结构,例如binary search tree(二叉搜索树)和 RB-tree 便是为了解决查 ...

  7. nodeJs学习过程之一个图片上传显示的例子

    目标 1. 在浏览器地址栏输入“http://demos/start”,进入欢迎页面,页面有一个文件上传表单: 2. 选择一张图片并提交表单,文件被上传到"http://demos/uplo ...

  8. php基础设计模式 注册树模式、工厂模式、单列模式

    废话不多说了,先给大家介绍注册树模式然后介绍工厂模式最后给大家介绍单列模式,本文写的很详细,一起来学习吧. php注册树模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里 ...

  9. 《转》win7 安装ujson 出现的“error: Microsoft Visual C++ 9.0 is required. Get it from http://aka.ms/vcpython27”

    本文转载自http://blog.csdn.net/Tilyp/article/details/72842800?locationNum=2&fps=1 我的python环境是 D:\work ...

  10. 从Eclipse转移到IntelliJ IDEA的一点心得

    IntelliJ使用指南—— 深入理解IntelliJ的Web部署逻辑 Intellij IDEA 部署Web项目,解决 404 错误 Intellij IDEA快捷键的使用 本文转载地址 本人使用I ...