<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

         <style>

             .active {

                 color:red

             }

         </style>

     </head>

     <body>

         <div id="app">

             <table>

                 <tbody>

                     <tr is="row"></tr>

                     <tr is="row"></tr>

                     <tr is="row"></tr>

                 </tbody>

             </table>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script>

             Vue.component('row',{

                 template: '<tr><td>this is row</td></tr>'

             })

             var app = new Vue({

                 el: '#app'

             })

         </script>

     </body>

 </html>

注意：table 里面只能写tr>td, 使用is=row,若直接使用<row></row>则template模板不在table里面。其它select ,ul, ol等都是用is

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue</title>

        <style>

            .active {

                color:red

            }

        </style>

    </head>

    <body>

        <div id="app">

            <table>

                <tbody>

                    <tr is="row"></tr>

                    <tr is="row"></tr>

                    <tr is="row"></tr>

                </tbody>

            </table>

        </div>        

        <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            Vue.component('row',{

                data: function() {//子组件里的data是function而不是object, 且使用return

                    return {

                        content: 'this is row'

                    }

                },

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

            })

            var app = new Vue({

                el: '#app'

            })

        </script>

    </body>

</html>

/子组件里的data是function而不是object, 且使用return

让每一个子组件都拥有一个独立的数据存储，不会出现多个子组件之间互相影响的情况

ref

vue一般不操作dom节点，但如果要操作的话可以用ref

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

         <style>

             .active {

                 color:red

             }

         </style>

     </head>

     <body>

         <div id="app">

             <div ref="hello" @click="handleDivClick">Hello World</div>

         </div>        

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script>

             var app = new Vue({

                 el: '#app',

                 methods: {

                     handleDivClick: function() {

                         console.log(this.$refs.hello);

                         console.log(this.$refs.hello.innerHTML);

                     }

                 }

             })

         </script>

     </body>

 </html>

用ref实现的子组件相加得到父组件的total值

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

         <style>

             .active {

                 color:red

             }

         </style>

     </head>

     <body>

         <div id="app">

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

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

             <div>{{total}}</div>

         </div>        

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script>

             Vue.component('counter' , {

                 data: function() {

                     return {

                         num: 0

                     }

                 },

                 template: '<div @click="handleDivClick">{{num}}</div>',

                 methods: {

                     handleDivClick: function() {

                         this.num++;

                         this.$emit('change');

                     }

                 }

             })

             var app = new Vue({

                 el: '#app',

                 data: {

                     total:0

                 },

                 methods: {

                     handleChange: function() {

                         console.log(this.$refs.one);

                         console.log(this.$refs.two);

                         return this.total = this.$refs.one.num + this.$refs.two.num;

                     }

                 }

             })

         </script>

     </body>

 </html>

vue组件 is ref的更多相关文章

  1. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  2. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  3. Vue组件实例间的直接访问

    前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...

  4. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  5. vue2.0 如何自定义组件（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  6. vue组件，可以通过npm引用的组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 ...

  7. 移动端无限滚动 TScroll.vue组件

    // 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...

  8. 如何把一个vue组件改为ionic/angular组件

    同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...

  9. webAPP如何实现移动端拍照上传（Vue组件示例）？

    摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...

随机推荐

  1. 使用KEIL C51实现的简单合作式多任务操作系统内核（单片机实现版本）

    基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...

  2. PHP面向对象：instanceof 运算符

    http://www.nowamagic.net/php/php_InstanceofOperator.php 在PHP5中,通过方法传递变量的类型有不确定性.于是我们很难判断,一些操作是否可以运行. ...

  3. QT文件和目录

    一.文件操作 QFile和QFileInfo: #include <QCoreApplication> #include <QFileInfo> #include <QS ...

  4. LUOGU P4587 [FJOI2016]神秘数(主席树)

    传送门 解题思路 如果区间内没有\(1\),那么答案就为\(1\),从这一点继续归纳.如果区间内有\(x\)个\(1\),设区间内\([2,x+1]\)的和为\(sum\),如果\(sum=0\),那 ...

  5. MSSQLSERVER错误1

      错误信息 数据库日志记录 09/07/2017 16:10:31,登录,未知,Login failed for user 'NT AUTHORITY\SYSTEM'. 原因: 无法打开明确指定的数 ...

  6. Android学习拾遗

    1. java中的flush()作用:强制将输出流缓冲区的数据送出. 2. 文件存储: 存储到内部:另外使用一个class实现,最开始初始化用了this,后来放在这里不合适,改成了带参数的构造方法. ...

  7. mysql添加索引和sql分析

    mysql索引操作 查看索引 show indexes from students; #students为表名 mysql添加索引命令 创建索引 .PRIMARY KEY(主键索引) mysql> ...

  8. Xcode 5 下的单元测试

    新版Xcode 5和Server发布以后,apple对单元测试的支持是越来越好了.从这一点看出apple对单元测试的也是越来越重视了. 这篇Blog就简单的介绍这集成化测试功能. Server更新后是 ...

  9. 如何让EditText不能自动获取焦点（转）

    转载地址:http://blog.csdn.net/subaohao/article/details/9043895 在activity中放置了1个或1个以上的EditText,进入该activity ...

  10. eclipse导入工程时出现大红色感叹号（转）

    转载文章:http://blog.csdn.net/xiaotaibai2008/article/details/6365334 因为也遇到了同样的问题,所以google了以下,希望对于我这个小菜鸟有 ...