目录

一.什么是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中配置前端服务端口号：

<code>const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

devServer:{

port:7070 //设置端口号

}

})

2.Vue组件：

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

①结构  <template>  只有一个根元素，由它来生成HTML页面，HTML代码

②样式  <style>  全局样式以及局部样式，CSS代码

③逻辑  <script>  编写JS代码

 四.Vue基本使用方式：

1.文本插值{ {}}：

作用：用来绑定data方法返回的对象属性

用法：{ {  }}

<template>

<div>

<h1>{ {name}}</h1>

<h1>{ {age > 60 ? "老年" : "青年"}}</h1>

</div>

</template>

<script>

export default {

data(){

return {

name: 'zhangsan',

age: 20

}

}

}

</script>

 页面展示：

zhangsan 老年

2.属性绑定v-bind：

作用：为标签的属性绑定data方法中返回的属性

用法：v-bind:xxx   或简写为   :xxx

<template>

<div>

<div><input type="text" v-bind:value="name"></div>code>

<div><input type="text" :value="age"></div>code>

<div><img :src="src"></div>code>

</div>

</template>

<script>

export default {

data(){

return {

name: '记得开心一点嘛',

age: 20,

src: 'url.png'

}

}

}

</script>

这样的好处是不会在页面直接展示name，而是展示data中name的属性。

3.事件绑定v-on：