~Wforikl
~Wforikl

VUE课程笔记

VUE课件

一.第一个Vue程序

什么是MVVM

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

在这里插入图片描述

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Angular JS

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

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

  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。

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

    在这里插入图片描述

（1）View

View是视图层， 也就是用户界面。前端主要由HTML和csS来构建， 为了更方便地展现 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thymeleaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS react等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
  MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
  View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

Vue

Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，axios，vuex) 或既有项目整合。
（1）MVVM模式的实现者

​ Model：模型层， 在这里表示JavaScript对象
​ View：视图层， 在这里表示DOM(HTML操作的元素)
​ ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
​ 在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model 就是定义了一个Observer观察者

​ ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
​ ViewModel能够监听到视图的变化， 并能够通知数据发生改变
​ 至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

( 2 ）为什么要使用Vue.js

​ 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
​ 移动优先。更适合移动端， 比如移动端的Touch事件
​ 易上手，学习曲线平稳，文档齐全
​ 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
​ 开源，社区活跃度高

第一个Vue程序

（1）下载地址

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

（2）代码编写

Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：

1、创建一个HTML文件

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

body>
html>

2、引入Vue.js

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

3、创建一个Vue实例

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });
</script>
  • el: '#vue'：绑定元素的ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

4、将数据绑定到页面元素


<div id="app">
    {{message}}
div>

说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果

（3）完整的HTML

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

head>  


<div id="app">
    {{message}}
div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });
script>
body>
html>

（4）测试

为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
  1、在浏览器上运行第一个Vue应用程序， 进入开发者工具
  2、在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld
  此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。

二 、基础语法指令

2-1、v-bind

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!
我们还可以使用v-bind来绑定元素特性!上代码

DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

head>
<body>


<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  span>
div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    });
script>
body>
html>

你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
  如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。同时在这里我们也要要知道v-bind 的简写模式（:）

2-2、v-if， v-else

什么是条件判断语句，就不需要我说明了吧，以下两个属性!

  • v-if
  • v-else

上代码

DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <h1 v-if="ok">Yesh1>
    <h1 v-else>Noh1>
   
div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: true
        }
    });
script>
body>
html>

测试：
1.在浏览器上运行，打开控制台!
2.在控制台输入vm.ok=false然后回车，你会发现浏览器中显示的内容会直接变成NO
   注：使用v-*属性绑定数据是不需要双花括号包裹的

v-else-if

  • v-if
  • v-else-if
  • v-else
    注：===三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码：
DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else-if="type==='D'">Dh1>
    <h1 v-else>Ch1>

div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: 'A'
        }
    });
script>
body>
html>
2-3、v-for
  • v-for

格式说明

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    li>

div>

注：items是数组，item是数组元素迭代的别名！
  上代码：

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

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    li>

div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            items:[
                {message:'行思科技 刘老师'},
                {message:'行思科技 夏老师'},
                {message:'行思科技 贾老师'}
            ]
        }
    });
script>
body>
html>

测试：在控制台输入vm.items.push({message：'行思科技 毕老师'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条行思科技 毕老师.

2-4、v-on

v-on监听事件
 事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!
 上代码：




    
    Title

并且我们在这学习到了一个新的属性methods 注意看好写法 并不是（） 我们在html文档里面写的各种事件都可以存放到这

2-5、v-model

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

为什么要实现数据的双向绑定

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

在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

（1）单行文本

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message" value="hello">{{message}}
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript ">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
script>
body>
html>

（2）多行文本

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
   多行文本：<textarea v-model="pan">textarea>  多行文本是：{{pan}}
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"Hello hello!"
        }
    });
script>
body>
html>

（3）单复选框

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

<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
      
    <label for="checkbox">{{checked}}label>
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
script>
body>
html>

（4）多复选框

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

<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      
    <label for="jack">Jacklabel>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
      
    <label for="join">Jacklabel>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      
    <label for="mike">Mikelabel>
    <span>选中的值：{{checkedNames}}span>
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
script>
body>
html>

（5）单选按钮

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

<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">Onelabel>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Twolabel>
    <span>选中的值：{{ }}span>
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
script>
body>
html>

（6）下拉框

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">


    下拉框:
    <select v-model="pan">
        <option value="" disabled>---请选择---option>
        <option>Aoption>
        <option>Boption>
        <option>Coption>
        <option>Doption>
    select>
    <span>value:{{pan}}span>



div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
script>
body>
html>

注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

三、详解vue生命周期

首先，每一个vue实例都有一个完整的生命周期，也就是从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

这是官方文档上的图片

img

可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

我们先简单的来解说这张图，然后再通过例子来详看
首先，从图上，我们可以看出，他的一个过程是

  1.  new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle， 其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得_isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）

  2.  执行beforeCreate生命周期函数

  3.  beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染

  4.   执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了

  5.  created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法(后面会详细说)。

  6.  确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。

  7.  之后再调用beforMount， 也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。

  8.  beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.$el（这一步我们可能不理解，请耐心往下看，后面我会举例说明）,然后再将替换后的$el append到我们的页面内。整个初步流程就算是走完了

  9.  之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。_

  10. 再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的_isMounted是不是为ture并且1_isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程）_

  11. _beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新

  12. _然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做（至于为什么，以后讲到$nextTick再说吧）

  13. _再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
    之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true
  14. 销毁完成后，再执行destroyed

示例

大致过程就是这样，下面我们来通过例子来看一看

<body>
    <div id="app">
        <p>{{message}}p>
        <button @click="changeMsg">改变button>
    div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type ='text/javascript'>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
script>

我们先看看首次加载时，输出了啥

在这里插入图片描述

从上面我们可以看出几点，

