Vue.js学习笔记—vue初体验(1)

最新推荐文章于 2023-12-26 20:00:20 发布

风落_

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量109

点赞数 1

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/qq_45523411/article/details/116724268

版权

Vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天开始，大二第二学期，开始学习前端框架Vue，之前只浅浅学习了HTML5和CSS，JavaScript还不熟，打算跟着B站的教学视频自学一下，老师讲得挺好的，传送门
鲁迅曾说过，学习新东西一定要多去官网看一看，然后本小白打算在CSDN里记录一下每天学习的实操代码和一些自己的理解，还有一件事就是Vue的官方读音同view（身边同学就有读错的哈哈哈哈），希望自己可以坚持下去！！！加油加油

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<div id='app'>
			<!--大括号为mustache语法-->
			<h1>hello {{name}}</h1>
			<h2>{{message}}</h2>
		</div>
		
		<!--引入vue.js-->
		<script src="../js/vue.js"></script>
		<script>
			//	vue.js
			//	let(变量) / const(常量)
			//	编程范式：声明式编程
			const app = new Vue({
				el: '#app',	//用于挂载要管理的元素(!!!)
				data: {	//定义数据
					message: 'hello, vuejs',
					name: 'fengluo'
				} 
			})
			//	原始js的做法（编程范式：命令式编程）
			//	1.创建div元素，设置id属性
			//	2.定义一个变量叫message
			//	3.将message变量放在前面的div元素中显示
			//	4.修改message的数据
			//	5.将修改后的数据再次替换到div元素
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies">{{item}}</li>
			</ul>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					movies: ['星际穿越', '大话西游', '少年派', '盗梦空间'] 
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
右键点击检查进入Console，可以进行一些修改，浏览器实时改变结果

风落_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js学习笔记—vue初体验(1)

今天开始，大二第二学期，开始学习前端框架Vue，之前只浅浅学习了HTML5和CSS，JavaScript还不熟，打算跟着B站的教学视频自学一下，老师讲得挺好的，链接如下：https://www.bilibili.com/video/BV15741177Eh学习新东西一定要多去官网看一看，然后就在CSDN里记录一下每天学习的实操代码和一些自己的理解，还有一件事就是Vue的官方读音同view（身边同学就有读错的哈哈哈哈），希望自己可以坚持下去！！！加油加油<!DOCTYPE html>&lt
复制链接

扫一扫