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">日期: ...
随机推荐
- heartbeat高可用
一.基本了解 1.Hearbeat和keepalived区别Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称V ...
- 【Deep Learning Nanodegree Foundation笔记】第 0 课：课程计划
第一周 机器学习的类型,以及何时使用机器学习 我们将首先简单介绍线性回归和机器学习.这将让你熟悉这些领域的常用术语,你需要了解的技术进展,并了解深度学习在更大的机器学习背景中的位置. 直播:线性回归 ...
- 换根dp特征总结
Rt,大概总结一下吧(不时更新一小下 1.一般都没有指定根,刚开始随便选一个根(1号点工具人) 2.两次$dfs$,一次从工具人开始预处理一些东西,第二次(也是从工具人开始)换根. 3.多用于:只要确 ...
- 【神经网络与深度学习】【CUDA开发】【VS开发】Microsoft官方移植了Caffe配置过程说明
想在Windows平台使用Caffe,吭哧吭哧下载了半天第三方库,后来忽然发现Microsoft官方移植了Caffe,配置起来简直太省心了- 1. 从Microsoft官方Github上下载Caffe ...
- 【VS开发】解决位图缩放失真
当用以下函数加载一张位图时,当窗口发生重绘更改大小时,位图将失真: CBitmap bitmap; bitmap.LoadBitmap(IDB_BITMAP2); BITMAP bmp; bit ...
- Vim命令合集（四）
Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...
- etcd集群添加节点
查看当前集群节点信息 # etcdctl member list --write-out=table +------------------+---------+------------------- ...
- Websocket --（3）实现
今天介绍另外一种websocket实现方式,结合了spring MVC,并完善了第二节所提到做一个简单的登录认证用来识别用户的名称.界面继续沿用第二节的布局样式,同时增加上线和下线功能. 参考了 ht ...
- fiddler 不能抓包解决
早上使用金山毒霸扫描了一遍电脑,然后打开fiddler后,出现了一个提示(当时没有注意看),直接点了确定,导致结果是不能抓包了,百度了很多方法,最后直接卸载金山毒霸,然后将防火墙还原为默认设置(风险不 ...
- 如何利用`keep-alive`按需缓存页面数据
随着项目不断变大,页面变多,搜索条件也随之也越来越多,而每次跳转页面再返回时,之前的筛选的条件都会别清空.之前在elment-ui table组件 -- 远程筛选排序提到过缓存,但是有所取巧,这次重新 ...