首次，只执行了4个生命周期，beforeCreate，created, beforeMount, mounted。
同时，我们可以看出，第一个生命周期中，我们拿不到data中的数据，因为这个时候数据还未初始化
created中，我们可以拿到data中的message数据了，因为初始化已经完成
beforeMount中，我们可以看出，我们拿到了 e l ，而 m o u n t e d 中，我们也拿到了 el，而mounted中，我们也拿到了 el，而mounted中，我们也拿到了el， 不过好像有点不一样是吧。一个好像是渲染前的，一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现，最初其实我们是会去让this.KaTeX parse error: Expected 'EOF', got '#' at position 54: …中，其实我们拿到的就是页面中的#̲app。而再继续往后，首先我们…el啊。这也就是我们前面所说到的替换 e l 是什么意思了。所以，在 m o u n t e d 中，我们所得到的渲染完成后的 el是什么意思了。 所以， 在mounted中，我们所得到的渲染完成后的 el是什么意思了。所以，在mounted中，我们所得到的渲染完成后的el。
下面我们再看个例子

var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        template: '<div>我是模板内的{{message}}div>',
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })

我们在new Vue实例的时候直接传入了一个template，这时候我们再看输出

在这里插入图片描述

这么看是不是就很清晰了啊 ，在beforeMount的时候，KaTeX parse error: Expected 'EOF', got '#' at position 5: el还是#̲app， 但是在mounted…el。

下面我们删除上面的template, 点击按钮更改下message，查看输出

在这里插入图片描述

哎。。。有没有看到一个很奇怪的东西啊，在beforeUpdate中输出的 e l 居然和 u p d a t e d 里面输出的是一样的。这不对啊，以我们上面所说的逻辑的话， b e f o r e U p d a t e 内的 el居然和updated里面输出的是一样的。这不对啊，以我们上面所说的逻辑的话，beforeUpdate内的 el居然和updated里面输出的是一样的。这不对啊，以我们上面所说的逻辑的话，beforeUpdate内的el应该是更新前的啊。这是怎么回事呢。这时候我们先来看一下mounted里面的。mounted里面我们看到p标签内依旧是hello world 对不对，其实这是因为，我是先点击了#app那个div的箭头，将这个div展开了以后，我再点击的按钮去更改了message，所以mounted里面还是原来的。那我现在如果先不展开mounted里面的div的话，我们来看看会怎么样
在这里插入图片描述

可以看到，初始输出，其实是这样的，我们看不到#app内的东西，需要点击箭头展开才能看到，现在，我不展开，然后我先点击按钮去改变message, 等beforUpdate和updated都执行完成后，我们再来一起展开，看下会怎么样

在这里插入图片描述

这是点击改变了message后的截图，然后我们现在展开div看看

在这里插入图片描述

看到没有，我们发现什么啦，怎么现在mounted里面的 e l 也变成更新后的啦。呵呵，不要慌，其实啊，因为 t h i s . el也变成更新后的啦。 呵呵，不要慌，其实啊，因为this. el也变成更新后的啦。呵呵，不要慌，其实啊，因为this.el是一个对象，其实本质就是一个指针，当我们刚console.log输出的时候，其实并没有显示内容，而当我们点击箭头去展开这个div的时候，将指针指向了当前的 e l ，所以我们看到的才会都是改变后的 el，所以我们看到的才会都是改变后的 el，所以我们看到的才会都是改变后的el。这也就是为什么之前mounted里面的$el是改变之前的值，而现在是改变之后的值了，因为之前那张图，我是先展开了mounted中的div，再去改变的message。下面我们再来验证下是不是这么回事
怎么验证，我们修改下代码

mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        }

我们增加一个输出 this.$el.innerHTML, 再查看结果

在这里插入图片描述

这么看是不是就很明了啦，beforeUpdate里面的$el的内容，确实还是改变之前的，而我们之前看到的，只是因为我们后面展开时指针指向了当前值才导致的，是个视觉差而已。

后面两个销毁的，我就不举例说明了，没啥说的。下面我们再看一个问题，就是如果我们没有设置el时，会怎么样，我们在之前的生命周期图中，是说过，当没有找到el时， 说是不是会等待vm.$mount(el) 啊，这句话啥意思，我们来看一下
在这里插入图片描述

首先，我们看下，vue源码中，

在这里插入图片描述

在执行完，beforeCreate和created之后，是做了个判断，当存在el时，调用了 $mount方法，created之后的步骤，就是在这里面去走的。那如果没有el呢, 生命周期图中是说等待vm. $mount调用。那是不是只能等待我们手动去调用啊。

var vm = new Vue({
        data: {
            message: 'hello world'
        },
        // template: '<div>我是模板内的{{message}}  <button @click="changeMsg">点我button>div>',
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el.innerHTML)
            console.log(this.$el)
        }
    })

这个时候，我们删除了el属性，看看结果

在这里插入图片描述

是不是只走了前面两个生命周期啊，后面就没走了，这个时候其实就是在等 m o u n t 被调用了，那我们加个按钮，点击按钮，手动调用一下 mount被调用了，那我们加个按钮，点击按钮，手动调用一下 mount被调用了，那我们加个按钮，点击按钮，手动调用一下mount看会怎样是不是只走了前面两个生命周期啊，后面就没走了，

这个时候其实就是在等 m o u n t 被调用了，那我们加个按钮，点击按钮，手动调用一下 mount被调用了，那我们加个按钮，点击按钮，手动调用一下 mount被调用了，那我们加个按钮，点击按钮，手动调用一下mount看会怎样

在这里插入图片描述

没点击之前在这里插入图片描述

点击后

在这里插入图片描述

可以看到，生命周期继续往下走了。
这时候不知道大家是不是想起来，看到有些vue项目的main.js里面是这样的

export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

而有些vue项目中人家用的又是这样的

export default new Vue({
  router,
  store,
  i18n,驱蚊器
  render: h => h(App)
}).$mount('#app')

