Vue学习笔记

同学郑学习

已于 2022-03-07 20:33:23 修改

阅读量916

点赞数

分类专栏： # Vue框架文章标签： vue 狂神说vue

于 2021-06-13 10:26:50 首次发布

本文链接：https://blog.csdn.net/weixin_46635575/article/details/117869724

版权

Vue框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记住：核心，数据驱动（虚拟化DOM操作）和组件化的概念

第一部分.是部署项目vuehr项目遇见的问题，

第一个问题： Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
在这个问题大概意思就是Node Sass不支持当前环境:
解决办法就是：

npm uninstall --save node-sass@4.14.1
npm install --save node-sass@4.14.1

Proxy error:couldnot proxy request（跨域请求错误的问题）：做以下修改就好啦

devServer: {
  proxy: {
    '/api': {
      target: "http://localhost:8081", 
      changeOrigin: true,
      logLevel: "debug"
    }
  }
}

第二部分.就是学习Vue和Element-Ui的一些资源问题

我的学习资源，带我的人给我推荐的
https://cloud.tencent.com/developer/article/1020337（个人文章）
https://element.eleme.cn/#/zh-CN（element-Ui官网）
还有就是Vue文档
另外就是需要安装的东西
1. 安装Nodejs这里选项的msi的形式
1. 然后配置环境变量
1. 可以用npm -v来检查是否安装完成

 			1.在这下面有不同的两步nrm use taobao；设置淘宝的镜像源

1. 有了上面的配置之后，在命令行执行下面代码
  1. npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. npm install -g vue-cli
  3. 执行了上面的之后就可以创建Vue项目了
  4. 可以在cmd下先进入一个特定的目录
  5. 然后 vue init webpack myProject
  6. 然后就是下面的东西了。

第三部分.正式开始Vue

一. 了解vue和创建vue的项目

vue 是什么
是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
怎么创建一个vue项目

首先肯定是要先进入你想要把项目放到哪个文件夹，先进入这个文件夹
例子：首先进入D盘（在cmd下输入 cd\ 然后D:，然后我又要进入Vue文件夹 cd\Vue）
进入之后就开始一系列的装逼了
a，vue init webpack 项目名（这写你自己想命名的名字）
b，全局安装vue-cli （在对应输入npm install --global vue-cli）
然后其他的就一直点回车点点点就可以了。
打开自己创建的项目
到此，Vue项目创建完成

二. 正式开始学习Vue，入门部分。
https://cloud.tencent.com/developer/article/1020337
我是跟着他的理解学习的，我自己跟着写一遍印象深入一点，不存在抄袭的问题。若有侵犯，提醒一下我删除，谢谢。
1.进入项目

进入我们的项目
执行我们的命令
cd myProject 打开我们的项目
npm install 下载对应的依赖
npm run dev 运行我们的项目
康康给我们生成了些什么

2. 看看给我们生成的什么

生成的东西我们先来理一下它们的关系，这个要理解好，不然影响后面，具体看图，这是大概思路。
Vue项目最重要的有两个，组件（简单理解是我们的XXX.vue）和路由（）

1）看build下面的webpack.base.conf.js这个里面有./src/main.js —>说明我们的项目
2）它既然让我们看这个main.js我们就去看，他里面有两部分需要理解的，一部分是红色的new Vue和黄色标记的导入的路由。
3）我们又来理解这个new Vue中的App （它就是很main.js 同级别的App.vue)文件，这个是我们的组件了撒，总的来说，我们浏览器浏览的index.html文件，我们通过各种控制来把，App.vue 放到了index.html里面，然后我们就能查看里面的内容的。
4）怎么配置路由呢？

大概分为三步：
a. 第一步就是先创建我们的details.vue 和hello.vue和这个HelloWorld.vue 这三个文件。
b.创建好了就是router下面的index.js的配置。
b.第三步的App.vue里面写他的索引（可写可不写）。

3. 接下来我们来看看它的具体过程

在build里面有一个webpack.base.conf.js里面的main.js文件，这是入口。（这个没什么好看的）
那就开始来了解main.js咯，它里面就是设置怎么进入方法这个项目的控制。

//下面这句话是为了导入我们要导入的把这vue当做`jquery-min.js`来处理导入进来。
import Vue from 'vue'
//这下面句话的意思是导入和main.js同级的App.vue
import App from './App'
//下面这句话的意思是导入路由，就是我们配置的router下面的index.js
import router from './router'

