vue组件的watch属性
<!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属性的更多相关文章
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件的inheritAttrs属性
vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false. 可能不是很好理解,我们可以举个例子来验证一下. ...
- vue组件使用name属性来生成递归组件
先来个简单的数据 1 lists = [{ 2 id: 1, 3 title: '第一层', 4 children: [{ 5 id: 3, 6 title: '第二层', 7 children: [ ...
- Vue组件-组件的属性
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 比如,子组件需 ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- vue组件之属性Props
组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue组件讲解（is属性的用法）
什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...
随机推荐
- SPSS25 下载安装和激活
目录 1. 其他版本 2. 安装步骤 3. 下载地址 1. 其他版本 参考:https://www.cnblogs.com/coco56/p/11648399.html 2. 安装步骤 打开安装包 下 ...
- octave - 用于数值计算的高级交互式语言
SYNOPSIS 总览 octave [options] OPTIONS 选项 octave 全部命令行选项可以通过运行命令 octave --help 来查看. DESCRIPTION 描述 Oct ...
- 基本数据类型、包装类、String类型之间的相互转换
@Testpublic void test2(){//基本数据类型.包装类-->到String类型的转换,调用String类型的静态方法valueOf()即可int i1 = 12;String ...
- mysql 中文乱码 修改编码 utf8
在安装完数据库的时候,先不要创建数据库,先去更改字符集设置. show variables like 'character%'; vim /etc/my.cnf (注意 下面的字段文件内没有时,自 ...
- TCP/IP基础总结性学习（5）
与 HTTP 协作的 Web 服务器 一台 Web 服务器可搭建多个独立域名的 Web 网站,也可作为通信路径上的中转服务器提升传输效率. 一. 用单台虚拟主机实现多个域名 HTTP/1.1 规范允许 ...
- MySQL简版（一）
第一章 数据库的基本概念 1.1 数据库的英文单词 Database,简称DB. 1.2 什么是数据库? 用于存储和管理数据的仓库. 1.3 数据库的特点 持久化存储数据的.其实数据库就是一个文件系统 ...
- vue-element添加修改密码弹窗
1.新建修改密码vue文件CgPwd.vue 代码如下: <template> <!-- 修改密码界面 --> <el-dialog :title="$t('c ...
- [洛谷P2154] SDOI2009 虔诚的墓主人
问题描述 小W是一片新造公墓的管理人.公墓可以看成一块N×M的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地. 当地的居民都是非常虔诚的基督徒,他们愿意提前为自己找一块合适墓地. ...
- 对Moment.js的研究
创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...
- @PathVariable注解使用
@PathVariable是spring3.0的一个新功能:接收请求路径中占位符的值 语法: @PathVariable("xxx")通过 @PathVariable 可以将URL ...