其实后者，就相当于是手动调用了$mount了。

四、vue的计算属性 与 监听属性

1、什么是计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

首先，来看一个字符串反转的例子：



	
		
		Title
	
	
		
		

			{{ message.split('').reverse().join('') }}

上面这个例子，在模板中表达式包括3个操作，相对比较复杂，也不容易看懂。

所以在遇到复杂的逻辑时应该使用计算属性。

将上例进行改写：



	
		
		Title
	
	
		
		

			
原字符串：{{message}}

			
计算后反转字符串: {{reverseMessage}}

上面的模板中声明了一个计算属性reverseMessage。
提供的函数将用作属性reverseMessage的getter（用于读取）。
reverseMassage依赖于massage，在massage发生变化时，reverseMassage也会更新。

[ computed Vs methods]
我们发现computed属性完全可以由methods属性所代替，效果时完全一样的。既然使用methods就可以实现，那么为什么还需要计算属性呢？原因就是computed是基于它的依赖缓存，只有相关依赖发生改变时，才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。可以说使用computed性能会更好。

[ 依赖缓存]
举一个更好说明computed是基于依赖缓存的例子:



	
		
		Title
	
	
		
	

	        
原字符串：{{message}}

	        
计算反转字符串：{{reverseMessage1}}

	        
计算反转字符串：{{reverseMessage1}}

	        
计算反转字符串：{{reverseMessage2()}}

	        
计算反转字符串：{{reverseMessage2()}}

这个例子中，num是一个独立的变量。在使用reverseMessage1这个计算属性时，num会变成2 。但是当再使用reverseMessage1属性时，num没有变化，依然是2。因为Vue实例的message数据没有发生变化 于是DOM渲染就直接用这个值，不会重复执行代码。而reverseMessage2这个方法只要用一个，就要执行一次，于是每次返回的结果都不一样。
[computed setter]
每一个计算属性都包含一个getter与一个setter，上面的实例中都是计算属性的默认用法，只是利用getter来读取。
computed属性默认只有getter，不过在需要时可以自己提供一个setter函数，当手动修改计算属性的值时，就会触发setter函数，执行自定义的操作。
例如：



	
		
		Title
	
	
		
		

			
{{ site }}

上面的代码，当我们执行vm.site=‘baidu http://www.baidu.com’时，数据name与url都会相对更新，视图也会更新。

2、什么是监听属性

监听属性可以针对某个属性进行监听，只要这个属性的值发生改变了，那么就会执行相应的函数

通过watch来响应数据的变化。虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。

[实例1]：通过使用watch实现计数器：

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
	head>
	<body>
		<div id="app5">
			<p style="font-size: 25px;">计数器：{{ counter }}p>
			<button @click="counter++" style="font-size: 25px"> 点击我button>
		div>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
		
		<script>
			var vm1 = new Vue({
				el: "#app5",
				data: {
					counter: 1
				}
			});
			vm1.$watch('counter', function(nval, oval) {
				alert('计数器值的变化：' + oval + '变为' + nval + "!");
			})
		script>
	body>
html>

注意：$watch是一个实例方法，后面是一个回调函数，这个回调函数将在counter值改变之后调用

[实例2]：千米与米之间的换算

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
	head>
	<body>
		<div id="app6">
			千米：<input type="text" v-model='kilometers'>
			米：<input type="text" v-model='meters'>
			<p id="info">p>
		div>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>>
		<script>
			var vm2 = new Vue({
				el: '#app6',
				data: {
					kilometers: 0,
					meters: 0
				},
				watch: {
					// 监听kilometers数据
					kilometers: function(val) {
						console.log(val);
						this.kilometers = val;
						this.meters = this.kilometers * 1000;
					},
					// 监听meters数据
					meters: function(val) {
						this.meters = val;
						this.kilometers = val / 1000;
					}
				}
			});
			// $watch是一个实例方法
			vm2.$watch("kilometers", function(newValue, oldValue) {
				// 这个回调函数在vm2.kilometers改变后调用
				document.getElementById('info').innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
			})
		script>

	body>
html>

[computed与watch的区别]
简单来说：
1：computed是同步的，watch可以实现异步
2：computed中的函数都是带返回值的，wacth里面的函数可以不写返回值。

我们可以在watch属性的方法里执行异步操作，使用定时器来限制操作的频率吧，添加中间状态等等，这些操作都是无法用计算属性实现的。

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
	head>
	<body>
		<div id="app">
			{{count}}
			<button @click="count++">点击加一button>
		div>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
		<script>
			new Vue({
				el: "#app",
				data: {
					count: 1
				},
				watch: {
					count: function(val) {
						var that = this;
						window.setTimeout(function() {
							that.count = 0;
						}, 2000)
					}
				}
			})
		script>
	body>
html>
计算属性、指令实现简单实战

实例：通过计算属性、指令等实现简单的购物车

 <style>
        table {
             border: 1px solid black;
             width: 100%;
            }
      
        th {
            height: 50px;
            }
        th, td {
            border-bottom: 1px solid #ddd;
            }
    style>
    <div id="app7">
        <table>
            <tr>
                <th>序号th>
                <th>商品名称th>
                <th>购买价格th>
                <th>购买数量th>
                <th>操作th>
            tr>
            <tr v-for="iphone in IP_Json">
                <td>{{iphone.id}}td>
                <td>{{iphone.name}}td>
                <td>{{iphone.price}}td>
                <td>
                    
                    <button :disabled="iphone.count === 0" @click="iphone.count-=1">-button>
                    {{iphone.count}}
                    <button @click="iphone.count+=1">+button>
                td>
                <td>
                    <button @click="iphone.count=0">移除button>
                td>
            tr>
        table>
        总价：${{totalPrice}}
    div>
    		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    <script>
     var shop = new Vue({
        el:"#app7",
        data: {
            IP_Json: [{
                id: 1,
                name: "huawei",
                price: 5099,
                count: 1
              },
              {
                  id:2,
                  name: "xiaomi",
                  price: 4899,
                  count: 1
              },
              {
                  id:3,
                  name: "iphone x",
                  price: 8900,
                  count: 1
              },
            ]
        },
        computed : {
            totalPrice: function() {
                
                var totalP = 0;
                var len = this.IP_Json.length;
                for( var i= 0; i<len;i++){
                    totalP += this.IP_Json[i].price * this.IP_Json[i].count;
                }
                return totalP;
            }
        }
    })
