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">日期: ...
随机推荐
- ${pagecontext.request.contextpath}绝对路径理解
${pageContext.request.contextPath}是JSP取得绝对路径的方法,等价于<%=request.getContextPath()%> .也就是取出部署的应用程序 ...
- Flask的 sqlalchemy 操作要点
1.filter和filter_by的区别 filter,使用复杂的过滤条件,一般用两个等号进行匹配 filter,使用简单的过滤条件,一般用一个等号进行匹配 Answer.query.filter( ...
- Java实现龟兔赛跑
闲极无聊,加上翻手机看到龟兔赛跑的词语,想到了可以通过java起两个线程来实现龟兔赛跑的实现. 代码实现其实很简单: 首先是乌龟类: 然后是兔子类: 最后是赛跑类: 接下里让我们看一下输出结果吧: 乌 ...
- C语言--浮点数
在程序中使用浮点数 -- 浮点数的精确性有限 -- 在从c语言中float类型的精确度只到小数点的7位 -- 浮点数只能在一定范围内去相信它 -- 在有精确度高的要求下不要使用浮点数(在算钱的时候,误 ...
- PythonDay16
第十六章模块 今日内容 自定义模块 time模块 datetime模块 rendom模块 自定义模块 # import 模块 例:import time# 导入的是time模块中所有的内容(变量,函数 ...
- python中self与__init__怎么解释能让小白弄懂？
python中self与__init__怎么解释能让小白弄懂? 这个问题其实没那么简单. 只说一下自己的理解. python 里所有的 object 都有三个属性, 标识(identity), 类型( ...
- JavaEE--JSP指令
JSP指令用于提供整个JSP页面的相关信息以及用于JSP页面与容器之间的通信.JSP指令有三种:page指令.include指令.taglib指令 1.page指令 用于设定整个JSP页面的属性和相关 ...
- ubuntu 安装mysql5.7
一.Windows mysql5.6 解压版 安装 关于widnows平台上的安装教程,可参考百度经验: 链接:https://jingyan.baidu.com/article/f3ad7d0ffc ...
- [转载]Ubuntu下apache的安装与配置
原文地址:https://blog.csdn.net/gatieme/article/details/53025505 1 安装apache 在 Ubuntu 上安装 Apache,有两种方式 使用源 ...
- node.js--使用Express中app.use()分模块开发
app.use(path,callback)中的callback既可以是router对象又可以是函数:将一个URL路径与一个函数绑定,第一个参数为访问的路径,如果第一参数为空,则表示任何路径都触发这个 ...