vue-05-Mixins、vue对象生命周期、swiper插件

mixins混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

就是把vue组件的公共的功能提取出来，提高复用性

混入

 

选项（data数据）合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

data的合并，就近原则。以组件优先。

输出：张四疯、22 、中国

 

钩子函数的合并

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

 

输出：

混入对象的created

vue对象的created

 

对象属性的合并

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

【对象属性（methods属性，computed属性，components属性）的合并，就近原则。以组件优先。】

 

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

 

 

vue对象生命周期【即钩子函数】

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

 

创建

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

实例被创建之前

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

数据和方法已被初始化，最早只能在此方法调用data,methods

此方法后，vue开始编译模板，vue代码中的指令开始执行，在内存中生成编译好的模板字符串，渲染为内存中的DOM，只在内存中，没有挂载

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

模板编译完成，未渲染，未挂载到页面，页面中元素的内容未被替换

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

该钩子在服务器端渲染期间不被调用。

内存中模板已挂载到页面，创建期间最后一个函数，执行完表示实例已经完全创建好了

【操作DOM时在此函数内部进入运行】

 

运行

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

界面和页面和数据未更新，但是data数据已经更新，页面和数据未同步

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }该钩子在服务器端渲染期间不被调用。

页面和data数据保持同步

 

销毁

beforeDestroy

vue实例到销毁阶段，实例上所以data和methods等都处于可用状态

 

destroyed

组件中所有数据都被销毁且不可用

{ {message}}

 

 

swiper

swiper中文网

如果你不想将Swiper文件放在你的项目中，你可以使用Swiper的CDN服务。

https://www.swiper.com.cn/cdn/index.html

需要用到的插件：

 

-----------------------------------------------------------------------------

通过NPM获取Swiper：$ npm install swiper

或者 npm install swiper --save

npm i [email protected]

拷贝swiper的css文件

banner.vue

script：

import Swiper from 'swiper';//模块化的使用

export default{

name:'bannner',

data:{},

mounted:()=>{var mySwiper = new Swiper.........}

}

style：

@import '../assets/css/swiper.min.css';

.swiper-container{.....................}

-----------------------------------------------------------------------------

 

Swiper4.x使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

通过NPM获取Swiper：$ npm install swiper

2.HTML内容。

Slide 1

Slide 2

Slide 3

//导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container { width: 600px; height: 300px; }

4.初始化Swiper：最好是挨着标签

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

或者这样（Jquery和Zepto）(推荐)

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

 

vue中使用swiper.1

创建一个vue对象，在created函数里初始化Swiper

。。。

let vm = new Vue({ el:"#app", data:{}, created:function () { var mySwiper = new Swiper ('.swiper-container', {loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }) } });

 

vue中使用swiper.2

从数据data中取图片，循环图片

let vm = new Vue({ el:"#app", data:{ imgs:['img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg'] }, mounted:function () { var mySwiper = new Swiper ('.swiper-container', { loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',} }) } });

 

vue中使用swiper.3

vue中使用swiper(用fetch请求)

let vm = new Vue({ el:"#app", data:{imgs:[]}, created:function(){ }, mounted:function () {//首次把数据挂载到模板上了 fetch('http://localhost:3000/imgs') .then((res)=>{ return res.json(); }) .then((imgs)=>{ this.imgs = imgs;//改变数据 console.log(this.imgs); }) }, updated:function(){//当数据发生改变，并且，数据已经挂载在DOM上了。 var mySwiper = new Swiper ('.swiper-container', { loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }) } });

 

 

单文件组件和单页面应用（SPA）

一、单文件组件

    一个文件里只写一个完整的组件，一个完整的组件就写在一个单独的文件里

二、单页面应用（SPA）：

SPA：single page application。

一个项目里只有一个页面（HTML页面）。Html文件纯粹是一个容器，放组件的容器。功能之间的切换，就靠组件之间的切换。

单页面应用的工作流程：

1、打开项目首页时，从后端请求html文件（容器），所有的组件代码（html，css和js）

2、当有跳转时，在浏览器端重新创建组件，如果在组件里有后端的数据，那就发fetch请求（axios请求）。

单页面应用的好处：

1、性能：首次慢一些，以后就快。