script>

五、第一个vue项目

入门小节

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Dmo操作放到内存中执行；

常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

生命周期函数 以及vue 的计算与监听属性

说明
Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：

element ui: https://element.eleme.cn/#/zh-CN
ice: https://ice.work/

1、什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
预先定义好的目录结构及基础代码
项目的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

需要的环境

  • Node.js：http://nodejs.cn/download/
    安装就是无脑的下一步就好，安装在自己的环境目录下

确认nodejs安装成功：

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！
    这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！*

安装Node.js淘宝镜像加速器（cnpm）
这样的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

npm i -g @vue/cli -init
npm install -g @vue/cli
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
2、第一个vue-cli应用程序

1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录

D:\Project\vue-study;
2.创建一个基于webpack模板的vue应用程序

#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是项目名称，可以根据自己的需求起名

vue init webpack myvue

一路都选择no即可；
说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！
（1）初始化并运行

cd myvue
npm install
npm run dev
执行完成后，目录多了很多依赖

目录结构

我们通过webpack+vue-cli搭建了一个简单的vue2开发项目，走过的都知道，一个命令创建了好多文件和文件夹，一脸懵，这里，为大家简单介绍一下项目的目录结构，首先，来看整体项目目录结构的截图：
先从最外层走起（根目录文件）：

  1. babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能，还可以在这里配置一些框架的按需加载（如element-ui）
  2. .editorconfig：项目中编辑代码风格
  3. .gitignore : 用于git的忽略文件配置（我们使用git提交的时候，有些文件是不需要提交的，如node模块的node_modules文件夹、打包成功的dist文件夹等）
  4. .postcssrc.js: 用于对style的less语法支持配置
  5. index.html: 项目的首页，即我们编写的代码会通过这个文件显示给浏览器
  6. package.json package-lock.json: 这个就不用多说了吧，大家都懂是项目包的依赖文件
  7. README.md: 展现在GitHub上的描述文件

build文件夹

  1. build.js: 作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包
  2. check-versions.js：用于版本node和npm版本的检测
  3. utils.js：用于项目中关于loader器的引用和项目title、icon等设置
  4. vue-loader.conf.js：因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件
  5. webpack.base.conf.js：项目webpack的基础配置文件
  6. webpack.dev.conf.js：开发环境下的webpack配置文件
  7. webpack.prod.conf.js：生产环境下的webpack配置文件

config文件夹

  1. dev.env.js、prod.env.js：用于配置项目的环境变量
  2. index.js：用于webpack的一些配置信息

node_modules文件夹
这个文件夹就不多说了，是项目包存储的地方

src文件夹

这个文件夹内，就是我们真正项目代码的存储地址

  1. assets文件夹：这里放置项目的模块静态资源，如css，js还有图片、字体
  2. components文件夹：使用vue的都知道，vue是模块化的框架，我们将页面中的元素分模块编写，从而提高代码修改的方便性以及重用的效率，这个文件夹内就是我们项目的模块存放地址
  3. router文件夹：vue-router让我们能处理vue的路由，从而更佳的使用component，这个文件夹内就是个vue-router的配置文件
  4. APP.vue：作为项目的根组件，也就是我们直接吧这个组件装到index.html中进行渲染
  5. main.js：作为webpack项目的入口文件，在这个文件夹内，我们是可以引用静态资源以及对整体vue的配置

static文件夹
用于存放在整体项目的静态资源，如图片，字体等

3、vue-router 路由

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5 历史模式或hash模式， 在IE 9中自动降级
  • 自定义的滚动行为

安装
基于第一个vue-cli进行测试学习； 先查看node modules中是否存在vue-router
vue-router是一个插件包， 所以我们还是需要用n pm/cn pm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router@3

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

1、先删除没有用的东西
2、components 目录下存放我们自己编写的组件
3、定义一个Content.vue 的组件

Main.vue组件

安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
	routes:[
		{
			//路由路径
			path:'/content',
			//路由名称
			name:'content',
			//跳转到组件
			component:Content
			},{
			//路由路径
			path:'/main',
			//路由名称
			name:'main',
			//跳转到组件
			component:Main
			}
		]
	});

在main.js中配置路由

import Vue from 'vue'
import App from './App'

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//配置路由
	router,
	components:{App},
	template:''
});

在App.vue中使用路由

六、vue-router详解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

首先我们来学习三个单词（route，routes，router）：

route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；

routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个路由的集合；

router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

我们结合一个小demo来看（文章有点长，耐心慢慢看，学得慢才能进步的快，当然可以跟着一起敲）：

首先需要安装vue-cli来构建一个vue的开发环境（怎么安装这里不讲，自己百度去，如果这种问题自己都解决不了的话，后面的知识可能对你来说收益不大）

安装完vue-cli之后，我们的项目目录结构如下：

VUE课程笔记_第1张图片

然后我们在命令行中输入npm install vue-router --save-dev来安装vue-router，安装完之后我们可以打开package.json文件，在package.json文件中可以看到vue-router的版本号；

VUE课程笔记_第2张图片

到这一步我们的准备工作就完成了，要进行写demo了；

我们在src目录下新建三个文件，分别为page1.vue和page2.vue以及router.js：

