Vue的第一天学习

学习前的准备

参考的视频是黑马程序员的四小时掌握Vue
在学习Vue之前，首先下载好了VSCODE编译器，学习了几天html和css的基本知识。在VSCODE中，添加了如下的插件：

便捷的编码以及修改方式

当我们进行Vue的编写时，及时的查看代码的效果以及及时的处理错误的代码是很有必要的，因此在真正开始编码学习之前很有必要找到一种可以边编码边查看代码效果的方式，这边就需要使用Liveserver插件。
这边就不赘述添加的具体步骤，需要的码友们请看链接：
VSCODE连接码云

Vscode插件 livereload配合chrome扩展程序livereload实现网页自动刷新(保存时)

简单描述过程，就是在VSCODE中添加LiveServer 和LiveReLoad两个插件，然后在谷歌中添加livereload插件（应该需要魔法），添加成功之后应该看到谷歌插件中的图标中间圆圈被填充为实心。如图：

需要补充的是，经过笔者研究，电脑每次重新开机之后vscode的LiveReload:Enable/disable server服务项会自动关闭，此时需要重新按ctrl+shift+p,输入框内输入livereload，就会显示LiveReload:Enable/disable server，点一下就会开启这个服务，按照这个步骤操作之后就可以再次使用LiveReLoad服务了。

在这之后就可以快乐的学习Vue啦！

Vue的开始学习

通过查看Vue的官方文档，知道首先需要调用vue，代码如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

详见官方文档：
Vue官方文档

vue在body中进行编码，主要内容需要在script框体中，首先需要进行定义，即是 var app=new Vue

然后使用el挂载点挂在需要修改的el标签，标签名用id标识放到前一部分进行标识，可以使用h2 div p等双标签进行标识，双标签内部使用双括号包含数据对象即后文中的message
代码如下：

<h2 id="app" class="app">
        <!-- div的作用范围仅仅是div内部 -->
        {{ message }}
        <span>{{message}}</span>
    </h2>
    <!-- h2 div p等双标签都支持这种操作 -->

而在后部分中使用el标识标签的id
data数据对象中包含修改的对象message，使用* ：" " *的形式修改对象的内容
代码如下：

<script>
        var app=new Vue({
                //el:"#app",
                el:".app",
                data:{
                    message:" 你好 世界 "
                }
            })
    </script>

复杂情况中，可以添加对象school，其中包含name和mobile两个属性，使用school.name的方法进行访问;
也可以添加数组campus，使用campus[0]的方式访问。
代码如下：

  <script>
        var app= new Vue({
            el:"#app",
            data:{
                message:"你好 小黑",
                school:{
                    name:"黑马程序员",
                    mobile:" 17761982488"
                },
                campus:["南京信息工程大学","南京工程大学"]}
        })
    </script>

访问方式如下：

<h2>{{school.name}} {{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
        </ul>