当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 初学入门vue

初学入门vue

2020年07月17日  | 移动技术网IT编程  | 我要评论

vue MVVM

实例
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>vue</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- input标签显示data数据 -->
<input type="text" v-model="wenzi">
<!-- p标签显示data数据 -->
<p>{{wenzi}}</p>
<p v-text="wenzi"></p>
<!-- p标签显示data数据，可以编译html标签 -->
<p v-html="wenzi"></p>
<img :src="wangzhi">
<!--vue绑定监听-->
<button @click="test(wenzi)" style="width: 100px;height: 50px"> 点我</button>

</div>

<script type="text/javascript">
	 /*vue实例,viewmodel*/
	new Vue({

		el : '#app',  //作用域
		/*model*/
		data : {
			wenzi:"<a> Hello world!</a>",
			wangzhi:"https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1"
		},
		methods : {
		test(content){
			alert(content);
		}
	}})
</script>

</body>
</html>

本文地址：https://blog.csdn.net/weixin_42075821/article/details/107392128

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网