Vue.config.productionTip = false

//这new 了一个Vue，这个的意思是反正就是把App封装放到index.html
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

总结这小部分，就是上面import要导入一些东西，然后我们new的是接下来要讲的App.vue ，这个感觉到现在暂时也没什么需要理解很多的。

文件App.vue

<template>
  <div id="app">
  	//下面这句话的意思是我们页面的图片，这个img和h1标签都是公共部分，会在不同的页面展示相同的
  	<img src="./assets/logo.png"> 
    <h1 class="page-title"><a href="#/">开发组件库</a></h1>
    //下面的就是展示我们配置的路由的
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

总结一下这个，看到我们文件内分为三大部分，分别是

我们再来看看index.js,他就是具体的怎么配置路由。
大概就是两步创建文件和写路径
大概就是这些了哦。

第四部分.开始进阶（前面是了解一些概念，接下来开始学习如何开发组件）

一前提条件

首先创建不同的文件，并且配置路由。

这里要解释一下的是，我们对pageQuiXXX创建路由，然后这些pageQuiXXX会引用components里面的文件。
编写放在main.js里面的App.vue文件（即入口）

如果在样式以引入的方式进入的话就这样写@import './assets/css/App.css'到对应的文件夹里面找到特定的文件即可引入样式。
1. 在来看看会给我们放在router-view里面的首页，index.vue
  
  二. 既然都创建好啦就可以开始其他的练习了。
  组件库，我们可以把一些需要的按钮或者导航栏什么的元素封装起来，然后通过 class写好的就作为标签了，以后通过标签就可以修改这个了。
  1 按钮组件quiButton.vue
  
  首先这个两个花括号标起来的msg{{msg}}这，data是Vue的属性值，就是绑定起来下面的下载也会被动绑定起来。
  如果我们用的是非组件的话，我们这可以这样修改data：{ msg ： ' 下载 ' }这样的形式写入，但是组件在多个地方引用的话，msg修改之后，多个地方都会被谢盖，所有这用function来返回对象实例。
  1）但是我想要随时改变这个下载内容的值，我想把它改为，确定，我们可以这样来写吗<qui-btn msg="确定" class="small"></qui-btn>，把它修改过来。答案是肯定的，只要做如下修改。
  
  这个props，属性写在这里面，就可以暴露给其他页面调用了，在组件中，props是专门用来暴露熟性接口的，这里的下载，以后我们只要<btn msg="确认"></btn>
  2)既然都有了上面的了，按钮肯定有点击事件什么的撒，康康怎么设置事件嘛。
  
  在methods里面可以写自定义的函数，写完之后绑定在div标签上面，这个v-xxx代表的是Vue里面的命令，在的v-on：click代表的是事件。
  3）有了上面对按钮组件的配置，咱们来使用一下这个按钮组件，需要在pageQuiButton里面修改就是使用了。
  
  从script开始解析，首先引入我们的组件赋值给变量quiBtn，使用时候直接将quiBtn作为对象的一部分写进components属性，这是Vue用来存储引用组件的关键字，同时对应我们自定义的标签 “qui-btn”，完成这些操作之后，我们就可以在template中使用自定义的按钮组件上面也说了用msg属性来自定义按钮的文案。完成之后，我们就可以在页面中看到具体效果，点击按钮弹出对应的文案。
  现在有如下结果
  
  既然都给我弹出来了的话，这个弹的内容那我们能不能像前面的msg属性一样，做自定义操作呢？答案也是肯定的。
  
  （1）首先在我们对应的使用按钮组件pageQuiButton.vue里面引入如下代码。（注册一个事件，就是前面的那个事件）
```
	<template>
	<div id="pageQuiButton">
	
	  <qui-btn msg="我是下载的修改" class="small"></qui-btn>
	  <qui-btn v-on:btnClickEvent="doSth" msg="我可以点击" ></qui-btn>
	  </div>
	</template>
```
  （2）有了如上的引入之后，我们再进行修改。
  
  这里的关键代码就是$emit，也叫触发机制，父组件监听，子组件触发。意识就是他的父亲看着呢，但是孩子就触发。
  （3）那现在咱们来给按钮添加一个图标哦（其实在Vue里面的就是slot标签就有）
  
  这里要注意的是像图片这种静态资源的存放位置的问题，一般不想springboot那么严谨，在里面创建一个imgs文件夹可以，或者就是放在assets里面也可以。
  首先在这里面总结一波
  
  别的不说，我们在写了对应的对应的组件（比如quiButton和quiNav）之后，然后我们一定要进行在对应的编写有路由的文件（对应的pageQuiButton和pageQuiNav文件）对他的引用。