page1.vue：

page2.vue：

router.js

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1  from './page1.vue';
//引用page2页面
import page2  from './page2.vue';

//定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
]

//实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

这里我们再修改一下main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: ''
})

修改App.vue

就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；但是有个问题就是我们第一次进去是看不到路由页面的，这是因为我们没有设置默认值，我们首次进入的时候路径是为空的，那么我们可以这么解决：

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue'

const routes=[
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    //可以配置重定向
    {path:'',redirect:"page1"}
    //或者重新写个路径为空的路由
    {path:"",component:page1}
]

const router=new VueRouter({
    routes
});

export default router

上面的两种解决方案都是可以解决的，配置重定向的意思就是当匹配到路径为空的时候，就会重定向到page1，执行page1的路由；或者我们也可以重新配置个路由，路径为空的时候router-view展示page1的页面；

用重定向和单独配置路由的区别：

重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；

重新配置路由是当匹配到路径符合条件的时候，router-view页面展示部分负责拿符合条件路由的页面来展示，实际上url是没有发生变化的；

那么还有些复杂情况，是基本路由实现不了的；我们来接着往下看

动态路由匹配：

其实我们的生活中有很多这样的例子，不知道大家留意没有？比如一个网站或者后台管理系统中，在我们登录之后，是不是通常会有一个欢迎回来，XXX之类的提示语，这个我们就可以通过动态路由来实现这个效果；

首先在src目录下新建一个user.vue文件：

然后我们修改App.vue文件的代码：

修改我们的router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue'

const routes=[
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    // {path:'',redirect:"page1"}
    {path:"",component:page1},
 //使用冒号标记，当匹配到的时候，参数值会被设置到this.$route.params中
    {path:"/user/:name",component:user}
    
]

const router=new VueRouter({
    routes
});

export default router

配置好了，不出意外是能正常运行的，我们来看一下效果：

VUE课程笔记_第3张图片

动态路由匹配给我们提供了方便，使得我们通过配置一个路由来实现页面局部修改的效果，给用户造成一种多个页面的感觉，是不是很酷！！！

酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；但是办法总比问题多，我们可以通过监听$route对象来实现;

修改user.vue的代码

效果图如下：

VUE课程笔记_第4张图片

我们可以很明显的看到我们监听的$route对象被触发了，控制台也输出了；

下面我们来一起看一下嵌套路由：

嵌套路由：

很多时候我们的页面结构决定了我们可能需要嵌套路由，比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候我们就可以用到嵌套路由；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；

好记性不如烂代码，让我们通过代码来看一看：

首先在我们的src目录下新建两个vue文件，分别是phone.vue和computer.vue

phone.vue

computer.vue

然后我们再修改我们的App.vue文件：

通过上面的App.vue文件我们可以看到，我们此时页面只有一个page1的标签了；

我们再来修改router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue';
import phone  from './phone.vue';
import computer from './computer.vue'

const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },
    // {path:"/page2",component:page2},
    // // {path:'',redirect:"page1"}
    // {path:"",component:page1},
    // {path:"/user/:name",component:user}
    
]

const router=new VueRouter({
    routes
});

export default router

为了大家看的直观点，其他路由全部注释了，页面只剩下/page1这一个路由了；

VUE课程笔记_第5张图片

上面说到了，children属性其实就是一个子路由集合，数组结构里面放着子路由；

效果图如下：

VUE课程笔记_第6张图片

vue中this.$router.push()路由传值和获取的两种常见方法

1、路由传值 this.$router.push()

（1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL

（2）当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…)

a) 声明式：

b) 编程式：router.push(…)

c) 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

[复制代码](javascript:void(0)

// 字符串
router.push('home')
 
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
 
// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

[复制代码](javascript:void(0)

VUE课程笔记_第7张图片

2、获取参数的两种常用方法：params和query

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

及通过路由配置的name属性访问

VUE课程笔记_第8张图片VUE课程笔记_第9张图片

this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})

（2）在目标页面通过this.$route.params获取参数：

提示：{{this.$route.params.alert}}

（3）在目标页面通过this.$route.query 获取参数

//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})

//用query获取值

提示：{{this.$route.query.alert}}

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用

vue-router路由守卫

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

​ next()//直接进to 所指路由
​ next(false) //中断当前路由
​ next(‘route’) //跳转指定路由
​ next(‘error’) //跳转错误路由

beforeEach：

路由配置文件：

import  Vue from 'vue'
import  Router from 'vue-router'
import   HelloWorld from '@/components/HelloWorld'
import  HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
 routes: [
  {
  path: '/',
  name: 'HelloWorld',
   component: HelloWorld
  },
   {
   path: '/home',
   name: 'home',
   component: HomePage
 },
   {
   path:'*',
   redirect:'/home'
   }
],
})
 ``router.beforeEach((to,from,next)=>{
  ``console.log(to);
  ``console.log(from);
  ``next();
 ``})
 ``export` `default` `router;

打印结果如下

VUE课程笔记_第10张图片

实现用户验证的代码：

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
  let isLogin = sessionStorage.getItem('userInfo');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

组件内路由守卫

  // 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
 	  1.beforeRouteEnter (to, from, next) {
 	        // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
 	        next(vm => {})
 	    }
 	   2.beforeRouteUpdate (to, from, next) {
 	        // 同一页面，刷新不同数据时调用，
 	    }
 	   3.beforeRouteLeave (to, from, next) {
 	        // 离开当前路由页面时调用
 	    }

router独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

 export default new VueRouter({
     routes: [
         {
             path: '/',
             name: 'home',
             component: 'Home',
             beforeEnter: (to, from, next) => {
                // ...
             }
         }
     ]
 })

注意：重复点击同一路由会报错

const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
    return originalReplace.call(this, location).catch(err => err);
};
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

