vue2 简单入门速成上手版学习笔记

入坑指南（学习之前先看一下，我栽坑了，耽误了很久，大家看了就尽量别栽坑了哦 ~~ ）

（我会持续更新这个栽坑的。）

①大家开始的时候一定要知道，vue 这个可是 单页面应用！
我不止一次在学习的时候想怎么转跳页面呢？
但是 最后最后 我才发现，他的页面是固定的，转化的可是组件。
学习的时候一定要知道，这是！单页面应用 哦 ~~。

css预处理器

sass、less（基于nodeJs） ⇒ 可以去了解一下。

vue.js简介

vue是一套用于构建用户界面的渐进式框架。vue的核心库只关心试图层

vue的优势

1. 轻量级，体积小
2. 更适合移动端
3. 易上手
4. 开源，活跃度高
   等等……

第一个vue程序

vue的引入

vue2官方网站： https://v2.cn.vuejs.org/

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/45c0541e585b4bdf8793f50443958cbf.png#pic_center)

或

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

网站实在找不到，就去官网下载一个 Vue.js 文件

vue是双向绑定的。
我们可以看到，如果是 html、JavaScript想要改变值，是需要操作dom的，东西多了会越来越卡。但是vue可以直接动态改变。

双向绑定的好处

① 低耦合
② 解耦
③ 可复用
④ 可独立开发
⑤ 可测试

实现了Dom的监听和数据绑定

data存放的是 数据/模型，一般需要 return

原因：
这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！
这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

Vue的基本语法（v-bind、v-if 、v-else-if、v-else、v-for、v-on、v-model）

属性绑定： v-bind

我们可以按照顺序清楚的看到属性绑定的方法。讲 m 的值绑定给了 span 的悬浮属性值

属性判断：v-if、v-else-if、v-else

我们有点基础的同学可以看到，if、else其实很简单。其原理都是一样的！

循环 v-for

我们可以看到，格式都是固定的，用法也非常简单。如果理解不了的话，可以跟着打一遍代码，很好理解的。

事件 v-on

方法必须定义在 vue 中的 methods 中 。
避坑指南：（一定要注意 s，不加 s 不会报错，但是程序会出问题！！！）

我们可以清楚的看到，已经将点击事件，绑定到了hi( ) 的方法中。

双向绑定 v-model

我们可以发现， v-model 是双向绑定的，如果修改一方，则双方一起进行修改。

Vue组件（Vue.component）

Vue.component('组件名称','组件内容')

中断一下，我遇到了一个报错，一直注册不了组件，用的是“xiaoXiao”的名称来组件，后来查看资料，发现以下问题

补充下基础知识：HTML是不区分大小写的。而JS区分。所以一般情况下，JS的大小写变量放到HTML中，会将大写改成小写，并在前面添加短杠。所以注册一直失败。

我们可以看到，通过 component 注册了一个组件，然后将组件中的 参数 a 的值，绑定在了 items的循环之中。完成了组件的使用。

计算属性 （computed）

计算属性重点突出在属性上。就是一个能将计算出的结果缓存起来。可以想象成缓存。从侧面节约了一个系统的开销。

methods 和 computed 虽然可以重名，但是不建议这么使用，methods的优先权能稍微高一丢丢。

