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元素,封装可以重复使用的代码.在较高层次 ...
随机推荐
- HTTPS原理以及流程
一.HTTP和HTTPS的区别 HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全. HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网 ...
- Mysql where in (几百或几千个id)的优化
1. SELECT employees.* FROM employees, clients WHERE employees.client_id = clients.id AND clients.nam ...
- 204-基于Xilinx Virtex-6 XC6VLX240T 和TI DSP TMS320C6678的信号处理板
基于Xilinx Virtex-6 XC6VLX240T 和TI DSP TMS320C6678的信号处理板 1.板卡概述 板卡由我公司自主研发,基于VPX架构,主体芯片为两片 TI DSP TMS ...
- Nginx优化_数据包头部信息过大问题
如果客户端发出请求的URL头部信息过大,网站将不能及时响应,并通过状态码414报错. <center><h1>414 Request-URI Too Large</h1& ...
- ocvate常用函数
1.生成矩阵相关 https://www.coursera.org/learn/machine-learning/lecture/9fHfl/basic-operations 1. 初始化矩阵 a = ...
- [易学易懂系列|golang语言|零基础|快速入门|（一）]
golang编程语言,是google推出的一门语言. 主要应用在系统编程和高性能服务器编程,有广大的市场前景,目前整个生态也越来越强大,未来可能在企业应用和人工智能等领域占有越来越重要的地位. 本文章 ...
- centos 安装代理服务 proxy server squild
以下内容复制自https://blog.csdn.net/qingfengxulai/article/details/80853870 放置此处便于检索 1 安装 sudo yum install s ...
- MyEclipse使用教程：使用Workbench和Perspectives
[MyEclipse CI 2019.4.0安装包下载] workbench指的是加载IDE时看到的内容,它通常包含一个perspective,这是相关视图和编辑器的布局.您可以根据正在进行开发的类型 ...
- Git回滚到指定的commit
查看历史commint $ git log (可以记下sha码) 回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到 ...
- ==和is的区别 以及编码和解码
is和==的区别 1. id() id是python的一个内置函数,通过id()可以查看变量表的值在内存中的地址. s1 = 2 print(id(s1)) # 1514368064 s2 = 2 p ...