目录

一.什么是Vue？

二.基于脚手架创建就前端工程：

三.Vue工程结构以及组件：

1.Vue项目结构： 

2.Vue组件：

 四.Vue基本使用方式：

1.文本插值{{}}：

2.属性绑定v-bind：

3.事件绑定v-on：

4.双向绑定v-model：

5.条件渲染 v-if , v-else , v-else-if：

6.循环v-for：

五.Vue的生命周期：

 六.Vue入门程序：

七.Vue原理：

八.Vue组合式API写法：

eg:想要点击按钮实现递增count：

一.什么是Vue？

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

二.基于脚手架创建就前端工程：

我们在准备创建前需要自动配置环境：

①node.js      前端项目的运行环境

②npm           Javascript的包管理工具

③Vue CLI     基于Vue进行快速开发的完整系统，实现交互式的项目脚手架

随后我们直接在想要创建的地方打开cmd命令窗口，在内部输入vue ui并回车就会自动跳转相关网页。

 在这里就可以创建我们的Vue项目了。

三.Vue工程结构以及组件：

1.Vue项目结构： 

下面就是我们Vue项目结构以及其作用：

随后我们根据package.json文件下的Script内的脚本名来运行文件。

因为我这里运行的脚本名是serve，所以我们按住Ctrl+J或找到命令栏输入npm run serve就可以启动我们的前端项目了。我们按住Alt+B就可以查看前端项目界面。

 然后我们也可以在vue.config.js中配置前端服务端口号：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({   transpileDependencies: true,   devServer:{     port:7070 //设置端口号   } })

2.Vue组件：

Vue是我们前端的脚手架，所以自然也是包含我们前端三剑客的语言格式：

①结构