前端VUE

1.vsCode和插件安装

1.介绍vue

前端现在比较火的三大框架就是：vue ，React，Angular。

在国内使用最多的还是vue >React >Angular

Vue官网：cn.vuejs.org

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2.下载vsCode

vsCode官网：https://code.visualstudio.com/

3.安装vsCode

前端有两个概念，一个叫编辑器，一个叫idea（集成开发环境）。咱们做后台用的都是idea，集成开发环境。vsCode 是编辑器，但是功能也很强大，都快赶上了idea。

2.vue项目创建

0.安装node运行环境：

 

双击运行，一直下一步 完成安装 。

关闭终端命令窗口，在打开 输入npm  显示详细信息，就是运行环境安装成功。

1.安装vue/cli 脚手架，一键/自动构建项目结构的工具

使用命令：

npm config set registry https://registry.npmjs.org/

npm install -g @vue/cli

2.创建vue项目

创建vue项目的命令：vue create vue-demo

vue-demo是项目名

Node-modules 非常多的依赖

Public 公有访问资源

Src 源码文件

.browserslistrc当前项目的版本文件

.gitignore git的忽略文件

Babel.config.js  babel 的配置文件

Package-lock.json

Package.json  package文件是当前项目的依赖文件的版本信息

Postcss.config.js 是css的配置文件

READNME.md 注释文件

3.运行项目

进到项目所在的文件夹里，启动运行项目！

4.退出运行状态

Ctrl +C

3.vue模板语法

【电脑关机重启后，vue项目需要再次使用运行命令，使之运行。】

首先我们来看一下项目src下的结构。

registerServiceWorker.js  是一个测试文件。（可以删除，在把对应的引用关系删除掉 import ‘./registerServiceWorker’ 在main.js文件里。）

Main.js 主入口文件 基本上不用动，大部分用来导入文件。

组件化开发：

组件：由三种语法组成，html,css ,js

4.vue条件渲染 v-if/v-show

5.vue列表渲染 v-for

1.遍历简单元素

2.遍历对象元素

6.vue事件处理 methods | v-on

1.不带参事件处理：

2.带参事件处理：

3.事件代码简写

使用@ 替换 v-on:  

7.1 vue计算属性 computed 【不讲】

如果我们需要对一个字符串变量进行处理，不要直接在模板语法{{ }}双括号里写。可以使用vue里的计算属性。

更改为下边的代码

优点：不管调用了多少次，计算操作都只做一次。有缓存功能，如果数据不发生变化，就不会重新计算。

7.2 vue使用Moment插件格式化时间【不讲】

1.使用npm命令安装moment

8.vue 样式绑定 v-bind:class

1.vue前class与style的绑定

2.vue里class与style的绑定

【例子1.字体颜色  单属性】

【3.属性代码简写】

v-bind: 简写成 :

一个属性名前面有：冒号就是动态化，没有冒号就是固定字符串值。

【例子4.样式值可以是对象，也可以是数组  多个属性】

【例子5.样式值可以是数组，也可以数组里嵌套对象】

9.vue表单处理 watch

【1.双向数据绑定！】v-model

【2.获得用户输入来的值】

【3.用户输入 同时 立即获得输入内容】

需要用到侦听器！

10.vue组件

1.创建组件，命名遵守大驼峰规则

src下创建文件夹：components。在该文件夹下创建组件 Hello.vue

vue组件由三部分组成：

1. html：最外层是一对<template></template>，里面只能有一个根容器<div></div>
2. Js：
3. Css:

2.引用组件

【第一步骤：导入】

【第二步骤：加载】

【第三步骤：使用】

3.介绍组件基础

4.组件交互

1.组件的复用性，独立性好【不讲】

1. 父窗体传值到子窗体 props

【首先：】

【接下来：还有一个导航，只有数据不同】

怎么办呢？重新再写一个导航吗？不可能，再写一个 组件的重用性就没有了。我们不把导航里的数据写死了，我们动态生成，而动态生成的数据不来源于自己，而是来源于父级组件。

【更改App.vue组件】

11.组件的生命周期

【准备工作】

在components该文件夹下创建组件 MyComponents.vue。

【7，8阶段需要学习路由】

 例子:通过导航栏 切换组件访问的时候，当前组件切走，生命周期7，8阶段执行。