vue学习-day05 -- 案例：名字合并(监听data数据的改变)
1.案例：名字合并(监听data数据的改变)
使用keyup事件监听data数据的改变
<!DOCTYPE html>
<html>
<head>
<title>案例：名字合并</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullName">+
<input type="text" v-model="lastname" @keyup="getFullName">=
<input type="text" v-model="fullname">
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullName() {
this.fullname = this.firstname + "--" + this.lastname;
}
}
});
</script>
</body>
</html>
使用watch监听data数据的改变
<!DOCTYPE html>
<html>
<head>
<title>案例：名字合并</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
},
watch: {//监听data中指定数据的变化，然后触发对应的function处理函数
//firstname可以加引号，也可以不加。当中间有-时必须加
firstname: function(newVal, oldVal) {
// this.fullname = this.firstname + "--" + this.lastname;
this.fullname = newVal + "--" + this.lastname;
},
lastname: function(newVal, oldVal) {
this.fullname = this.firstname + "--" + newVal;
}
}
});
</script>
</body>
</html>
2.watch-监视路由地址的改变
<!DOCTYPE html>
<html>
<head>
<title> watch监听路由的改变 </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
<!-- 安装 vue-router 路由模块 -->
<script type="text/javascript" src="vue-router.js"></script>
</head>
<body> <div id="app">
<p>
<router-link to="/com1">Go to com1</router-link>
<router-link to="/com2">Go to com2</router-link>
</p>
<!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> <script type="text/javascript">
// 组件的模板对象
var com1 = {
template: "<h2>这是组件1</h2>"
};
var com2 = {
template: "<h2>这是组件2</h2>"
}; // 创建一个路由对象
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{path: '/com1', component: com1},
{path: '/com2', component: com2}
]
}); //创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router: routerObj,
watch: {
'$route.path': function(newVal, oldVal) {
//alert(newVal + "------------" + oldVal);
if(newVal === '/com1'){
alert("进入到组件com1");
}else if(newVal === '/com2'){
alert("进入到组件com2");
}
}
}
});
</script>
</body>
</html>
3.computed-计算属性的使用和3个特点
<!DOCTYPE html>
<html>
<head>
<title>案例：名字合并</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {
},
watch: {
},
//在computed中，可以定义一下属性，这些属性叫做计算属性；计算属性本质就是一个方法；
computed: {
//使用计算属性时，直接当做data属性来使用。
//计算属性的结果会被缓存，下次使用该计算属性时，从缓存中取。
//只要计算属性依赖的data数据发生了变化，该计算属性就会重新计算，并更新缓存。
//注意：计算属性必须要有return结果，该结果就是计算属性的值。
fullname: function() {
return this.firstname + "----" +this.lastname;
}
}
});
</script>
</body>
</html>
vue学习-day05 -- 案例：名字合并(监听data数据的改变)的更多相关文章
- vue里的watch 和 computed 监听的不同
1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...
- Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port
Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...
- 从Wireshark监听的数据中提取需要的数据
最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...
- 时时监听input内容的改变
心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- Oracle数据库中的几个名字及监听的配置问题
学习数据库的时候,由于数据库只建了一个库,而且只是本机访问,所以没有对listener.ora与tnsname.ora这两个文件进行过多设置,但是实际中要区分客户端与服务器端,相互之间的访问就存在微妙 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue引用第三方datepicker插件无法监听datepicker输入框的值
一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期: ...
随机推荐
- 【Qt开发】QSplitter的使用和设置
Qt库版本:5.2.1 Qt Creator版本:3.0.1 1 QSplitter的用途 QSplitter使得用户可以通过拖动子窗口之间的边界来控制它们的大小,例如 图1 窗口拆分示意图 ...
- 【miscellaneous】星光级超低照度摄像机技术分析
低照度摄像机采用了超灵敏度图像传感器和独有的电子倍增和噪点控制技术能够极大地提高摄像机的灵敏度,并且具备24小时全彩色实时效果,绝无普通低照度摄像机出现的拖尾现象,以满足对夜间高品质监控的需求. ...
- 红帽学习记录[RHCE] ISCSI远程块储存
目录 iSCSI 定义 组件术语 启动器 目标 ACL 发现 IQN 登录 LUN 节点 门户 TPG 搭建一个iSCSI服务 提供一个iSCSI目标 配置iSCSI客户端 iSCSI 定义 SCSI ...
- 开发维护中遇到问题---eclipse、发版问题
1.jar包冲突问题, [服务器启动service服务器,tomcat也已启动]然后浏览器访问,会出现这样子的问题现象:tomcat什么的启动成功,但是访问时会出现404: 解决方法:先停掉tomca ...
- webpack的介绍
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAGpCAIAAACbBiUBAAAgAElEQVR4Aey9CVwb553/L04JcSPuw5
- Boruvka
大概是这样的:一开始图中有\(n\)个连通块,每次操作我们选出各个连通块连出去的最短的边(如果有相同边权的边的话可以把序号作为第二关键字),然后把这些边加入最小生成树. 最坏的情况下每次操作都会让当前 ...
- python__基础数据类型
字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...
- python-day11(正式学习)
目录 文件高级应用 多重操作 r+t:可读,可写(文件名为a) w+t:可写可读 a+t:可追加可读 文件内指针移动及一些操作 指针移动seek(offset,whence) 寻找指针位置tell() ...
- ALS部署Spark集群入坑记
[Stage 236:> (0 + 0) / 400]17/12/04 09:45:55 ERROR yarn.ApplicationMaster: User class threw excep ...
- python3的一些文件操作的脚手架
用python把原来的脚本重构了一下,其中写了文件操作的一些函数,如下: import os import shutil import hashlib import stat #查找文件夹中的某个文件 ...