vue知识小理解

最新推荐文章于 2022-10-01 10:55:31 发布

霖霏晗

最新推荐文章于 2022-10-01 10:55:31 发布

阅读量205

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/xxz_best/article/details/80679013

版权

VUE 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

vue八个生命周期

创建前状态：beforeCreate

创建完毕状态：created

挂载前状态：beforeMount

挂载结束状态：mounted

更新前状态：beforeUpdate

更新后状态：updated

销毁前状态：beforeDestroy

销毁后状态：destroyed

插值表达式：

v-text ：指令

v-html ：指令

模板指令v-html 和v-text 区别(查看下列代码进行比较)

模板指令: v-text:会进行转义
模板指令: v-html:不会转义

v-html指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue 入门</title>
		<!--<script type="text/javascript" src="js/vue.js" ></script>-->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-html="content"></h1>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					content: "<h1>hello</h1>"
				}
			})
		</script>
	</body>
</html>

效果图：

v-text指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue 入门</title>
		<!--<script type="text/javascript" src="js/vue.js" ></script>-->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-text="content"></h1>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					content: "<h1>hello</h1>"
				}
			})
		</script>
	</body>
</html>

效果图：

绑定事件指令：v-on

v-on 指令简写：@

v-on:click="handleClick" 和@click="handleClick" 表达的意思一样

handleClick方法定义在methods中。改变变量content的值（数据改变页面随着改变）

事件触发之后执行的方法写在vue实例中methods中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue 入门</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
	</head>
	<body>
		<div id="root">
			<div v-on:click="handleClick">{{content}}</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					content: "hello"
				},
				methods: {
					handleClick: function(){
						this.content = "world"
					}
				}
			})
		</script>
	</body>
</html>

属性绑定v-bind

v-bind:title="title" 等同于 :title="title"

双向数据绑定v-model

单向绑定：数据决定页面的显示，页面无法决定数据的内容

双向绑定：v-model

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性绑定和双向数据绑定</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
	</head>
	<body>
		<div id="root">
			<div :title="title">hello world</div>
			<input v-model="content" />
			<div>{{content}}</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					title: "this is hello world",
					content: "this is content"
				}
			})
		</script>
	</body>
</html>

霖霏晗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识小理解

vue八个生命周期创建前状态：beforeCreate创建完毕状态：created挂载前状态：beforeMount挂载结束状态：mounted更新前状态：beforeUpdate更新后状态：updated销毁前状态：beforeDestroy销毁后状态：destroyed...
复制链接

扫一扫