vue入门：安装vscode及需要的插件后，支持页面动态改变

我们在学习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，睡觉！