我们在学习vue的时候，知道其数据动态绑定，我们一改值，页面也会跟着改变，但是idea不容易做到这一点（我不知道怎么搞），于是就研究了一下vscode。
vscode 安装
我是mac版本的，直接在下载站下载的，官方太慢了，这个安装没什么困难的。
设置成中文
vscode是可以支持中文的，左边菜单栏最下面那个扩展商店，搜索chinese，安装重启后即可生效，菜单栏就会变成中文。
如果你不习惯用中文，可以卸载重启即可生效。
新建html页面
刚开始要新建页面的时候，我真是两眼一抹黑！这个新建就一个空的什么都没有的页面，然后去百度了一下。
新建文件后，直接保存，输入文件名.html，他就变成了一个html文件。
但是没有那些基础的框架，这个时候我们只需要输入一个英文的感叹号，然后按tab键就会生成了。
在浏览器打开
然后怎么在浏览器打开呢？好家伙又是两眼一抹黑。
这个还需要安装一个插件open in browser
然后在你的文件编辑区域右键就可以看到
然后我们选择 open in default browser，在默认浏览器打开。
第一个vue文件
然后开始编写第一个vue文件。
首先用cdn直接导入vue的开发版本包，就不用安装那些有的没的，还有提示警告等。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
开始写代码，new一个Vue对象，在里面写几个元素。
<script>
const vm = new Vue({
el: "#app",
data:{
message: "hello vue344666777"
}
});
</script>
el表示的是element元素，#就是id选择器了，也就是id为app的元素就生效。
data就是放一些数据用的，代表着message的值为这个。
然后开始写标签
<div id="app">
{
{message}}
</div>
因为这个div的id是app，所以就被我们上面new出来vue绑定了，所以里面的这种两个大括号就可以把data中的数据注入进去。
所以页面效果就变成了这样。
只要修改data中message的值，页面上就会跟着改变。
顺带提一嘴mac怎么双屏，在你的app左上角的绿色按钮是用来全屏的，长按就会多出来选项，这个时候就可以选择放在左边还是右边。
然后另外一边再选一个，就双屏了。
但是细心以及正在烦心的同学就会发现，页面并没有跟着刷新，是因为vscode不会自动保存。
需要手动保存。
当然光保存还不够，还要再安装一个插件，live server。
此时在右击代码，就会多出了一块open with Live server
但是打不开，右下角会报错，错我已经截不到了，因为我已经解决了。
但是我又搜索记录，大概就是这一段。
Open a folder or workspace... (File -> Open Folder)
但是我没找到解决的方法，瞎猫碰见死耗子，解决了。
然后每次修改后保存就会发现他跟着变了！是不是很快乐！ok，睡觉！
转载：https://blog.csdn.net/weixin_45369440/article/details/117339186