Vue介绍

VSCode插件安装

后面开发Vue项目，使用.vue的单文件开发，就需要一些插件来帮我们识别.vue文件。插件安装在Extension中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。
这里我们开发Vue推荐的几个插件：

1. jshint：js代码规范检查。
2. Beautify：一键美化代码的插件。
3. Vetur：.vue文件识别插件。
4. Javascript(ES6) code snippets：ES6语法提示。
5. Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
6. Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
7. vue helper：一些Vue代码的快捷代码。
8. vscode-icons：可选。提供了很多类型的文件夹icon，不同类型的文件夹使用不同的icon，会让文件查找更直观。
9. open in browser：可选。右键可以选择在默认浏览器中打开当前网页。

Vue介绍

Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球比较流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！

Vue安装和使用

安装

vue的安装大体上分成三种方式，第一种是通过script标签引用的，第二种是通过npm(node package manager)来安装，第三种是通过vue-cli命令行来安装。作为初学者，建议直接通过第一种方式来安装，把心思集中在vue的学习上，而不是安装上。

# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>


# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

基本使用

要使用Vue，首先需要创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下：

<div id="app">
    <p>{{username}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "xxx"
        }
    });
</script>

其中data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的

<div id="app">
</div>
<!-- 这里渲染不了 -->
<p>{{username}}</p>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "xxx"
        }
    });
</script>

另外也可以在vue对象中添加methods，这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外加this.data.属性名来访问

<div id="app">
    <p>{{greet()}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "xxx"
        },
        methods: {
            greet: function(){
                this.username = "xxx2"
            }
        }
    });
</script>