Vue.js入门实例

1.双大括号语法：{{}}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<title>Document</title>
	
</head>
<body>
	<div id="app">
		{{msg}}
	</div>
</body>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'HelloWorld'
			},
			methods:{}
		})

	</script>
</html>

2.输出HTML指令：v-html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<title>Document</title>
	
</head>
<body>
	<div id="app">
		{{msg}}
		<span v-html="msg2"></span>
	</div>
</body>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'HelloWorld',
				msg2:'<h3>HelloWorld2</h3>'
			},
			methods:{}
		})

	</script>
</html>

3.绑定元素属性指令：v-bind

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<title>Document</title>
	
</head>
<body>
	<div id="app">
		<img v-bind:src="Img">
	</div>
</body>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				Img:"D://精华秘籍/微信图片_20191218211926.jpg"
			},
			methods:{}
		})

	</script>
</html>

4.事件绑定指令：v-on（注意：fun:function(){}中间不能有空格，否则会报语法错误）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<title>Document</title>
	
</head>
<body>
	<div id="app">
		<input type="button" value="事件绑定" v-on:click="fun">
	</div>
</body>
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{},
			methods:{
				fun:function(){
					alert("HelloWorld");
				}
			}
		})

	</script>
</html>

PJJ彭彭彭

发布了50 篇原创文章 · 获赞 7 · 访问量 4414

私信关注

猜你喜欢