vue第一天（入门）

一、准备的东西

电脑需要安装编辑软件（什么编辑软件都可以，此处使用vscode），电脑需要安装node

二、目的：简单了解一下vue

三、目录结构

图1

介绍目录：

1.package.json文件

vscode-打开要处理的文件->快捷键ctrl+`(tab键上边的键)->在编辑界面出现【终端】->在终端中输入npm install（npm可以使用，需要安装node，node安装在上一篇文章中有解释）。

2.index.html(入口文件)---此文件相当于起桥梁作用，他作为跳转到别页面的桥梁

代码：

   

   

   

   

   

这是的第一个vue文件

   //标题

   

---

//横向标签

    进入vue文件  //一个a链接，根据a标签的href跳转到指定的界面

3.01vue入门.html---为跳转到的页面，点击a链接根据a链接的地址跳转到该页面，代码如下

   

   

   

   

   

这是一个vue页面

   

---

   

        {{message}}  //采用差值表达式的方式，使用vm实例中data中的数据message

   

   

       //vue文件，在vue的官网可以下载

   

总结：此次只是简单的介绍一下vue项目，实例化 vue，还有使用vue的data中的数据

问题：

问题一：关于使用vscode的一些快捷键

从上边俩个html中不难发现有一块公共的代码（如下）：

   

   

   

   

此段代码快速生成的快捷键就是：！（英文格式下的）+Tab键，就可以一次生成这些代码

问题二、此文件运行（以vscode为例）

1.首先就是确定自己的vscode上装有一个插件--Live Server插件

2.在入口文件上右击->点击Open with Live Server(快捷键：Alt+L/O);

3.就可以在本地网页上打开你所编辑的页面了