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

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

自带方法

使用自带事件的方式

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

或者绑定vue的函数

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

watch

watch可以监视data中数据的变化,触发这里的函数
 <body>
 	
<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">loginrouter-link >
		<router-link to="/register">registerrouter-link >
		<router-view>router-view>
	div>
body>

<script>
	var login = {
		template:'

登录界面

'
} var register = { template:'

注册界面

'
} 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

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

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

文化学习

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

你可能感兴趣的:(前端,vue)