插槽 （slot）(父传子）

动态的可排插，提高了程序的复用性。


我们可以看到，注册了三个组件后，通过 name 进行组件绑定。完成插槽的使用。

子组件中的 name 需要和 父组件中的 slot 的名称相对应。

当时有疑惑，摘抄ChatGpt内容，如下:

在Vue.js中， 元素用于在父组件中定义一个插槽，以便子组件可以在相应的位置插入内容。插槽可以具有名称，这样子组件就可以根据需要在不同的插槽位置插入内容。
让我们来解释一下你提到的代码片段：
：这是一个父组件中的模板代码，它包含了一个子组件 ，并且使用了 slot=“todo-title” 来指定了一个插槽的名称为 “todo-title”。它还通过 :titles=“titles” 传递了一个属性 titles 给 组件。
：这是子组件 中的模板代码，它表示一个具名插槽，插槽的名称为 “todo-title”。这意味着父组件中使用了 slot=“todo-title” 的任何内容都将被插入到这个具名插槽所在的位置。
因此，当父组件中使用 并在其中指定了 slot=“todo-title” 的内容时，这些内容将会被插入到子组件 中的 所在的位置。

自定义时间分发（ this.$emit() ）（子传父）

个人理解： 子元素发将此方法和 index的值 发出，然后在父元素进行两个方法的绑定。这样父元素就可以获得到子元素的值，实现 子传父

多嘴一句，在玩的时候，我们一定要记住我们绑定的id，就比如在控制台查看的时候，就可以
自己绑定的id . xxx 或者 vm . 某个方法 等等去查看哦 ~~。而不是在整个页面上直接去查找。

第一个 vue-cli 程序

① 安装好 nodeJs（不做解释，主页有nodeJs安装保姆版教程！）

② 全局安装好 vue-cli 脚手架（管理员命令打开）

cnpm install vue-cli -g

我们安装好之后，可以输入 vue list 来测试，是否有安装成功。如果出现如下界面，则已成功安装。

创建 vue 项目并初始化（管理员命令打开）

我们可以根据 英汉 的翻译，来确定选项，回车即是确定

此时我们已经成功初始化并创建一个 vue 的测试项目。

进入到此项目并安装依赖（管理员命令打开）

① 通过 cd 命令来进入到文件夹中

② 通过 npm install 命令来下载项目 package.json中的依赖

③ 通过 npm run dev 命令来打开已经创建好的 Vue 项目

如果有错误需要修复，可以跟着 vue 的提示进行修复一下。

已成功打开，可以访问 8080 端口来找到此 vue 项目

理解：export （暴漏接口，进行导出），import（导入）

webpack学习使用

什么是webpack？

webpack 是一个模块化打包器兼容加载工具，他能把各种资源都作为模块化进行处理和使用。

安装webpack

npm install webpack -g
npm install webpack-cli -g

测试webpack安装

webpack -v
webpack-cli -v

webpack打包方法（简写，后续会出详细步骤）

路由（vue-router）

安装代码：npm install vue-router --save-dev

学习初学者常见的一个小小的问题

router配置：

配置（有问题）：

我们清晰的可以看到，已经将路由配置好。但是有报错。报错结果如下所示

友情提示： export default 和 export 的区别是：export default 只能使用一次，而 export 可以使用多次

如果有报错，排查，不会就先百度，注意有一些可是 版本问题哦 ~~。

查询很多资料也没有找到原因。还望大佬们可以指点一二。（就发现了一次，后来就没这种情况了，估计是粗心了，不管了，先记录一下）
但是解决问题的方案还是需要将 图① 的 vueRouter 换成 router。
如下图所示 ：

找到上面的问题解决方法啦，补充到这里

component拼写错误

== component== 拼写错误，误加 “s” ，不会报错，但是程序会执行不出。还是要注意的！

插嘴一句，别忘了 自己写例子的时候， style 记得写 scoped 作用域哦 ~~ 。

element-UI（建议去官网查看）

官方网址：https://element.eleme.cn/#/zh-CN

普通监听（没有讲的，看图就可以看懂）

路由嵌套（子组件）

参数传递和重定向

参数传递

话不多说，先上图

router-push

当你点击 时， router.push 方法会在内部调用，所以说，点击 等同于调用 router.push(…)。

声明式：<router-link :to="...">
编程式：router.push(...)

第一种：
this.$router.push(‘需要跳转到的路径名称’)
此方法跳转后，会在历史栏目中保存路劲地址，当点击历史标签时可以进行访问

第二种：
this.$router.replace(‘需要跳转到的路径名称’)
此方法跳转后，会在历史栏目中不保存路劲地址，当点击历史标签时不可以进行访问

第三种：
this.$router.go(‘需要跳转到的步数’)
步数可以为正 ，也可为负数
此方法需要设置跳转的步数，可为正为负。
同时可以结合 以上的两种方法搭配使用，形成页面的过滤操作

重定向

路由钩子、404

为了防止地址栏有 “#” 比较难看，可以用此方法

404地址

路由钩子

beforeRouterEnter（to，from，next）：在进入路由前执行
beforeRouterLeave（to，from，next）：在离开路由之前

话不多说，直接上图

整体演示路由+axios：

补充一下第二个创建 Vue 的方式

vue create xxx ⇒ 然后 按照下面的要求去选配，也可以去查查这些都代表什么。

记录问题，后续在写Vue的时候，需要的问题，我都会追加在后面

问题一：vue路由添加子路由后，只显示路由，不显示子路由问题

后来我发现，你不能只添加主页面的router-view，这里只是引入一个路径，你的实质还是在vue模块中。

大白话就是，你给主页面添加了一个 router-view，把路由添加过去，让 “组件” 显示在主页面中，但是你还需要给子路由的那个 “组件” 留一个能显示出来的router-view，所以你在 vue组件，也需要加上一个router-view，让子路由引入“子组件”的 界面显示出来。

听不懂没关系，看以下代码：

问题二：关于 Element-UI 中 container 组件不能正常铺满屏幕问题 解决方案

解决方案如下：

代码很简单，小伙伴们可以悟一下哦 ~~ 。

问题三：关于 Vue 子路由 能转跳，但是页面为空白页面问题解决

但是我写到根目录，却可以完成实现。这是为什么呢？

原因是：注意一下 路由 中的子路由，前面是不能加 “/” 的。更改如下

这两个 也不要忘记哦 ~~ 。 大小记得用 外面的 div 包裹控制一下。

刷新 成功 解决

问题四：如何一个 router 里面实现 多个 router - view 呢？

》

别忘了，这是 components ，而不是单数哦 ~~ 。

成功！

问题五：名称注册信息报错（涨个小记性）

涨个小记性，以后报错，先看报错路由，再看报错页面。一个网页上粗心的小细节，让自己纠结了两天

总结：并不是所有的注册信息，问题都出在路由，还要留意一下页面。要是页面出错了，也是会报错的！！！

问题六：this.$router.push带参两种方式的区别

传递参数 – this.$router.push(path{:}^{\prime }路{由}^{\prime },query:key:value)参数取值--this.$route.query.key

使用这种方式，传递参数会拼接在路由后面，出现在地址栏.

传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}})
参数取值 – this.$route.params.key

使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数…

动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

恭喜入门成功，vue2 完结撒花！！！