1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue组件学习</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

        <table>

            <tbody>

                <row></row>

                <row></row>

                <row></row>

            </tbody>

        </table>

    </div>

    <script>

        Vue.component('row',{

            template: ' <tr><td>这是组件中的tr</td></tr>'

        })

        var vm = new Vue({

            el: '#root'

        })

    </script>

</body>

</html>

tr 组件不在table中

解决这个问题,就需要用到vue提供到的 is 属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue组件学习</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

        <table>

            <tbody>

                <tr is='row'></tr>

                <tr is='row'></tr>

                <tr is='row'></tr>

            </tbody>

        </table>

    </div>

    <script>

        Vue.component('row',{

            template: ' <tr><td>这是组件中的tr</td></tr>'

        })

        var vm = new Vue({

            el: '#root'

        })

    </script>

</body>

</html>

同理ul下的li,select下的option等也是一样的,加个is

2, 在组件中的data使用

<!DOCTYPE html>

<html lang="en">

<head>

    <title>vue组件学习</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

        <h3>{{content}}</h3>

        <table>

            <tbody>

                <tr is='row'></tr>

            </tbody>

        </table>

    </div>

    <script>

        Vue.component('row',{

            data: function () {

                return {

                    content: '我是组件中的data'

                }

            },

            template: ' <tr><td>{{content}}</td></tr>'

        })

        var vm = new Vue({

            el: '#root',

            data: {

                content:'我是根实例上的data',

            }

        })

    </script>

</body>

</html>

在根实例上的data是一个对象,在组件中的data是一个函数的返回值,原因是让这个组件多次调用的数据不冲突

3, ref的使用

在div中使用ref获取的是当前的div节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue组件学习</title>

    <script src="./vue.js"></script>

</head>

<body>

<div id="root">

    <div ref='divref' @click="handleClick">hello world</div>

</div>

<script>

    var vm = new Vue({

        el: '#root',

        methods: {

            handleClick: function () {

                console.log(this.$refs.divref)

            }

        }

    })

</script>

</body>

</html>

在子组件中使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue组件学习</title>

    <script src="./vue.js"></script>

</head>

<body>

<div id="root">

    <counter ref="one" @change="handleChange"></counter>

    <counter ref="two" @change="handleChange"></counter>

    <div>总计:{{total}}</div>

</div>

<script>

    Vue.component('counter',{

        template: '<div @click="handleClick">数字:{{number}}</div>',

        data: function () {

            return {

                number: 0

            }

        },

        methods: {

            handleClick: function () {

                this.number++;

                this.$emit('change');

            },

        }

    })

    var vm = new Vue({

        el: '#root',

        data: {

            total: 0

        },

        methods: {

            handleChange: function () {

                console.log('组件1的数字: '+this.$refs.one.number);

                console.log('组件2的数字: '+this.$refs.two.number);

                this.total = this.$refs.one.number + this.$refs.two.number;

            }

        }

    })

</script>

</body>

</html>

vue组件学习(一)的更多相关文章

  1. vue组件学习(二)

    父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...

  2. Vue组件学习

    根据Vue官方文档学习的笔记 在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是 ...

  3. Vue组件学习（转载）

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  6. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  7. Vue.js学习-组件注册与使用

    Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...

  8. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  9. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

随机推荐

  1. Visual Studio Code 折叠代码快捷键

    为了快速阅读不熟悉的代码, 最好可以打开一个文件能先将具体实现折叠起来的,进行一个大概的认识,vscode中有这些折叠快捷键: ctrl+shift+[是折叠 ctrl+k ctrl+0 是折叠全部 ...

  2. 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第1节 基本概念_01maven概述

  3. vs2010发布网站时有些文件没有发布出去的解决办法。

    项目中包含了一些ttf字体文件做为图标使用,可是发布时发现生成的目录中没有这个文件,这种情况这么设置一下就可以解决: 1,在文件上点击右键,选择“属性”. 2,在弹出的属性窗口中,更改“生成操作”为“ ...

  4. Java 语言特性之 Annotation 注解

    利用 Java 的反射机制,可以在运行时获取 Java 类的注解信息. 注解 注解的特性 注解是 Java 5 的一个新特性,是插入代码中的一种注释或者说是元数据.注解并不是程序代码,可以对程序作出解 ...

  5. .NetCore2.0项目之ABP+Vue(IView框架)单页应用之路,启动

    首先很久没有好好静下心来做点东西了,一直用忙碌做借口,实际还是懒,今天决定动一动. 第一步,下载自己的项目模板 首先vue项目国内的暂时还没有,要登录https://aspnetboilerplate ...

  6. vue--》如何使用wacth监听对象的属性变化？

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  7. 20191127 Spring Boot官方文档学习（6-8）

    6.部署Spring Boot应用程序 在部署应用程序时,Spring Boot的灵活打包选项提供了很多选择.您可以将Spring Boot应用程序部署到各种云平台,容器映像(例如Docker)或虚拟 ...

  8. Mongodb-简单部署

    一.MongoDB是一款NoSql数据库 二.部署单实例MongoDB 1.安装环境: (1)系统:Centos7.2 (2)MongoDB:Percona的MongoDB3.4 2.配置yum源 p ...

  9. Hive-多分隔符

    ROW FORMAT SERDE 'org.apache.hadoop.hive.contrib.serde2.MultiDelimitSerDe' WITH SERDEPROPERTIES (&qu ...

  10. C函数调用过程原理及函数栈帧分析（转）

    在x86的计算机系统中,内存空间中的栈主要用于保存函数的参数,返回值,返回地址,本地变量等.一切的函数调用都要将不同的数据.地址压入或者弹出栈.因此,为了更好地理解函数的调用,我们需要先来看看栈是怎么 ...