<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>wacth属性</title>

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

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <my-component></my-component>

    </div>

    <script>

        Vue.component("my-component",{

            data:function(){

                return {

                    myInput:"",

                    myPhone:123456

                }

            },

            template:`

                <div>

                    <input type="text" v-model="myInput"/>

                    <input type="text" v-model="myPhone"/>

                    <span>{{myInput}}</span>

                </div>

            `,

            watch:{

                myInput:function(){

                //当数据发生变化、执行的操作

              　　  console.log("数据改变");

                },

                myPhone:function(){

                    console.log(this.myPhone);

                }

            }

        })

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

    </script>

 </body>

</html>

vue组件的watch属性的更多相关文章

  1. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  2. vue组件的inheritAttrs属性

    vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false. 可能不是很好理解,我们可以举个例子来验证一下. ...

  3. vue组件使用name属性来生成递归组件

    先来个简单的数据 1 lists = [{ 2 id: 1, 3 title: '第一层', 4 children: [{ 5 id: 3, 6 title: '第二层', 7 children: [ ...

  4. Vue组件-组件的属性

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 比如,子组件需 ...

  5. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  6. vue组件之属性Props

    组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...

  7. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  8. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  9. vue组件讲解（is属性的用法）

    什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...

随机推荐

  1. iOS APP 国际化

    pp Store 中很多流行的应用程序有多种语言版本.虽然这些应用程序可能因为很多因素而变得流行,但是具有多种本地化版本,肯定是其中一个因素.越多的人可以理解并使用您的应用程序,潜在的买家也就越多. ...

  2. 对Xcode菜单选项的详细探索(来自董铂然的微博http://www.cnblogs.com/dsxniubility/p/4983614.html)

    本文调研Xcode的版本是 7.1,基本是探索了菜单的每一个按钮.虽然从xcode4一直用到了xcode7,但是一般都只是用了一些基础的功能,说来也惭愧.在一次偶然的机遇突然发现了“显示调用层级”的选 ...

  3. 07.Linux系统-Fastdfs分布式文件系统-互为主从配置搭建部署

    Fastdfs分布式文件系统-互为主从配置部署 1.安装基础依赖 yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl ...

  4. slots_doc_call属性

    class Foo: "这时文档doc属性" __slots__ = ["name","age"] #[“name”=None,“age&q ...

  5. python3-继承和多态

    在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Supe ...

  6. Java 内存结构之虚拟机栈

    2.虚拟机栈 定义:虚拟机栈(Java Virtual Machine Stacks)就是每个线程运行需要的内存空间,栈由一个一个的栈帧(Frame)组成,栈帧就是每个方法运行时需要的内存(方法的参数 ...

  7. 无法启动链接服务器"XXX DB Link"的 OLE DB 访问接口 "SQLNCLI11" 的嵌套事务。由于 XACT_ABORT 选项已设置为 OFF，因此必须使用嵌套事务。链接服务器"XXX DB Link"的 OLE DB 访问接口 "SQLNCLI11" 返回了消息"无法在此会话中启动更多的事务"。

    无法启动链接服务器"XXX DB Link"的 OLE DB 访问接口 "SQLNCLI11" 的嵌套事务.由于 XACT_ABORT 选项已设置为 OFF,因 ...

  8. 判断Java对象存活的算法、垃圾回收算法

    判断Java对象存活的算法 一.引用计数算法 给对象添加一个引用计数器,每当一个地方引用它的时候就将计数器加1,当引用失效的时候就将计数器减1,任何时刻计数器为0的对象都不可再被使用.这种算法虽然简单 ...

  9. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  10. 最大流 && 最小费用最大流模板

    模板从  这里   搬运,链接博客还有很多网络流题集题解参考. 最大流模板 ( 可处理重边 ) ; const int INF = 0x3f3f3f3f; struct Edge { int from ...