Vue.js Day1__vue的基本代码

Vue.js快速入门

最新推荐文章于 2025-09-08 13:18:17 发布

写代码的资资

最新推荐文章于 2025-09-08 13:18:17 发布

阅读量214

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： vue js vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43118073/article/details/96442841

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue.js的基础用法，包括如何导入Vue包、创建Vue实例并控制页面元素，还介绍了v-cloak指令的使用方法，帮助开发者解决数据加载过程中出现的闪烁问题。

vue 的基本代码

一、vue的基本代码

1、导入vue的包

#导入vue的包
<script src="./lib/vue-2.4.0.js"></script>

2、创建一个vue实例

当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数

<body>
	<!--将来new的vue实例，会控制这个元素中的所有内容>
	<!--vue实例所控制的这个区域就是我们的V>
	<div id="app">
		<p>{{ msg }}</p>
	</div>

	<script>
	//注意：我们new出来的这个vm对象，就是我们MVVM中VM的调度者
	var vm = new Vue({
		el:'#app', //表示，当前我们new的这个vue实例，要控制页面上的哪个区域

		//这里的data就是MVVM中的M，专门用来保存每个页面的数据的
		data:{//data属性中，存放的是el中要用到的数据
			msg: '欢迎学习vue'
			//通过Vue提供的指令，很方便的把数据渲染到页面上，程序员不再手动操作DOM元素（前端的vue之类的框架不提倡我们手动操作DOM元素）
		}
	})
	</script>
</body>

二、v-cloak的学习

<head>
<script src="./lib/vue-2.4.0.js"></script>
<style>
	[v-cloak]{
		dispaly:none;
	}
</style>
</head>

<body>
	<div id="app">
		<!--使用v-cloak能够插值表达式闪烁的问题-->
		<p v-cloak>{{msg}}</p>

		<!--默认v-text没有闪烁问题-->
		<!--v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符，不会把整个元素的内容清空-->
		<h4 v-text="msg"></h4>
		
		<!--可以把内容当html -->
		<div v-html="msg2"></div>
	</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'123'
				msg2:'<h1>我是一个大大的H1</h1>'
			}
		})
	</script>
</body>