初学vue

最新推荐文章于 2024-04-30 12:15:42 发布

z_zhangzhen

最新推荐文章于 2024-04-30 12:15:42 发布

阅读量120

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/z_zhangzhen/article/details/83444687

版权

vue学习专栏收录该内容

1 篇文章

订阅专栏

 <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript" src="Vue/vue-resource.js" ></script>
    		<!--导入vue.min.js-->
    		<script type="text/javascript" src="Vue/vue.min.js" ></script>
    	</head>
    	<body>
    		<div id="app">
    			<!--页面简单塞值-->
    			 <p>{{ message }}</p>
    			<!--输入框的值动态显示在页面上-->
    			<div><input type="text" maxlength="16"  v-model="strSuppAddress"></div>	
		   
		    <div>
		   		 <!--页面动态塞值-->
		    	<p>{{ strSuppAddress }}</p>
			</div>	
			
			<div>
			 	<!--插入页面元素-->
		    	<p v-html="html"></p>
			</div>	
			<div id="app">
				<!--绑定ID属性-->
			    <span v-bind:id="value">测试</span>
			</div>
			
			<div id="btn" >
				<button id="test">测试按钮</button>
			</div>
		</div>
		
	</body>
	<script>
		/*按钮点击事件不能写在new vue之前,否则会触发不了*/
		/*document.getElementById("test").onclick = function(){
			alert(11);
		};*/
		new Vue({
			el: '#app',/*使用Vue要在此定义的ID下面*/
			data: {
				message: 'Hello World!',
				strSuppAddress:'1111',
				html:'<font color="red">这是我的标题</font>',
				 value: "content"
			}
		})
		document.getElementById("content").innerHTML = "1234";
		
		document.getElementById("test").onclick = function(){
			alert(11);
		};
	</script>
</html>

初步学习vue的动态显示示例