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">日期: ...
随机推荐
- 使用movielens数据集动手实现youtube推荐候选集生成
综述 之前在博客中总结过nce损失和YouTuBe DNN推荐;但大多都还是停留在理论层面,没有实践经验.所以笔者想借由此文继续深入探索YouTuBe DNN推荐,另外也进一步总结TensorFlow ...
- python 并发编程 多路复用IO模型
多路复用IO(IO multiplexing) 这种IO方式为事件驱动IO(event driven IO). 我们都知道,select/epoll的好处就在于单个进程process就可以同时处理多个 ...
- ActiveMQ消息过滤
前言 ActiveMQ提供了一种机制,使用它,消息服务可根据消息选择器中的标准来执行消息过滤.生产者可在消息中放入应用程序特有的属性,而消费者可使用基于这些属性的选择标准来表明对消息是否感兴趣.这就简 ...
- Java Blob类型和String类型相互转换
1.String 转 Blob: String content = "Hello World!"; Blob blob = Hibernate.createBlob(content ...
- TS学习
随着vue3.0的即将到来,是时候学习一下TS了 简介:TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类 ...
- vue 中 @click.native.prevent 事件
在项目中看到@click.native.prevent, 查了一点资料 总结一下, 1.给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件, 2.prev ...
- MySQL 7种 JOIN连表方法
规定:左边的圆代表表 a,右边的代表 b. JOIN 关键字可以在两表之间选中任意部分.] 通过以下代码制造一些数据: delimiter // drop procedure if exists pr ...
- 在树莓派Zero上使用C#+Mono驱动TM1637四位数码管
最近闲着无聊,买了个树莓派Zero,准备在上面跑.Net Core,来驱动各种传感器 就是上面这货.之前手上已经有一个树莓派3B+,但是介于3B+已经被我挂在路由器旁边当做服务器用,不是很方便拿来研究 ...
- adb shell命令模拟按键/输入input使用keycode 列表详解
在adb shell里有一个非常使用的命令,模拟按键输入,这里首先不要理解为是键盘的模拟按键,下面命令的使用和键值做一个详解. input命令格式 adb shell input keyevent & ...
- ceph分布式存储简介
一.Ceph简介: 什么是分布式存储? 我在一个环境当中,有很多很多的服务器,服务器上也有它自己很多的硬盘,我通过软件的形式把若干服务器都收集起来,部署成一个软件,在这个逻辑的软件里可以同时看到我若干 ...