Vue.js的v-cloack,v-text,v-html,v-bind,v-on等指令的学习

最新推荐文章于 2024-03-09 21:18:01 发布

逍遥哥哥的最后倔强

最新推荐文章于 2024-03-09 21:18:01 发布

阅读量1.1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_38899563/article/details/97949051

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据官网的文档，我在学习Vue.js的过程中，我选择的是开发版本的Vue.js（提供调试信息，能事半功倍）。

1.Vue.js的v-cloack,v-text,v-html,v-bind,v-on等指令的作用记录如下，

     v-cloack:解决出现插件符号的问题
       V-text:会覆盖节点上的的值
       {{}}：不会覆盖节点上的值
       V-html:解析成网页代码，而不是字符串
       V-bind:绑定属性，缩写‘：’
       v-on：绑定事件，缩写‘@’

2.test:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloack]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!--
		v-cloack:解决出现插件符号的问题
		V-text:会覆盖节点上的的值
		{{}}：不会覆盖节点上的值
		V-html:解析成网页代码，而不是字符串
		V-bind:绑定属性 ，缩写‘：’
		v-on：绑定事件，缩写‘@’
		-->
		<div id="app">
			<p v-cloack>--{{msg}}--</p>
			<p v-text="msg">----</p>
			
			<p v-html="myhtml"></p>
			
			<input type="button" name="" id="" value="submit" :title='mybtn' @click="showMsg" />
			
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					msg:'hello Vue!',
					myhtml:'<h3>this is title</h3>',
					mybtn:'this is btn'
				},
				methods:{
					showMsg:function(){
						alert('test is over!')
						}
				}
			})
		</script>
	</body>
</html>