vue基础

如有不正 请指出！

 

目录

一、第一篇 1

1、 Vue.js 1

Vue是国人写的，技术文档也妥妥的是中文 1

2、搭建环境 1

2.1、npm install -g vue-cli 1

2.2、vue init webpack myProject 1

2.3、cd myProject 1

2.4、npm install 1

2.5、npm run dev 1

2.6、文件 2

2.7、打包发行 npm run build 3

3、基本代码 3

3.1、import Vue from 'vue' 3

3.2、import router from './router' 4

3.3、new Vue实例化 4

4、 单页面组件 4

5、 路由 4

6、本章小结 5

二、 第二篇 6

1、 需求背景 6

2、 路由配置 6

3、 入口文件 APP.vue 6

4、 Methods事件 6

5、 父子组件通信props 7

6、 插槽slot 7

7、 组件通讯 7

8、 V-for 8

三、 第三篇 8

1、 列表组件 8

2、 动态组件 8

3、 生命周期 8

 

一、第一篇

1、Vue.js

Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动视图，像远古时代的老前辈jQuery是结构驱动

视图管理抽象为数据管理，而不是管理dom结构了

Vue是国人写的，技术文档也妥妥的是中文

2、搭建环境

node和npm的环境

2.1、npm install -g vue-cli

2.2、vue init webpack myProject

webpack参数是指myProject这个项目将会在开发和完成阶段帮你自动打包代码，比如将js文件统一合成一个文件，将CSS文件统一合并压缩等

2.3、cd myProject

2.4、npm install

npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间

2.5、npm run dev

开始执行我们的项目了，一旦执行这个命令之后，等一小会，浏览器应该会自动帮你打开一个tab为http://localhost:8080/#/的链接，这个链接就是我们本地开发的项目主页了

2.6、文件

 

package.json保存一些依赖信息，config保存一些项目初始化配置，build里面保存一些webpack的初始化配置，index.html是我们的首页，除了这些，最关键的代码都在src目录中，index在很多服务器语言中都是预设为首页，像index.htm，index.php等；打开build目录中的webpack.base.conf.js，会看到这样的代码

 

说明我们的入口js文件在src目录中的main.js

 

2.7、打包发行 npm run build

开发完成后执行npm run build会编译我们的源代码生成最终的发布代码，在dist目录下

 

3、基本代码

Vue的核心架构，按照官方解释和个人理解，主要在于组件和路由两大模块，只要理解了这两大模块的思想内容，剩下API使用就只是分分钟的事情了。

3.1、import Vue from 'vue'

这句很好理解，就像你要引入jQuery一样，vue就是jquery-min.js，然后Vue就是$；然后又引入了./App文件，也就是目录中和main.js同级的App.vue文件；在Vue中引入文件可以直接用import，文件后缀名可以是.vue，这是Vue自己的文件类型，之前说的webpack会将js和css文件打包，同样的道理，在webpack中配置vue插件后（项目默认配置），webpack就可以将.vue类型的文件整合打包，这和nodeJs中require差不多的道理。

说回App.vue这个文件，这是一个视图（或者说组件和页面），想象一下我们的index.html中什么也没有，只有一个视图，这个视图相当于一个容器，然后我们往这个容器中放各种各样的积木（其他组件或者其他页面）

3.2、import router from './router'

3.3、new Vue实例化

相当于平时我们写js时候常用的init啦，然后声明el：'#app'，意思是将所有视图放在id值为app这个dom元素中，components表明引入的文件，即上述的App.vue文件，这个文件的内容将以<App/>这样的标签写进去#app中，总的来说，这段代码意思就是将App.vue放到#app中，然后以<App/>来指代我们的#app。

 

4、单页面组件

打开我们的App.vue文件，在Vue中，官网叫它做组件，单页面的意思是结构，样式，逻辑代码都写在同一个文件中，当我们引入这个文件后，就相当于引入对应的结构、样式和JS代码，这不就是我们做前端组件化最想看到的吗，从前的asp、php也有这样的文件思想

node端之所以能识别.vue文件，是因为前面说的webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件。

看到我们文件内分为三大部分，分别是<template><script><style>，很好理解结构，脚本，样式；script就像node一样暴露一些接口，可以看到我们的template标签中除了一张图片之外就只有一行代码：<router-view></router-view>

 

5、路由

先引入了路由插件vue-router，然后显式声明要用路由 Vue.use(Router) 。注意到Hello，About等都是页面（也可以是组件），接着注册路由器，然后开始配置路由。

路由的配置应该一目了然，给不同的path分配不同的页面（或组件，页面和组件其实是一样的概念），name参数不重要只是用来做识别用的

子路由：children:[{

  path: '',

 name:''

}]

 

  

二、第二篇

1、需求背景

组件库是做UI和前端日常需求中经常用到的，把一个按钮，导航，列表之类的元素封装起来，方便日常使用

2、路由配置

3、入口文件 APP.vue

4、Methods事件

5、父子组件通信props

6、插槽slot

 

7、组件通讯

用props给按钮自定义文案，用on和emit给按钮自定义点击触发，用slot给按钮添加一些自定义结构

 

8、V-for

 

三、第三篇

1、列表组件

2、动态组件

https://www.php.cn/vuejs/492460.html

3、生命周期