实现Hello Vue

掉发小白

于 2022-09-14 22:00:12 发布

阅读量358

点赞数 1

文章标签： vue.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46019475/article/details/126860832

版权

1.目标:在谷歌浏览器实现"Hello Vue!"
2.代码:

<DOCTYPE html>
<html lang='en'>
<head>
	<meta charset="UTF-8">       //编码格式
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>学习Vue的第一天</title>
	<!-- 开发环境版本，包含了有帮助的命令行警告-->
	<script scr="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
		<div id="app">
		{{message}}
		</div>
		<script>
			new Vue({
			el:'#app',               //挂载点
			data:{
			message:'Hello Vue!'
			}
			})
		</script>
</body>
</html>

3.运行结果
在这里插入图片描述
4.VS软件的快捷键
（1）代码格式化: Shift+Alt+F
（2）代码向上或向下移动一行: Alt+Up/Alt+Down
（3）快速复制一行代码:Shift+Alt+Up/Shift+Alt+Down
（4）快速保存:Ctrl+S
（5）快速查找:Ctrl+F
（6）快速替换:Ctrl+H
（7）快速生成浏览文件.html: !+回车