Vue基础之用插值表达式在视图区显示数据

Vue基础之用插值表达式在视图区显示数据

第一步：当然就是你要引入Vue.js这个脚本文件啦！

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第二步：就是你要在你HTML文件中的body中写入下面的代码：

<!-- Vue.js的应用可以分为两个重要的组成部分
	一个是视图!
	另一个是脚本!！ -->
	<!-- 下面的就是视图！ -->
	<div id="app">
		<h1>{{message}}</h1>
	</div>
	<!-- 下面的就是脚本！ -->
	<script type="text/javascript">
	// 
		
	var app = new Vue({
		
		el:'#app', // 这个就是你要操作的元素！
		data: {
			message: 'lvhang'
		} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！
		
	}) 
	</script>

这样不就大功告成了吗！？!