vue2基本语法代码1

最新推荐文章于 2024-11-09 21:44:05 发布

默默努力的小老弟

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量88

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121428398

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
 <style>
     [v-cloak]{
     	display: none;

     }

 </style>
<body>
<!--       <div id="mydata" >
      	 <p  v-cloak>{{str1}}</p>
	   	 <p v-text="str2">xxx</p>
		 <p v-html="str3">xxx</p>
		 <button v-on:click="func2">xxx</button>
		 <button @click="func2">xxx</button>
		 <a href="https:www.baidu.com" @click.prevent="func2">aaaa</a>
		  <a href="https:www.baidu.com" @click.prevent="func2">aaaa</a>
		  <input :value="str4 +str2 + ' hello'  "></input>
      </div> -->


<!--       <div id="mydata" @click.capture="func1" style="width:100px;height:200px;background:red">
          
      	 <div @click="func2" style="width:100px;height:100px;background:blue;"></div>
      </div> -->
      <div id="mydata" @click="func1" style="width:100px;height:200px;background:red">
          
      	 <div @click.self="func2" style="width:100px;height:100px;background:blue;">
      	 	
				<p @click="func3">xxxxx</p>	
				<a href="https://www.baidu.com" @click.prevent.once="func1" target="_blank">x11111</a>
      	 </div>
      	 <form action="">
      	     <p>{{str5}}</p>
      	 	<input type="text" v-model="str5">

      	 </form>
      </div>
	 

</body>
   <script type="text/javascript" src="js/vue.js"></script>
   <script type="text/javascript">
   		var vm=new Vue({
   			el:"#mydata",
   			data:{
   				"str1":"aaa",
   				"str2":"bbb",
   				"str3":"<font style='color:red;'>xxx</font>",
   				"str4":"xxxx",
   				"str5":"xxxx",

   			},
   			methods:{
   				func1(){
   					alert("aa");
   				},
   				func2(){
   					alert("bb");
   				},func3(){
   					alert("cc");
   				}
   			}
   		});

   </script>
</html>