（我会持续更新这个栽坑的。）
①大家开始的时候一定要知道，vue 这个可是 单页面应用！
我不止一次在学习的时候想怎么转跳页面呢？
但是 最后最后 我才发现，他的页面是固定的，转化的可是组件。
学习的时候一定要知道，这是！单页面应用 哦 ~~。
sass、less（基于nodeJs） ⇒ 可以去了解一下。
vue是一套用于构建用户界面的渐进式框架。vue的核心库只关心试图层
- 轻量级，体积小
- 更适合移动端
- 易上手
- 开源，活跃度高
等等……
vue的引入
vue2官方网站：
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
或
网站实在找不到，就去官网下载一个 Vue.js 文件
vue是双向绑定的。
我们可以看到，如果是 html、JavaScript想要改变值，是需要操作dom的，东西多了会越来越卡。但是vue可以直接动态改变。
双向绑定的好处
① 低耦合
② 解耦
③ 可复用
④ 可独立开发
⑤ 可测试
实现了Dom的监听和数据绑定
data存放的是 数据/模型，一般需要 return
原因：
这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！
这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。
属性绑定： v-bind
我们可以按照顺序清楚的看到属性绑定的方法。讲 的值绑定给了 的悬浮属性值
属性判断：v-if、v-else-if、v-else
我们有点基础的同学可以看到，if、else其实很简单。其原理都是一样的！
循环 v-for
我们可以看到，格式都是固定的，用法也非常简单。如果理解不了的话，可以跟着打一遍代码，很好理解的。
事件 v-on
方法必须定义在 vue 中的 methods 中 。
避坑指南：（一定要注意 s，不加 s 不会报错，但是程序会出问题！！！）
我们可以清楚的看到，已经将点击事件，绑定到了hi( ) 的方法中。
双向绑定 v-model
我们可以发现， v-model 是双向绑定的，如果修改一方，则双方一起进行修改。
中断一下，我遇到了一个报错，一直注册不了组件，用的是“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的值 发出，然后在父元素进行两个方法的绑定。这样父元素就可以获得到子元素的值，实现 子传父
① 安装好 nodeJs（不做解释，主页有nodeJs安装保姆版教程！）
② 全局安装好 vue-cli 脚手架（管理员命令打开）
我们安装好之后，可以输入 来测试，是否有安装成功。如果出现如下界面，则已成功安装。
创建 vue 项目并初始化（管理员命令打开）
我们可以根据 英汉 的翻译，来确定选项，回车即是确定
此时我们已经成功初始化并创建一个 vue 的测试项目。
进入到此项目并安装依赖（管理员命令打开）
① 通过 命令来进入到文件夹中
② 通过 命令来下载项目 中的依赖
③ 通过 命令来打开已经创建好的 Vue 项目
如果有错误需要修复，可以跟着 vue 的提示进行修复一下。
已成功打开，可以访问 8080 端口来找到此 vue 项目
理解：export （暴漏接口，进行导出），import（导入）
什么是webpack？
webpack 是一个模块化打包器兼容加载工具，他能把各种资源都作为模块化进行处理和使用。
安装webpack
测试webpack安装
webpack打包方法（简写，后续会出详细步骤）
路由（vue-router）
安装代码：
学习初学者常见的一个小小的问题
router配置：
配置（有问题）：
我们清晰的可以看到，已经将路由配置好。但是有报错。报错结果如下所示
友情提示： 和 的区别是： 只能使用一次，而 可以使用多次
如果有报错，排查，不会就先百度，注意有一些可是 版本问题哦 ~~。
查询很多资料也没有找到原因。还望大佬们可以指点一二。（就发现了一次，后来就没这种情况了，估计是粗心了，不管了，先记录一下）
但是解决问题的方案还是需要将 图① 的 vueRouter 换成 router。
如下图所示 ：
找到上面的问题解决方法啦，补充到这里
component拼写错误
== component== 拼写错误，误加 “s” ，不会报错，但是程序会执行不出。还是要注意的！
插嘴一句，别忘了 自己写例子的时候， style 记得写 scoped 作用域哦 ~~ 。
官方网址：
参数传递
话不多说，先上图
router-push
当你点击 时， router.push 方法会在内部调用，所以说，点击 等同于调用 router.push(…)。
第一种：
this.$router.push(‘需要跳转到的路径名称’)
此方法跳转后，会在历史栏目中保存路劲地址，当点击历史标签时可以进行访问
第二种：
this.$router.replace(‘需要跳转到的路径名称’)
此方法跳转后，会在历史栏目中不保存路劲地址，当点击历史标签时不可以进行访问
第三种：
this.$router.go(‘需要跳转到的步数’)
步数可以为正 ，也可为负数
此方法需要设置跳转的步数，可为正为负。
同时可以结合 以上的两种方法搭配使用，形成页面的过滤操作
重定向
为了防止地址栏有 “#” 比较难看，可以用此方法
404地址
路由钩子
话不多说，直接上图
整体演示路由+axios：
⇒ 然后 按照下面的要求去选配，也可以去查查这些都代表什么。
问题一：vue路由添加子路由后，只显示路由，不显示子路由问题
后来我发现，你不能只添加主页面的，这里只是引入一个路径，你的实质还是在vue模块中。
大白话就是，你给主页面添加了一个 ，把路由添加过去，让 “组件” 显示在主页面中，但是你还需要给子路由的那个 “组件” 留一个能显示出来的，所以你在 vue组件，也需要加上一个，让子路由引入“子组件”的 界面显示出来。
听不懂没关系，看以下代码：
问题二：关于 Element-UI 中 container 组件不能正常铺满屏幕问题 解决方案
解决方案如下：
代码很简单，小伙伴们可以悟一下哦 ~~ 。
问题三：关于 Vue 子路由 能转跳，但是页面为空白页面问题解决
但是我写到根目录，却可以完成实现。这是为什么呢？
原因是：注意一下 路由 中的子路由，前面是不能加 “/” 的。更改如下
这两个 也不要忘记哦 ~~ 。 大小记得用 外面的 div 包裹控制一下。
刷新 成功 解决
问题四：如何一个 router 里面实现 多个 router - view 呢？
》
别忘了，这是 ，而不是单数哦 ~~ 。
成功！
问题五：名称注册信息报错（涨个小记性）
涨个小记性，以后报错，先看报错路由，再看报错页面。一个网页上粗心的小细节，让自己纠结了两天
总结：并不是所有的注册信息，问题都出在路由，还要留意一下页面。要是页面出错了，也是会报错的！！！
问题六：带参两种方式的区别
传递参数 – this.route.query.key
使用这种方式，传递参数会拼接在路由后面，出现在地址栏.
使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数…
动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。
到此这篇vue2官方文档（vue2官方文档pdf）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！恭喜入门成功，vue2 完结撒花！！！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/43395.html