Vue基础--双括号表达式，数据绑定以及绑定监听事件

最新推荐文章于 2023-07-11 17:19:02 发布

长耳朵的鱼鱼

最新推荐文章于 2023-07-11 17:19:02 发布

阅读量926

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43847545/article/details/105469107

版权

Vue学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>双括号表达式</h1>
			<h2>{{msg}}</h2>
			<h2>{{msg.toUpperCase()}}</h2>
			<p v-text="msg2"></p><!-- 以文本形式显示msg2-->
			<p v-html="msg2"></p><!--以html element形式显示msg2-->
			<hr>
			<h1>指令1：强制数据绑定</h1>
			<img src="imgUrl"><br/>
			<img v-bind:src="imgUrl"><br/>
			<img :src="imgUrl">
			<h2>指令2：绑定监听事件</h2>
			<button v-on:click="test">嘿嘿</button>
			<button @click="test">嘿嘿</button>
			<button @click="test2(msg2)">嘿嘿</button>
		</div>
	</body>
	<script>
		
		new Vue({
			
			el:'#app',//el  elemnet
			data:{
				msg:"wo hahha",
				msg2:"<a href='#'>ccc</a>",
				imgUrl:'https://cn.vuejs.org/images/logo.png'
			},
			methods:{
				 test(){
					alert("哇咔咔")
				},
				test2(content){
					alert(content)
				}
			}
		})
	</script>
</html>