七、vue组件化

vuecli 中提供一种简单的方式进行组件化开发。

我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue 组件中：

VUE课程笔记_第11张图片

我们会发现，将所有的代码逻辑全部放到一个组件中，代码是非常的臃肿和难以维 护的。
并且在真实开发中，我们会有更多的内容和代码逻辑，对于扩展性和可维护性来说 都是非常差的。
所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。

组件的拆分

我们可以按照如下的方式进行拆分：

VUE课程笔记_第12张图片

定义组件
  • 组件可以使用ES6模块化规范的写法，通过 import 引入其他vue或者js模块。
  • data 部分必须是方法而不是json对象！

按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可。

App.vue文件






Header.vue






Main.vue









MainBanner.vue








Footer.vue
组件的通信

上面的嵌套逻辑如下，它们存在如下关系：

App组件是Header、Main、Footer组件的父组件；
Main组件是Banner、ProductList组件的父组件；
在开发过程中，我们会经常遇到需要组件之间相互进行通信：

比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header 一些数据，让其进行展示；
又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给它们来进行展示；
也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；
总之，在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相 互之间传递数据的；

父子组件之间通信的方式
父子组件之间如何进行通信呢？

父组件传递给子组件：通过props属性；
子组件传递给父组件：通过$emit触发事件；

VUE课程笔记_第13张图片

父组件传递给子组件
在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：

这个时候我们可以通过props来完成组件之间的通信；

什么是Props呢？

Props是你可以在组件上注册一些自定义的attribute （属性）；
父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；
Props有两种常见的用法：

方式一：字符串数组，数组中的字符串就是attribute的名称；
方式二：对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、 默认值等等
Props的数组用法

子组件接收

VUE课程笔记_第14张图片

父组件发送

VUE课程笔记_第15张图片

Props的对象用法
数组用法中我们只能说明传入的attribute的名称，并不能对其进行任何形式的限制，接下来我们来看一下对象的 写法是如何让我们的props变得更加完善的。

当使用对象语法的时候，我们可以对传入的内容限制更多：

比如 指定传入的attribute的类型；
比如 指定传入的attribute是否是必传的；
比如 指定没有传入时，attribute的默认值；

VUE课程笔记_第16张图片

细节一：type类型

那么type的类型都可以是哪些呢？

  1. String
  2. Number
  3. Boolean
  4. Array
  5. Object
  6. Date
  7. Function
  8. Symbol(ES6新增的基本类型)

细节二：对象类型的其他写法

VUE课程笔记_第17张图片

VUE课程笔记_第18张图片
子组件传递给父组件
什么情况下子组件需要传递内容到父组件呢

当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
子组件有一些内容想要传递给父组件的时候；
我们如何完成上面的操作呢？

首先，我们需要在子组件中定义好在某些情况下触发的事件名称；
其次，在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中；
最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；

自定义事件的流程

我们封装一个CounterOperation.vue的组件：

内部其实是监听两个按钮的点击，点击之后通过 this.$emit的方式发出去事件；

子组件语法格式

VUE课程笔记_第19张图片

父级组件接收方法：

VUE课程笔记_第20张图片

自定义事件的参数和验证

自定义事件的时候，我们也可以传递一些参数给父组件：

子组件

VUE课程笔记_第21张图片

父组件

img

VUE课程笔记_第22张图片

事件总线（EventBus）

父子组件通讯原则

为了提高组件的独立性与重用性，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。如此确保每个组件都是独立在相对隔离的环境中运行，可以大幅提高组件的维护性。

VUE课程笔记_第23张图片

那兄弟组件可以用什么？那就是Vue中的 事件总线 ，即 **EventBus **。

EventBus的简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

如何使用EventBus

问题背景：组件传值；在项目开发中，会发现组件传值是一个组基本的操作，也是用的最多的。但是很多时候可能涉及到爷爷和孙子，甚至重孙子之间需要的传值。这个时候eventBus就到了大显身手的时候了。
eventBus 嗯 ，就叫一个事件公共汽车吧。每个人把需要共享给别人的物品就放在这个车上，谁需要了就可以去拿，这样子是不是很方便，每个人都可以访问到，每个人也可以往这个车子上放东西。
下面开始这个过程，

初始化

首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js ：

// event-bus.js
 
 
import Vue from 'vue'
export const EventBus = new Vue()

你需要做的只是引入 Vue 并导出它的一个实例（在这种情况下，我称它为 EventBus ）。实质上它是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

另外一种方式，可以直接在项目中的 main.js 初始化 EventBus ：

// main.js
Vue.prototype.$EventBus = new Vue()// main.js

注意，这种方式初始化的 EventBus 是一个 全局的事件总线 。

现在我们已经创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

发送事件
假设你有两个子组件： DecreaseCount 和 IncrementCount ，分别在按钮中绑定了 decrease()和 increment() 方法。这两个方法做的事情很简单，就是数值递减（增） 1 ，以及角度值递减（增） 180 。在这两个方法中，通过 EventBus.$emit(channel: string, callback(payload1,…)) 监听 decreased （和 incremented ）频道。

上面的示例，在 DecreaseCount 和 IncrementCount 分别发送出了 decreased 和 incremented频道。接下来，我们需要在另一个组件中接收这两个事件，保持数据在各组件之间的通讯。

接收事件
现在我们可以在组件 App.vue 中使用 EventBus.$on(channel: string, callback(payload1,…))监听 DecreaseCount 和 IncrementCount 分别发送出了 decreased 和 incremented 频道。

最终得到的效果如下：

最后用一张图来描述示例中用到的 EventBus 之间的关系：

VUE课程笔记_第24张图片

如果你只想监听一次事件的发生，可以使用 EventBus.$once(channel: string, callback(payload1,…)) 。

