vue学习笔记--监视数据变换

最新推荐文章于 2023-08-21 18:21:46 发布

watson_pillow

最新推荐文章于 2023-08-21 18:21:46 发布

阅读量137

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/watson_pillow/article/details/109722594

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

对于输入框等数据变化时进行监视，变化后执行对应的操作。

自带方法

使用自带事件的方式

<input type="text" name="" onKeyup="alert('hello');">

或者绑定vue的函数

<input type="text" name="" v-on:keyup="func">

watch

watch可以监视data中数据的变化，触发这里的函数

 <body>
 	<div id = "app">
 		<input type="text" name="" v-model="firstname" > + 
 		<input type="text" name="" v-model="lastname" > =
 		<input type="text" name="" v-model="fullname"> 
 	</div>
</body>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			firstname:"",
			lastname:"",
			fullname:""
		},
		methods:{
		},
		watch:{
			firstname:function(newValue, oldValue){//键名中有横线“-”时，必须加双引号，现在可省略
				this.fullname = newValue + "-" + this.lastname;
			},
			lastname:function(newValue, oldValue){
				this.fullname = this.firstname + "-" + newValue;
			}
		}
	})
</script>

也可以使用watch监控路由$route.path的变化

<body>
	<div id="app">
		<router-link to="/login">login</router-link >
		<router-link to="/register">register</router-link >
		<router-view></router-view>
	</div>
</body>

<script>
	var login = {
		template:'<h2>登录界面</h2>'
	}

	var register = {
		template:'<h2>注册界面</h2>'
	}

	var newrouter = new VueRouter({
		routes:[
			{path:'/',redirect:'/login'},
			{path:'/login',component:login},
			{path:'/register',component:register},
		]
	})

	var vm = new Vue({
		el:'#app',
		data:{

		},
		router:newrouter,
		watch:{
			'$route.path':function(newValue,oldValue){
				if(newValue ==='/login'){
					alert("欢迎登录")
				}else if(newValue === '/register'){
					alert("欢迎注册")
				}
			}
		}
	})
</script>

computed

在computed中，可以定义一些属性，这些属性叫做计算属性，本质是一个方法，使用这些属性的时候，把名称当作属性使用，而不是当作方法调用
计算属性在引用时一定不要加括号调用，当作普通属性使用
只要计算属性函数内部使用的 data发生变化，就会重新计算这个计算属性
计算属性的求值结果，会被缓存，方便下次直接调用，如果计算属性中依赖的数据没有变化，则不会重新求值

<body>
	<div id="app">
		<input type="text" name="" v-model="firstname"> + 
		<input type="text" name="" v-model="lastname"> =
		<input type="text" name="" v-model="fullname">

		<h2>{{fullname}}</h2>
	</div>
</body>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			firstname:"",
			lastname:"",
			// fullname:""
		},
		computed:{
			'fullname':function(){
				return this.firstname + "-" + this.lastname;
			}
		}
	})
</script>

一个工具的使用nrm

nrm 提供了多个npm的服务器地址，只是提供了几个常用的下载包的url地址，在着几个地址之间切换，转包工具依旧为npm
安装 npm i nrm -g
nrm ls 查看nrm支持的地址
nrm use npm 切换地址为npm

文化学习

横吹曲辞梅花落 梅岭花初发，天山雪未开。雪处疑花满，花边似雪回。因风入舞袖，杂粉向妆台。匈奴几万里，春至不知来。

watson_pillow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记--监视数据变换

对于输入框等数据变化时进行监视，变化后执行对应的操作。自带方法使用自带事件的方式<input type="text" name="" onKeyup="alert('hello');">或者绑定vue的函数<input type="text" name="" v-on:keyup="func">watchwatch可以监视data中数据的变化，触发这里的函数 <body> <div id = "app"> <input
复制链接

扫一扫

专栏目录