（一）VUE初级钩子函数、计算属性

最新推荐文章于 2024-07-13 08:30:00 发布

luck_lin

最新推荐文章于 2024-07-13 08:30:00 发布

阅读量351

点赞数

分类专栏： frame class 文章标签： vue

本文链接：https://blog.csdn.net/qwe502763576/article/details/79988728

版权

frame class 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="app" :style="{color, fontWeight: 'bold'}">
		{{title}}
		<p>{{nameComputed}}</p>
		<p>{{nameComputed}}</p>
		<p>{{nameComputed}}</p>
		<li>{{ageMethod()}}</li>
		<li>{{ageMethod()}}</li>
		<li>{{ageMethod()}}</li>
		<input type="text" v-model="putState">
		<p>{{showState}}</p>
	</div>

</body>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			title: "林哥很无敌！",
			color: "red",
			name: "lin",
			age: 18,
			putState: "用户名",
			showState: "请输入用户名"
		},
		beforeCreate(){
			console.log("beforeCreate")
		},
		created(){
			console.log("created")
		},
		beforeMount(){
			console.log("beforeMount")
		},
		mounted(){
			console.log("mounted")
		},
		beforeUpdate(){
			console.log("beforeUpdate")
		},
		updated(){
			console.log("updated")
		},
		beforeDestroy(){
			console.log("beforeDestroy")
		},
		destroyed(){
			console.log("destroyed")
		},
		computed: {
			nameComputed: {//有点比较多（相对methods和watch），缺点是由于必须在函数体把计算属性的值return出去，所以不好做异步操作
				get(){//获取属性值
					console.log("name")
					return this.name;
				},
				set(newValue){//用app.nameComputed = "linge666" 这样修改name的值才会执行该函数，直接用app.name也能修改但该函数就无意义（不会执行）
					console.log("setasfafsdfsdfsdfsdfsdf")
					this.name = newValue
				}
			}
		},
		methods: {//实例中的任意属性发生改变，每个被调用过的method都会被再次执行
			ageMethod(){
				console.log("age")
				return this.age
			},
		},
		watch:{
			putState(val){
				//此处可以根据用户输入的值做异步操作，，同时可能会用到函数节流，可以用lodash库的_.debounce方法
			}
		}
	})
</script>
</html>