组件的创建

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. 【Android】Android中如何取消调转界面后EditText默认获取聚焦问题

    参考资料: https://www.cnblogs.com/dream-cichan/p/aaaa.html http://blog.csdn.net/u013703461/article/detai ...

  2. RF采用SSHLibary库执行sudo命令，提示sudo: sorry, you must have a tty to run sudo错误的解决办法

    经了解Execute Command and Start Command两个关键字执行linux命令会新增一个shell,并且可能改变环境配置,如果要确保环境不被改变,则需采用Write和Read方法 ...

  3. Android--Led_Demo_APK控制LED灯

    下面代码主要实现接口定义,实现从.so库文件接口函数在JAVA里面的声明:package com.friendlyarm.AndroidSDK; import android.util.Log; pu ...

  4. 使用pyenv管理不同的python版本

    1. pvenv的安装 git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME ...

  5. Jar命令

    JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包;当然也是有区别的,JAR包中有一个META-INF\MANIFEST.MF文件,当你打成JAR包时,它会自动生成. 一.ja ...

  6. [Cubieboard] 在 Cubieboard 上安装 Node.js 和 npm

    你有两个选择可以实现在Cubieboard上安装NodeJS,下载别人已经编译完成适用于Cubieboard的NodeJS二进制包,或者自己下载源码自行在Cubieboard上进行编译. 使用编译完成 ...

  7. 【Java并发编程二】同步容器和并发容器

    一.同步容器 在Java中,同步容器包括两个部分,一个是vector和HashTable,查看vector.HashTable的实现代码,可以看到这些容器实现线程安全的方式就是将它们的状态封装起来,并 ...

  8. Barcode.js功能强大的条码生成jQuery插件

    本文转载自http://www.uedsc.com/barcode-js.html Barcode.js是一个基于jQuery库的插件,用于绘制条形码或者二维码,能够生成基于DIV+CSS或者Canv ...

  9. 《Windows内核编程》---系统线程和同步事件

    系统线程: 在驱动中生成的线程一般是系统线程,系统线程所在的进程名为“System”,用到的内核API函数是: NTSTATUS PsCreateSystemThread( OUT PHANDLE T ...

  10. 模型提升方法adaBoost

    他通过改变训练样本的权重,学习多个分类器,并将这些分类器进行线性组合,提高分类的性能. adaboost提高那些被前一轮弱分类器错误分类样本的权重,而降低那些被正确分类样本的权重,这样使得,那些没有得 ...