Vue.js学习笔记第八篇组件

全局注册组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-1">

        <global-component></global-component>

    </div>

    <script type="text/javascript">

        Vue.component('global-component', {

            template: '<div>一个自定义全局组件！</div>'

        })

        var vm1 = new Vue({

            el: '#app-1'

        })

    </script>

</body>

</html>

global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）

全局注册组件的语法格式为Vue.component(tagName, options)

全局注册的组件要在Vue实例化之前注册完成

局部注册组件

<div id="app-1">

    <local-component></local-component>

</div>

<script type="text/javascript">

    var localComponent = {

        template: '<div>一个自定义局部组件！</div>'

    }

    var vm1 = new Vue({

        el: '#app-1',

        // 局部注册的组件只能在父级模板中使用

        components: {

            'local-component': localComponent

        }

    })

</script>

Vue对象实例化时，第5个参数类型components(组件)

局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用

使用Props属性传参

<div id="app-2">

    <input v-model="content" placeholder="这里输入组件参数">

    <global-component v-bind:param="content"></global-component>

</div>

<script type="text/javascript">

    Vue.component('global-component', {

        props: ['param'],

        template: '<div>组件的参数：{{ param }}</div>'

    })

    var vm2 = new Vue({

        el: '#app-2',

        data: {

            content: ''

        }

    })

</script>

组件可以通过props属性来实现传参

列表渲染在组件中使用

一个很好玩的例子，把完整的代码贴出来

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-3">

        <input

            v-model="newTodoText"

            v-on:keyup.enter="addNewTodo"

            placeholder="输入一个等办事项"

        >

        <ul>

            <li

                is="global-component"

                v-for="(todo, index) in todos"

                v-bind:key="todo.id"

                v-bind:title="todo.title"

                v-on:remove="todos.splice(index, 1)"

            ></li>

        </ul>

    </div>

    <script type="text/javascript">

        // 使用$on(eventName)监听一个事件

        // 使用$emit(eventName)触发一个事件

        Vue.component('global-component', {

            template: '\

                <li>\

                    {{ title }}\

                    <button v-on:click="$emit(\'remove\')">X</button>\

                </li>\

            ',

            props: ['title']

        })

        var vm3 = new Vue({

            el: '#app-3',

            data: {

                newTodoText: '',

                todos: [

                    { id: 1, title: '洗碗' },

                    { id: 2, title: '倒垃圾' },

                    { id: 3, title: '除草' },

                ],

                nextTodoId: 4

            },

            methods: {

                addNewTodo: function() {

                    this.todos.push({

                        id: this.nextTodoId++,

                        title: this.newTodoText

                    })

                    this.newTodoText = ''

                }

            }

        })

    </script>

</body>

</html>

Vue.js学习笔记第八篇组件的更多相关文章

Vue.js 学习笔记第7章组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发组件(Compon ...
Vue.js学习笔记第七篇表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
Vue.js学习笔记第六篇内置属性
computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
Vue.js学习笔记第五篇事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
Vue.js学习笔记第四篇列表渲染
遍历数组和对象和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...
Vue.js学习笔记第三篇条件渲染
条件选择条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...
Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具基础类型数组元组枚举字面量接口类类型类类型要素函数函数参数 this对象和类型重载迭代器 Symbol.iterat ...
Vue.js学习笔记：在元素和 template 中使用 v-if 指令
f 指令语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

oracle em手动配置
转载自:http://www.cnblogs.com/sopost/archive/2010/08/14/2190098.html 用emca配置em emca是一个命令提示符,使用格式和方法在命令提 ...
HDOJ 4549 M斐波那契数列费马小定理+矩阵高速幂
MF( i ) = a ^ fib( i-1 ) * b ^ fib ( i ) ( i>=3) mod 1000000007 是质数 , 依据费马小定理 a^phi( p ) = 1 ( ...
《从零开始学Swift》学习笔记（Day 45）——重写方法
原创文章,欢迎转载.转载请注明:关东升的博客重写实例方法在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var name: S ...
Coursera课程《Machine Learning》学习笔记（week1）
这是Coursera上比较火的一门机器学习课程,主讲教师为Andrew Ng.在自己看神经网络的过程中也的确发现自己有基础不牢.一些基本概念没搞清楚的问题,因此想借这门课程来个查漏补缺.目前的计划是先 ...
B - Catch That Cow (抓牛)
B - Catch That Cow Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u ...
Python之可迭代对象、迭代器、生成器
在使用Python的过程中,很容易混淆如下几个关联的概念: 1.容器(container) 2.可迭代对象(Iterable) 3.迭代器(Iterator) 4.生成器(generator) 5.生 ...
dfs_部分和问题
给定整数a1,a2,....,an ,选若干数时它们的和为k. 解析:每个数有两种状态:加.不加. 全部n个数都决定其状态后进行判断.复杂度O(2n) 生成可行解空间多用dfs实现. import j ...
Linux 下安装svn
安装步骤如下: 1.yum install subversion 2.输入rpm -ql subversion查看安装位置,如下图: 我们知道svn在bin目录下生成了几个二进制文件. 输入 ...
转谈谈JS里的{ }大括号和[ ]中括号的用法，理解后就可以看懂JSON结构了。
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...
SpringBoot + Thymeleaf + Validate验证
在开发业务时,不可避免的需要处理一些校验, 如果是写 if-else 这种代码去校验, 那会有一大段这样的代码.不过还好有个校验插件: javax.validation.validation-api ...

Vue.js学习笔记 第八篇 组件