2 通过导航组件学习for循环在Vue中的应用。
学习动态绑定，我们一定要记得有的是一个v-xxx（【v-on：click】表示为@click事件，【v-for】表示为JS中的for in循环）
1）正式开始

（1）这个v-for，是Vue的命令，相当于JavaScript的for循环，这个items是前面讲到的data里面定义的对象
v-for="(item,index) in items暴露了item和index两个接口，这是Vue提供的，代表items中的每一项以及该项对应的下标，接着我们就可以在标签中使用绑定｛｛item.text｝｝了（这种他是经过索引的方式来实现的）。
补充一下（非索引的）格式：格式：``v-for=" item in items "：意思是一次从items中取出item，在这种情况下，我们就可以在元素的内容汇总，使用Mustache语法(插值{{item}})来使用item。
（2）第二个就是这个：class的问题
这个很好理解，就是给我们编写的组件绑定一个class属性，全写是v-bind：（缩写为： class），以前我写的是class=xxx，这种情况是静态的，而：class则是动态绑定上去的。
（3）我们写的这个：class=“xxxxxxxxx”，我们是给他绑定了一个数组，但是数组里面又有很多东西对吧，commonClass，这个是data里面定义的，然后item.active?activeClass:’'后面的就是JS的三元运算，当每个item中的active值为true时，绑定activeClass变量对应的类（结果为：nav-item active），否则不绑定，为空（为：‘nav-item’）。

Vue报错问题的解决
sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

服务端：sockjs-node（https://github.com/sockjs/soc…）
客户端：sockjs-client（https://github.com/sockjs/soc…）

开发时，如果变更网络环境（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况，解决办法如下：

找到/node_modules/sockjs-client/dist/sockjs.js
找到代码的 1605行

try {
  //  self.xhr.send(payload); 把这里注掉
} catch (e) {
  self.emit('finish',0,'');
  self.\_cleanup(false);
}

接下来是跟着狂神学习的笔记

一，前端核心思想准备

什么是vue
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。
前端三要素
1）HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
2）CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
3）JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为
vue的由来
1）jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;

2）Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)

3）React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;

4）Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

5）Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

二，第一个vue程序

什么是MVVM模式
Vue之所以这么火，那是因为他开发了Angular和React的基础上开发的，有着两者的优点，去除了两者的缺点，而MVVM模式又是一个比较特殊的模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其有两大作用:
```
   - 该层向上与视图层进行双向数据绑定
   - 向下与Model层通过接口请求进行数据交互
```

MVVM到底有什么好处呢？
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

- 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的

- View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

- 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。

- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

- 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVVM有三层的
先是MVVM view（V）和view-model（VM）以及model（M）层;

Model : 模型层，在这里表示JavaScript对象

View : 视图层,在这里表示DOM (HTML操作的元素)

ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过 ViewModel来通信，而ViewModel就是定义了一个Observer观察者

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新

ViewModel 能够监听到视图的变化，并能够通知数据发生改变
第一个vue程序
1）创建文件

2）写数据（注意看注释哦）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue咯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        {{message}}
    </div>
</head>
<body>
    <script>
        var vue = new Vue({
            el: '#app',
            //这个model了吧
            data:   {
                message: "hello vue!!"
            }
        });
    </script>
</body>
</html>

3）结果在这里插入图片描述
4）在来看看vue到底特别在哪里（监听和view（视图）层的绑定）

为什么我在这改就能引起页面的改了呢？
这就是要建立起来一个概念那么就是我们从View（视图层取得数据）
5）总结
你康康上面的几层哦，View View-model和model层

三，Vue基本语法

