myvue之旅

最新推荐文章于 2024-04-06 09:33:12 发布

weixin_43578645

最新推荐文章于 2024-04-06 09:33:12 发布

阅读量123

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43578645/article/details/97690543

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue学习

<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
			<h2 v-text="msg">1111</h2>
		</div>
		
</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"welcome"
			}
		});
		
	</script>

两者都能解决浏览器未加载完成的字体闪烁问题，v-clock需要前提设计样式，v-text回见=号后面的内容替换标签的文本。

v-html

v-html会将msg2内容解析为html代码并转义到页面中

<div v-html="msg2"></div>
<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"welcome",
				msg2:"<h1>我是h1</h1>"
			}
		});
		
	</script>

运行结果

如图所示将msg2中的html段用v-html转义到了页面中
注意data中不同的内容要用逗号分隔，例如msg和msg2中有逗号分隔

指令

v-bind

v-bind提供绑定指令

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js" ></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
			<h2 v-text="msg">1111</h2>
			<div v-html="msg2"></div>
			***<input type="button" value="按钮" v-bind:title="mytitle" />***
		</div>
		
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"welcome",
				msg2:"<h1>我是h1</h1>",
				mytitle:"我是弹出消息"
			}
		});
		
	</script>
</html>

如图所示将title属性等号后面双引号的值变成了一个vue变量，将data里面的mytitle里的值替换为为弹出消息
1：v-bind中可以写合法的js表达式
2 ：v-bind：可以简写为：即一个冒号

v-on标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js" ></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
			<h2 v-text="msg">1111</h2>
			<div v-html="msg2"></div>
			<input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show" />
		</div>
		
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"welcome",
				msg2:"<h1>我是h1</h1>",
				mytitle:"我是弹出消息"
			},
			methods:{
				show: function() {
					alert("hello")
				}
			}
		});
		
	</script>
</html>

v-on:click = “变量名”
methods:{
变量名: function() {
alert(“hello”)
}
}
会将变量名对应的函数绑定到click事件中并执行
注意可用@代替 v-on：
例如<input type=“button” value=“stop” @click=“lang” />