Vue.js基本结构和简单指令

最新推荐文章于 2023-02-07 13:04:49 发布

qq_37175053

最新推荐文章于 2023-02-07 13:04:49 发布

阅读量197

点赞数

分类专栏： Vue.js 文章标签： Vue

本文链接：https://blog.csdn.net/qq_37175053/article/details/103108771

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue基础

Vue基本结构和简单指令

<!DOCTYPE html>
<html lang="en">
<style>
	[v-cloak] {
		display: none;
	}
</style>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<!-- 插值表达式 -->
		<p>---{{ msg }}---</p>
		<!-- v-cloak指令 -->
		<p v-cloak >---{{ msg1 }}---</p>
		<!-- v-text指令 -->
		<p v-text="msg2">------------</p>
		<!-- v-html指令 -->
		<p v-html="msg3">++++++++++++</p>
		<!-- v-bind指令 -->
		<input type="button" value="按钮1" v-bind:title="msg4">
		<input type="button" value="按钮2" :title="msg4"><br><br>
		<!-- v-on指令 -->
		<input type="button" value="v-on" v-on:click="info"><br><br>
	</div>
<script type="text/javascript" src="./lib/vue.js"></script>
<!-- 1. 基本的Vue代码结构 -->
<!-- 2. 插值表达式{{ }} -->
<!-- 3. v-cloak 能解决插值表达式闪烁问题：在加载过程中会将插值表达式显示出来。 -->
<!-- 4. v-text 能解决插值表达式闪烁问题,但会覆盖原有的内容， 插值表达式只会替换-->
<!-- 5. v-html  能将数据按HTML格式显示-->
<!-- 6. v-bind Vue提供的属性绑定机制 缩写是 : -->
<!-- 7. v-on Vue提供的时间绑定机制 缩写是 @-->
<script type="text/javascript">
	var vm = new Vue({
		// 1.
		el: '#app',
		data: {
			msg:'插值表达式',
			msg1:'v-cloak指令',
			msg2:'v-text指令',
			msg3:'<h1>v-html指令</h1>',
			msg4:'v-bind指令'
		},
		methods:{
			info: function() {
				alert("v-on指令");
			}
		}

	});
</script>
</body>
</html>