vue中的几种组件

8人阅读 评论(0) 收藏 举报
分类:

1、模版在字符串中

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todoitem',{
        template:'<div>Component</div>'
    });
    new Vue({
        el:'#app'
    });

</script>

2、script标签

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/x-template" id="myTemplate2">
<div>
    Component2
</div>
</script>
<script>
    Vue.component('todoitem',{
        template:'#myTemplate2'
    });
    new Vue({
        el:'#app'
    });

</script>

3.template标签

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="myTemplate3">
    <div>
        Component3
    </div>
</template>
<script>
    Vue.component('todoitem',{
        template:'#myTemplate3'
    });
    new Vue({
        el:'#app'
    });

</script>

4.单文件组件

这种方法常用在vue单页应用中。详情看官网:https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue,放到components文件夹中

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'hello',
        data () {
            return {
                msg: '欢迎!'
            }
        }
    }
</script>


app.vue

<!-- 展示模板 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
    </div>
</template>

<script>
    // 导入组件
    import Hello from './components/Hello'

    export default {
        name: 'app',
        components: {
            Hello
        }
    }
</script>
<!-- 样式代码 -->
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
</body>

查看评论

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1398

Vue.js 中,7种定义组件模板的方法

摘要:有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:字符串(String)模板字符串(Template literal)X-Templates内联(Inline)Render...
  • xinghuowuzhao
  • xinghuowuzhao
  • 2017-09-04 14:58:57
  • 1346

vue注册组件的几种方式

1、全局注册(这种方式注册组件必须在vue实例化之前声明)Vue.component('tag-name',{})2、局部注册var Child = { template: 'A custom c...
  • m0_37880452
  • m0_37880452
  • 2017-07-28 22:22:22
  • 1638

vue几种组件传值

VUE组件通信 1. 父子组件通信 (1)怎么定义是父子组件? 第一种:将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用自定义标签>自定义标签...
  • a15088712506
  • a15088712506
  • 2018-01-04 10:10:17
  • 937

vue改变组件对象值方法

1. 为对象或数组添加属性 Vue.set(this.singerData, 'singer4', 'there is nothing in singer4'); 表示向对象this.sing...
  • u012657197
  • u012657197
  • 2018-03-25 17:04:04
  • 81

第一节、什么是Vue组件及组件的注册方法

相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间。在一个项目中其实有很多可复用的代码块,如果我们...
  • gao531162436
  • gao531162436
  • 2017-12-06 19:02:44
  • 777

七周七种前端框架四:Vue.js 组件和组件通信

基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码...
  • lihongxun945
  • lihongxun945
  • 2016-04-28 15:55:04
  • 13607

vue组件之间的多种通信方法

vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了。这里提供三种不同情况下vue组件的通信方式。http://www.jianshu.com/p/a78277b...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-07 13:42:15
  • 1005

关于Vue.js 组件的使用及其概念

首先我们来看看 vue.js官网对于组件的描述 那么组件到底是一个什么东西呢,用一句简短的话来描述: 组件就是可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。 看...
  • wilesen
  • wilesen
  • 2017-07-26 11:15:59
  • 810

vue通信、传值的多种方式(详细)

Vue通信、传值的多种方式,详解(都是干货):一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)this.$route...
  • qq_35430000
  • qq_35430000
  • 2018-02-08 18:29:45
  • 1024
    个人资料
    持之以恒
    等级:
    访问量: 5万+
    积分: 1393
    排名: 3万+
    最新评论