Vue入门基础语法的使用（案例版）

最新推荐文章于 2024-05-07 21:03:07 发布

肝到肝硬化

最新推荐文章于 2024-05-07 21:03:07 发布

阅读量215

点赞数

文章标签：初学者前端工程师

本文链接：https://blog.csdn.net/weixin_42151066/article/details/88850235

版权

vue基本语法（1）

v-cloak：解决Vue数据闪烁问题

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123'
				}
			})
		</script>
	</body>
</html>

v-text：把Vue里定义的值以字符串的方式传给组件

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-text="msg"></p>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123'
				}
			})
		</script>
	</body>
</html>

v-html：把Vue中的值以代码的形式传给组件

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-html="msg"></p>
			
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'<h1>我是大的H1</h1>'
					
				}
			})
		</script>
	</body>
</html>

v-bind：是Vue中，提供用于绑定属性的指令（v-bind:一般缩写成: ）

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="按钮" v-bind:title="mytitle"/>
			<!-- 注意：v-bind：指令可以被简写为：要绑定的属性 -->
			<!-- v-bind:一般缩写成: -->
			<input type="button" value="按钮" :title="mytitle+'123'"/>
			<!-- v-bind中，可以写合法的JS表达式 -->
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					mytitle:'这是一个自定义的title'
				}
			})
		</script>
	</body>
</html>

v-on：事件绑定机制（v-on:一般缩写成@）

methods属性：定义Vue实例所有可用的方法

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- v-on:一般缩写成@-->
			<input type="button" value="按钮" v-on:click="show"/>
			<input type="button" value="按钮" @click="show"/>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
				},
				methods:{//这个methods属性中定义了当前Vue实例所有可用的方法
					show:function(){
						alert('Hello')
					}
				}
			})
		</script>
	</body>
</html>