前情提要:
首先要在vs code上下载一个插件:live server。
方便我们后续用浏览器阅览前端效果。
然后在磁盘上新建一个文件夹,随便名称即可。
用vs code打开该文件夹:
我的文件夹是vue,在该目录下创建一个html模板:
html模板粘贴这个即可:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个vue</title>
</head>
<body>
</body>
</html>
然后打开vue官方网站(https://cn.vuejs.org/v2/guide/index.html):
按照这个写法,改动一下文件夹下html,第一个vue就做出来了:
你也可以粘贴我的模板:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个vue</title>
</head>
<body>
<div id="my">
{{
message
}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var my=new Vue({
el:"#my",
data:{
message:"hello , vue!"
}
})
</script>
</body>
</html>
浏览器:
总结第一个vue的写法:
- 导入开发版本的vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到html中
快捷键:
alt+L+o开启服务器(live server)
alt+L+c关闭服务器(live server)
live server开启过程中,ctrl+s保存代码会实时更新浏览器前端,不用重复打开浏览器页面。
最后总结一些错误:
在创建Vue实例的时候,
var my=new Vue({})
这一句中,把Vue写成了小写vue,这里注意vue仍然会变成绿色,没有报错,浏览器阅览时会显示{{messge}},显然没有把数据渲染上去。
好了,又水完了一篇博文。