移除事件监听者
如果想移除事件的监听，可以像下面这样操作：

import { eventBus } from './event-bus.js'
EventBus.$off('decreased', {})

你也可以使用 EventBus. o f f ( ‘ d e c r e a s e d ’ ) 来移除应用内所有对此事件的监听。或者直接调用 E v e n t B u s . off(‘decreased’) 来移除应用内所有对此事件的监听。或者直接调用EventBus. off(‘decreased’)来移除应用内所有对此事件的监听。或者直接调用EventBus.off() 来移除所有事件频道， 注意不需要添加任何参数 。

上面就是 EventBus 的使用方式，是不是很简单。上面的示例中我们也看到了，每次使用 EventBus 时都需要在各组件中引入 event-bus.js 。事实上，我们还可以通过别的方式，让事情变得简单一些。那就是创建一个全局的 EventBus 。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus 。

全局EventBus

全局EventBus，虽然在某些示例中不提倡使用，但它是一种非常漂亮且简单的方法，可以跨组件之间共享数据。

它的工作原理是发布/订阅方法，通常称为 Pub/Sub 。

  • 有一个全局EventBus
  • 所有事件都订阅它
  • 所有组件也发布到它，订阅组件获得更新
  • 总结一下。所有组件都能够将事件发布到总线，然后总线由另一个组件订阅，然后订阅它的组件将得到更新

在代码中，我们将保持它非常小巧和简洁。我们将它分为两部分，将展示两个组件以及生成事件总线的代码。

var EventBus = new Vue();
 
Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus
        }
    }
})

现在，这个特定的总线使用两个方法 $on 和 e m i t 。一个用于创建发出的事件，它就是 emit 。一个用于创建发出的事件，它就是 emit。一个用于创建发出的事件，它就是emit ；另一个用于订阅 $on ：

var EventBus = new Vue();
 
this.$bus.$emit('nameOfEvent',{ ... pass some event data ...});
 
this.$bus.$on('nameOfEvent',($event) => {
    // ...
})

现在，我们创建两个简单的组件，以便最终得出结论。

接下来的这个示例中，我们创建了一个 ShowMessage 的组件用来显示信息，另外创建一个 UpdateMessage 的组件，用来更新信息。

在 UpdateMessage 组件中触发需要的事件。在这个示例中，将触发一个 updateMessage 事件，这个事件发送了 updateMessage 的频道：

同时在 ShowMessage 组件中监听该事件：



 
<

最终的效果如下：

从上面的代码中，我们可以看到 ShowMessage 组件侦听一个名为 updateMessage 的特定事件，这个事件在组件实例化时被触发，或者你可以在创建组件时触发。另一方面，我们有另一个组件UpdateMessage ，它有一个按钮，当有人点击它时会发出一个事件。这导致订阅组件侦听发出的事件。这产生了 Pub/Sub 模型，该模型在兄弟姐妹之间持续存在并且非常容易实现。

八、全局状态管理组件vuex

vuex：https://vuex.vuejs.org/zh/

1.vuex简介

Vuex 是一个专为 Vue 开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。( vuex 是全局状态管理组件 )

简而言之，Vuex 采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

2.vuex优点

Vuex状态管理跟使用传统全局变量的不同之处：

  1. Vuex的状态存储是响应式的： 就是当你的组件使用到了这个 Vuex 的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

  2. 不能直接修改Vuex的状态： 如果是个全局对象变量，要修改很容易，但是在 Vuex 中不能这样做，想修改就得使用 Vuex 提供的唯一途径：显示地提交（commit）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用

3.什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

4.使用步骤

1.安装

npm install vuex@3 --save

2. 引用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建仓库Store

要使用 Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

 //创建一个 store
 const store = new Vuex.Store({});

4、包含模块

  • State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
  • Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
  • Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  • Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

img

1. State

假设我们有一个全局状态 count 的值为 5。那么，我们就可以将其定义为 state 对象中的 key 和 value，作为全局状态供我们使用。如下：

 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });
2.Getters

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
});

在组件获取newCount的方式

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};
3. Mutations

Vuex 给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    // mutations是修改state中数据的唯一途径
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

我们在提交commit时候，第一个参数"increment",就是对应在 mutations中的increment方法，第二个参数是自定义值。例如：

 methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

在组建中获取count的方法

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};
4. Action
  1. 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
  2. 只有通过 action=>mutations=>states ，这个流程进行操作，具体步骤如下：
export default new Vuex.Store({
    //存放数据
    state: {
        obj: {},
    },
    //4. 通过commit mutations中的方法来处理
    mutations: {
        getParam(state, Object) {
            //5.修改state中的数据
            state.obj = Object
        }
    },
    //2.接受dispatch传递过来的方法和参数
    actions: {
        getParamSync(store, Object) {
            // 处理异步操作
            setTimeout(() => {
                //3.通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                store.commit('getParam', Object);
            }, 1000)
        }
    }
})

在组件里面我们怎么使用

methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
}
5. Modules

随着项目的复杂度增大，为了方便管理 Vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们在组件中可以这样调取




computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

5.Vuex的四个辅助函数：
  • 语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  computed: {
    ...mapGetters([
      "": "vuex仓库定义的方法",
   ]),
    ...mapState({}),
  },
  methods: {
    ...mapMutations({}),
    ...mapActions({}),
  },
};

具体使用后

computed: {
    ...mapState({
      count: (state) => {
        return state.count;
      },
    }),
    ...mapGetters(['newcount']
    )
  },
   methods: {
      ...mapMutations(['increment']),
    send(e) {
      this.$router.push(e.value);
    },
    muchange() {
        this.increment(10)
    },
  },
  
  使用异步
   methods: {
      ...mapMutations(['increment']),
      ...mapActions(['add']),
    send(e) {
      this.$router.push(e.value);
    },
    muchange() {
       this.add(10)
    },
  },