V-bind（和{{}}一样的作用）
我们已经创建了Vue一个应用！看起来像渲染的莫办一样，现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。
```
 1）我们还可以使用v-bind来绑定元素属性！
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue咯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>
</head>
<body>
    <script>
        var vue = new Vue({
            el: '#app',
            //这个model了吧
            data:   {
                message: "hello vue!!"
            }
        });
    </script>
</body>
</html>

v-bind:title="message"这个就其实就是和{{}}没什么区别，但是这个{{}}丑得不得了。
2）你看到的v-bind等就是以前讲过的命令，以表示vue的特殊特征，可能你已经猜到了，他们会在渲染的DOM上应用特殊的响应式行为，在这里，该命令的意思是，将这个元素节点的title特征和Vue实例的message属性保持一致。

3）v-if和v-else以及v-else-if
直接上代码理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue咯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
        <h1 v-if="message">真的</h1> <!--这也可以写成为v-if="message==true"-->
        <h1 v-else>假的</h1>
        <h1 v-if="type=='B'">我在这</h1>
        <h1 v-else-if="type=='A'">显示我</h1>
        <h1 v-else>才显示我</h1>
    </div>
</head>
<body>
    <script>
        var vue = new Vue({
            el: '#app',
            //这个model了吧
            data:   {
                //这里用到了Boolean值了撒
                message: true,
                type: 'A'
            }
        });
    </script>
</body>
</html>

看结果吧
在这里插入图片描述

4）上面有点多了，接下来看循环嘛！v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环咯</title>



    <!-- 视图层吧-->
    <div id="app">
        <!--这里相当于foreach循环，item是从items里面取出来的对象，记得是对象，也是有index下标索引的哦-->
        <h1 v-for="item in items">
            {{item.message}}
        </h1>
    </div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        //这个model了吧，所有的数据都在这里了
        data: {
            //items就不用说了吧，数组
            items: [
                {message: "hello"},
                {message: 'java'}
            ]
        }
    });
</script>
</body>
</html>

5）事件绑定v-on
上面的是都在和data打交道，下面介绍一下新的methods属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环咯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        <button v-on:click="zheng">点击我</button>
    </div>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        //这个model了吧，所有的数据都在这里了
        data: {
           msg: "hello zheng"
        },
        methods: {
            //这个zheng就是方法名，如果调用他来触发事件就是写名字
            zheng:  function () {
                alert("hello 你好");
                alert(this.msg);
            }
        }
    });
</script>
</body>
</html>

四.（双向绑定）

	1. Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就跟着变化，当视图变化了数据也跟着变化的，这就是Vue的精髓之处咯。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
	2.  为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

	3. 你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。
	它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
	4. 例子

练习的是输入文本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        请输入文本：<input type="text" v-model="message"/>
        {{message}}
    </div>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        //这个model了吧，所有的数据都在这里了
        data: {
            message: "1234"
        }
    });
</script>
</body>
</html>

这个是单选框的练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选按钮</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        性别：
        <input name="sex" type="radio" value="男" v-model="message">男
        <input name="sex" type="radio" value="女" v-model="message">女
        <p>
            选中的是：{{message}}
        </p>
    </div>
    <div>
        
    </div>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        //这个model了吧，所有的数据都在这里了
        data: {
            message: ""
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>


    <!-- 视图层吧-->
    <div id="app">
        爱好：
        <select v-model="message">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>
            我选中的是谁：{{message}}
        </p>
    </div>
    <div>

    </div>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        //这个model了吧，所有的数据都在这里了
        data: {
            message: ""
        }
    });
</script>
</body>
</html>

五.Vue自定义标签（组件）

1.什么是Vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板
跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异
同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

2.二话不说直接上代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    //这个v-for不用说，都知道意思了吧，而这个v-bind绑定的是:后面的这个qin等于的是item
    <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
</body>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //这个component就是组件的意思，有两个参数：组件名，和其他的对象
    Vue.component("qinjiang",{
        //这个props是专门用来接受外界的参数的属性，穿进来之后就可以使用了
        props: ['qin'],
        template: '<li>{{qin}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            items: ['Java','Linux','前端']
        }
    })
</script>
</html>

六.网络通信Axios（以前的JQuery.Ajax也可以）

	1.Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

		1）从浏览器中创建XMLHttpRequests

		2）从node.js创建http请求

		3）支持Promise API [JS中链式编程]

		4）拦截请求和响应

		5）转换请求数据和响应数据

		6）取消请求

		7）自动转换JSON数据

		8）客户端支持防御XSRF (跨站请求伪造)

		GitHub: https://github.com/ axios/axios
		中文文档: http://www.axios-js.com/
		
	2.	由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !
	3.	寻找CDN:<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	4.	钩子函数的使用
	
		1）首先创建要使用的JSON内容
		2）然后再练习它的响应

{
  "name": "guang",
  "page": 1,
  "url":"https://www.baidu.com",
  "address": {
    "street": "贵阳",
    "city": "贵州",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "Kuangshengshuo",
      "url": "https://www.hello.com"
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

<!--view莫办层-->
<div id="avue">
    <div>
        {{info.url}}
    </div>
</div>
</body>


<script>

    var vm = new Vue({
        el: "#avue",

        //这个data不是属性跑，看好哦，也是函数
        data() {
            return{
                info: {
                    name: null,
                    page: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        county: null
                    }
                }
            }
        },

        //钩子函数，链式编程，ES6新特性
        mounted(){
            //如果你的浏览器显示报错not found的话就data.json写成为../data.json
            axios.get("data.json").then(response => (this.info=response.data));
        }
    })
</script>
</html>

七.计算属性（计算出来的结果保存到属性中，内存中运行，）

八.插槽slot（我是这样理解的，咱们前端不是组件化了嘛，就是很多数据呀，图片呀我们都同个写成为组件，然后放到一个大的页面中，然后整个大的页面就显示出来效果了，但是有时候我想在特定的场合显示特定的数据，这是插槽就显示它的作用了撒！）

1.上代码理解（反正就是一系的绑定操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:name="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot定义了插槽 
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['name'],
        template: '<div>{{name}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "我的学习内容",
            //列表
            todoItems: ['java', '前端', '前端框架', '后端框架']
        }
    });
</script>
</body>
</html>

上图片

九. 自定义事件，内容分发！

疑惑：
上面代码中，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了this.$emit (‘自定义事件名’,参数)自定义事件的功能很好的帮助我们解决了这个问题;（反正我是不咋懂他这句话的意思，上代码吧，好理解）
以下是代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:name="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"
                    v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //自定义的插槽slot
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['name'],
        template: '<div>{{name}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item','index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                this.$emit('remove',index)
            }
        }
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "我的学习内容",
            //列表
            todoItems: ['java', '前端', '前端框架', '后端框架']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

再来看图片对其的描述

总结以上部分，首先，就是在要删除的数据组件里面定义他的事件，然后再绑定到这对应的slot上面上，然后我再到另外一个组件上定义一个事件，对这remove的操控。（上面的话的目的就是，我们通过自定义的事件，用那个this.@emit(‘名字’,'参数‘）把他们搞到一起）

----- 这里也是分割一下，以上是学习部分，下面是开发版的学习-----

中场休息一下

1. 对于有了上面的基础，我们能编写基础单页面了撒，
	1）现在在视图View层，反正就搞些我们看不懂的了
			
	2)除了视图层以外，我们还有就是new Vuexxx什么的，这个就不多说了撒
		el：Element
		data:数据部分撒
		methods:这里面就是定义的方法了
		其他的也就是用得比较多的属性了，没什么了
	3）然后就是我们的组件，我们以后开发中，编写对应的组件，然后再到对应的
	大页面中去引入对应的组件名就可以了
2. 有了上面的想法之后，咱们再深入一滴滴。
	1）疑惑：
		我们后端如何和前端进行数据的关联了呢，
	2）然后就有了Axios（来进行通信）
	3）有了后端的数据怎么返回呢？
		所有有了data（）方法也是在new Vue里面写的啊。（不知道的去回复一
		下前面的内容）

十. 第一个vue-cli程序

1. vue-cli介绍：
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以		
选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;	
主要有以下功能
	1） 统一的目录结构
	2.）本地调试
	3）热部署
	4）单元测试
	5）集成打包上线
2. 以上需要的环境是node.js
	1）安装nod.js（自带了npm）
	2）安装淘宝镜像（加速器）
		npm install cnpm -g（-g是全局安装）
		会安装到：安装的位置:C:\Users\Administrator\AppData\Roaming\npm这个位置
	3）安装vue-cli
		cnpm install vue-cli -g
3. 然后就是创建Vue项目
	1）进入你自己创建的一个文件夹（在cmd里面进入）
	2）创建：执行：vue init webpack myvue
	3）然后执行：npm install（安装依赖）
				npm run dev（运行）
	4）在这里以上的‘3）步’可能会自己错误，解决方法是找到你的项目把node_moduls干掉，然后重新执行3）和4）步，应该没什么问题

十一. webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

1. 首先来看看这个导入和导出
导出：
<script>
	export default {
	name: 'HelloWorld',
	data () {
	return {
  		msg: 'Welcome to Your Vue.js App'
	}
}
}
导入：import hello from '@/components/hello'

2. webpack的作用
	就是把ES6编写的文件，打包编译成为ES5规范，让所有的浏览器都支持
3. 下载webpack：npm install webpack -g
				npm install webpack-cli -g
				如果报错就用cnpm安装
4. 然后查看版本：webpack -v
				webpack-cli -v

十二.有了上面的基础，再来学习webpack

1. 三个文件
	webpack.base.conf.js 命名为A文件
	webpack.dev.conf.js命名为B文件
	webpack.prod.conf.js命名为C文件
2. 在package.json里面，可以查看版本什么的
	"webpack": "^3.6.0",
	"webpack-bundle-analyzer": "^2.9.0",
	"webpack-dev-server": "^2.9.1",
	"webpack-merge": "^4.1.0"
3. 接下来就是最重要的webpack.base.conf.js 文件里面有
	entry：入口文件，指定webpack用那个文件作为项目入口
	output：输出，指定webpack把处理完成的问价放置到指定文件夹
	module：模块，用于处理各种类型的文件（就是过滤了嘛）
	plugins：插件，如：热更新，代码重用等
	resolve：设计路径指向
	watch：监听，用于设置文件改动后直接打包
4. 创建项目（在D盘创建一个文件夹）
5. 然后打开（用idea打开上面创建的文件夹）
	这里的打开并不是前面学习的那种打开

	1）打开之后创建一个modules目录
	2）然后在目录里面创建三文件
		hello.js：并且写入
		exports.sayHi = function () { //暴露接口，就是暴露方法了嘛
			 document.write("<h1>狂神说ES6</h1>")
		}
		创建好main.js文件：并且写入
		var hello = require("./hello") //导入包
		hello.sayHi()
		webpackconf.js:并且写入
		module.exports = {
    		entry: './modules/main.js', //定义入口
  			output:{                    //然后输出
    			filename: './js/bundle.js',
			}
		}
	3）然后执行webpack
	4）然后再创建index.html文件并且写入
	<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Title</title>
	 		<script src="dist/js/bundle.js"></script> //组件化，导入内容了
		</head>
		<body>
		</body>
	</html>

在这里插入图片描述

十三.vue-router（路由–进行页面的跳转）

 1. Vue Router是Vue.js官方的路由管理器（路径跳转），它和Vue.js的核心深度集成，	
 		让构建单页面应用变得易如反掌。包含的功能有:
 		1）嵌套的路由/视图表

		2）模块化的、基于组件的路由配置

		3）路由参数、查询、通配符

		4）基于Vue.js过渡系统的视图过渡效果

		5）细粒度的导航控制
	
		6）带有自动激活的CSS class的链接

		7）HTML5历史模式或hash模式，在IE9中自动降级

		8）自定义的滚动条行为
2. 安装依赖
	 基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-routervue-
	 router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装	的。打开命令行
	 工具，进入你的项目目录，输入下面命令。
			npm install vue-router --save-dev
3. 将自己创建的项目打开就是用vue-cli创建的
	这里做一下以后的开发说明：
	1）这个index.html和App.vue完全不用管。
	2）然后就是开发只在src下面开发

在这里插入图片描述

3. 下面正式开始学习
	1）我们的项目中，是会有App.vue文件时下面这个样子
		import Vue from 'vue'
		import App from './App'
		import router from './router'

		Vue.config.productionTip = false

		/* eslint-disable no-new */
		new Vue({
	 	el: '#app',
		 router, //导入路由
		components: { App },
		template: '<App/>'
		})

		下面我们来看看到入的import router from './router'
			import Vue from 'vue'
			import Router from 'vue-router'
			import hello from '@/components/hello'

			Vue.use(Router)

			export default new Router({
			routes: [{
    			path: '/',
   				name: 'hello',
    			component: hello
			}]
			})
	2）为了能理解，我们做成如下这样
		import Vue from 'vue'
		import App from './App'
		//下面是做出的修改
		import Vuerouter from 'vue-router'

		Vue.config.productionTip = false

		//对应上面的修改，我们要显示的申明
		Vue.use(Vuerouter)
		/* eslint-disable no-new */
		new Vue({
	 	el: '#app',
		 router,
		components: { App },
		template: '<App/>'
		})
		做出上面的修改上面意思呢，这个的意思就是到入我们需要使用的路
		由，然后就是像上面这种，导入，然后再显示的声明就两步
		例如我们需要使用axios时，如下步骤
			1）下载npm install axios
			2）然后到main.js里面导入
				import axios from ‘axios’;
				Vue.prototype.$axios = axios;
			3）第三步就是使用的时候，你想在哪里使用就在哪里使用
4. 有了上面的基础之后，咱们就来编写一个自己的组件试一试
	1）在D:\Vue\helloVue\src\components下创建一个hello.vue:文件
	
	
	<template>
	 	<h1>内容</h1>
	</template>

	<script>
		export default {
   		name: "hello" // 暴露你创建文件的名字
		}
	</script>

	<style scoped> 	//这里有scoped的原因是，我们只想我们的下面格式在本文件作用，
								//也就是作用域

	</style>
	2）第二步，创建路由

	import Vue from "vue";
	import router from "vue-router";
	import hello from "../components/hello";

	//安装路由
	Vue.use(router);

	//配置导出路由
	export default new router({ // 这个new 的router和上面导入的名字要一样
 	routes: [
    	{
      	//路由路径
      	path: '/hello',
      	name: 'hello',
      	//跳转的组件
      	component: hello
    	}
  	]
	})

	3）然后再到App.vue里面配置就可以了
	<template>
	<div id="app">
	<img src="./assets/logo.png">n
	<router-link to="/hello">hello</router-link>
	</div>
	</template>

5）康康效果嘛

在这里插入图片描述

十四. Vue+Element-Ui的学习

一. 有了上面的基础也差不多了，接下来开始学习。这一节内容相对来说说比较多

1. 创建一个新的的项目Vuehello
	webpack
2.  进入项目之后执行下面的代码
1） 进入工程目录
cd Vuehello
2）安装 vue-router
npm install vue-router --save-dev
3）安装 element-ui
npm i element-ui -S
4）安装依赖
npm install
5）安装 SASS 加载器（前端的有些不能完全	使用Css，所有SASS加载器）
cnpm install sass-loader node-sass --save-dev
6）启动测试
npm run dev	

二. Npm命令解释
	npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g 的意思是将模块安装	到全局，具体安装到磁盘的哪个位置，要看 npm config 	prefix的位置
npm install moduleName -save：–save的意思是将模	块安装到项目目录下，并在package文件的	dependencies节点写入依赖，-S为该命令的缩写
npm install moduleName -save-dev：–save-dev的意	思是将模块安装到项目目录下，并在package文件的	devDependencies节点写入依赖，-D为该命令的缩写

三. 这里解释一下
补充：前端总体分桌面和弹窗
以后键文件夹的格式：
1）静态资源放在static文件夹下面
2）router下面放路由
3）views放视图
四.来看一下具体的创建文件吧

1.在views里面两个文件练习一下Main.vue和Login.vue

Main.vue
<template>
  <h1>首页</h1>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
</style>

Login.vue文件，是从ELementUi官网拷贝的
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

2. 创建好了文件就开始配置路由
	1）老路就是在src下面创建router文件夹
	2）然后如下配置

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'



Vue.use(Router)

export default new Router({
  routes: [{
    path: '/main',
    component: Main
  },
    {
      path: '/login',
      component: Login
    }]
});

	3）配置好啦就来配置main.js文件，都是和昨天配置的router差不多的
		a. 导入
		b. 显示的使用
		c. 然后再到new Vue里面配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//导入路由
import router from './router'
Vue.use(router)


//导入ELementUi（为什么要到，和昨天的Axios一样的），并且导入他的css样式
import ElementUI from 'element-ui'
Vue.use(ElementUI)
//导SAss的原因
import 'element-ui/lib/theme-chalk/index.css'



Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  render: h => h(App),
  components: { App },
  template: '<App/>'
})

	在这一步可能会报错如下：原因是SASS版本太	高，所有降低版本
	Module build failed: TypeError: this.getOptions is 	
	not 	a function
 	at Object.loader (D:\Vue\Vuehello\node_modules\_sass-	loader@12.1.0@sass-loader\d
	ist\index.js:25:24)
	解决方法是：
	在package.json找到sass-loader，改为：	7.3.1

	4）然后再到App.vue里面配置，这里说明一下，以后写的时候，都把这个router-view标签带上，不然有时候是无法加载的，我亲测过。

<template>
  <div id="app">
    <router-link to="/login">登录页面</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

	5)看一下效果

在这里插入图片描述

十五. 路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

1. 下面开始创建呗，在views里面创建Profile.vue和List.vue文件

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "Profile"
  }
</script>
<style scoped>
</style>

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

2.配置路由，这里是配置子路由

import List from '../views/view/List'
import Profile from '../views/view/Profile'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/main',
    name: 'main',
    component: Main,//嵌套
    children: [
      {path: '/user/profile',component: Profile},
      {path: "/user/list",component: List}
    ]
  },
    {
      path: '/login',
      name: 'login',
      component: Login
    }]
});

3. 然后再对之前的Main.vue做如下修改
	这里主要是应该有一个思想的形成，
	1）第一个：我们配置的路由然后通过<router-link>标签在任何一个地方引入：例如
	<router-link to="/user/profile">个人信息</router-link>
	2）然后就是自己想要的页面，展示当前引入的路由页面，例如：
	<el-main>
      <!--在这里展示视图-->
      <router-view />
    </el-main>
    这句话，可能不太好理解，就是我们点开了上面的父页面，然后想要在父页面中展示子页面

<template>
  <div>
    <el-container>
      <!--//aside是侧边栏-->
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

十七. 传递参数和重定向

（一）参数传递，总体分为三步走
在这里插入图片描述

1. 首先设置到对应的页面中去设置
				
				这:to其实是v-bind。前面介绍的。
			1.1 一个参数
				 <router-link :to="{name:'userProfile',params:{id:1}}">
						个人信息
				</router-link>
			2.2 如果有两参数
					<router-link v-bind:to="{name:'userProfile',params:{id:1,username:'hello'}}">
						个人信息
					</router-link>
	1）第一步就是找到要主页面（我们要设置的页面）
			:to = "{name: 'xxxx', params:{id:'xx',username: 'xx'}}，这个name设置为
		你在路由里面配置的对饮路由的标签名字，params是参数
	2）第二步就是要取
		2.1 取出来
		path: '/user/profile:id'，
		2.2 取出来
		path: '/user/profile:id/:username'
	3）展示，到想要的地方展示就可以了
		<template>
			<div>
				<h1>个人信息</h1>
				<h1>{{$route.params.id}}</h1>
	 		</div>
		</template>
		这里我想说一下，以后我们在对饮的template里面写内容的时候，
		不要随便写，要在<div>标签里面写
2. 还是传参数，另外一种方式
	1）上面的第一步不变
		<router-link v-bind:to="{name:'userProfile',params:{id:1,username:'hello'}}">
			个人信息
		</router-link>
	2）第二步是在对饮的路由上面加props：true，支持解耦的形式
	{
    	path: '/user/profile:id/:username',
    	name: 'userProfile',
    	component: Profile,
   		props:true},
    3）然后直接取出

<template>
  <div>
    <h1>个人信息</h1>
    <h1>{{$route.params.id}}</h1>
    <h1>{{$route.params.username}}</h1>
    //现在这样取出来
    <h1>{{id}}</h1>
  </div>
</template>
<script>
  export default {
  	//这里有个小配置
    props:[id],
    name: "Profile"
  }
</script>
<style scoped>
</style>

（二）重定向

重定向很简单的，就是再次对路由的配置罢了
	{
		path: '/main',
		name: 'Main',
		component: Main
	},
	{  
		path: '/goHome',
		redirect: '/main'
	}

十八. 404页面等

（一）回顾一下前面的参数传递
在这里插入图片描述

同学郑学习

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

首先第一部分是部署项目vuehr项目遇见的问题，第一个问题： Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)For more information on which environments are supported please see:在这个问题大概意思就是Node Sass不支持当前环境:解决办法就是：npm uninstall
复制链接

扫一扫