九、 axios请求详解

1.axios定义

axios是什么：axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库

axios的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

具备以下特征：

 a.从浏览器中创建 XMLHttpRequest
 b.从 node.js 发出 http 请求
 c.支持 Promise API
 e.拦截请求和响应
 f.转换请求和响应数据
 g.取消请求
 h.自动转换JSON数据
 i.客户端支持防止 CSRF/XSRF

Promise是什么：Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise。

是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。

promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。

promise的本质是什么：分离异步数据获取和业务

1、 安装axios：

npm install axios

2、 在App.vue中引入axios：

import axios from 'axios'

Vue.use(axios) // 注意 这样的用法是错误的，axios不支持Vue.use()的声明方式

但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令；

如果不加 Vue.prototype.$ajax = axios这句的话，则直接使用axios.get()

3.请求配置

axios中的请求配置参数包括以下内容：

{
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。一般用于全局路径配置
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `params` 是即将与请求一起发送的 URL 参数 请求方式是get 就需要用params
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 10000,
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的
}

配置的优先顺序

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

响应结构

响应返回内容结构如下：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}
2.axios 简单使用

使用get请求数据

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行 POST 请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3.拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
4.实战vue项目封装axios

基本配置如下所示：

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: ‘https：//localhost:3000', // api的base_url
  timeout: 35000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
config => {
	//处理内容根据自己的业务需求，这里以上传token为例
  if (store.getters.token) {
    let test = config.data;
    if(test){
      config.data['access_token']= getToken()
    }

    if (get('storeId') && 'undefined'!=get('storeId')){
      config.headers['storeid'] = get('storeId')
    }
    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }else{
    config.headers['client_id'] = 'app';
    config.headers['client_secret'] = 'app';
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非200是抛错 可结合自己业务进行修改
  */
    const res = response.data
    if (res.code !== 200 && !res.access_token) {
      console.log(res);
      Message({
        message: res.msg,
        type: 'error',
        duration: 3 * 1000
      })

      // 401:未登录;
      if (res.code === 401||res.code === 403) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log(error);
    Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

封装完成之后，只需要在对应需要调用http请求的地方，引入调用即可，如下所示：

//上述封装的文件名是request.js
import request from '/request'

/**
 * @param {Object} username
 * @param {Object} password
 * 登录
 */
export function login(username,password){
  return request({
    url: '/sys/sysUser/login',
    method: post,
    data: {
      username,
      password
    }
  })
}

十. vue2补充

$attrs

关于$attrs, vue官网如是介绍：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

a t t r s 大白话介绍 a t t r s 就是属性的意思即 a t t r i b u t e ， j s 的 s e t A t t r i b u t e , g e t A t t r i b u t e 听过把， j q 的 attrs大白话介绍 attrs就是属性的意思即attribute， js的setAttribute, getAttribute听过把，jq的 attrs大白话介绍attrs就是属性的意思即attribute，js的setAttribute,getAttribute听过把，jq的().attr有用过吧，他们是用来设置啥的？不就是设置类似于title, data-x, src这类的属性么，由此延伸，大概可知道vue实例里的this.$attrs是啥了。
再来，如有一个父组件是这样的：

如上，很明显age, sex在子组件中可通过props来接受这些值，这就完成可父组件向子组件传值，可注意，这时候props可拿不到像title与data-height的值，这时候在子组件打印this.$attrs,你会发现是这样子的：

这样子就可以拿到这些属性值啦，值得注意的是，class跟style不属于属性值。

a t r r s 深传递如果有这样一种情况呢，子组件可以通过 t h i s . atrrs深传递 如果有这样一种情况呢，子组件可以通过this. atrrs深传递如果有这样一种情况呢，子组件可以通过this.attrs的拿到父组件的属性值，然后孙组件呢，如果在子组件上面没有定义属性，在孙组件里打印this. a t t r s 其实是个控制，为啥？因为子组件没定义属性啊，相要在孙组件乃至更深层的后代里拿到父组件的属性值，可以在相应子组件里通过 v − b i n d = " attrs其实是个控制，为啥？因为子组件没定义属性啊，相要在孙组件乃至更深层的后代里拿到父组件的属性值，可以在相应子组件里通过v-bind=" attrs其实是个控制，为啥？因为子组件没定义属性啊，相要在孙组件乃至更深层的后代里拿到父组件的属性值，可以在相应子组件里通过v−bind="attrs"即可传递父组件的属性值至下一代子组件，若要继续往下传递，相应字组件也要添加v-bind=“$attrs”
如：
父组件：

子组件：

这里this.$attrs是{data-height: “45”, title: “ohNo”}

孙组件

这里this. a t t r s 是 d a t a − h e i g h t : " 45 " , t i t l e : " o h N o " ，如果子组件没有加 v − b i n d = " attrs是{data-height: "45", title: "ohNo"}，如果子组件没有加v-bind=" attrs是data−height:"45",title:"ohNo"，如果子组件没有加v−bind="attrs"，这里打印this.$attrs为空对象

你可能感兴趣的:(vue.js,笔记,前端)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
    高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
    数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
  • 【Git】常见命令(仅笔记) 好想有猫猫 GitLinux学习笔记git笔记elasticsearchlinuxc++
    文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
  • 为什么你总是对下属不满意? ZhaoWu1050
    【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
  • 母亲节如何做小红书营销 美橙传媒
    小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
  • 读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
    为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
  • 基于Python给出的PDF文档转Markdown文档的方法 程序媛了了 pythonpdf开发语言
    注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
  • 语文主题教学学习笔记之87 东哥杂谈
    “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
  • Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 阅读笔记：阅读方法中的逻辑和转念 施吉涛
    聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 《转介绍方法论》学习笔记 小可乐的妈妈
    一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他