vue.js基础__ mixins 选项

mixins 选项主要应用于新增需求;

在不改变原有方法的基础上,使用mixins 混入选项;

- 以点击加1为例,分为局部和全局两种

- 再混入选项中设置updated方法

- updated 方法,会在局部,全局,以及原生方法中设置

- 执行顺序为 全局的updated优先执行,然后局部的updated方法执行,最后原生的updated方法执行

代码示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>mixins option</title>

<script src="../assets/js/vue.js"></script>

</head>

<body>

<h1>mixins option</h1>

<hr>

<div id="app">

{{num}}

<p><button @click="add">add</button></p>

</div>

<script>

var addConsole = {

updated() {

console.log(`数据改变为` + this.num);

}

}

Vue.mixin({

updated () {

console.log(‘我是全局updated‘);

}

})

var app = new Vue({

el: ‘#app‘,

data: {

num: 1

},

methods: {

add() {

this.num++

}

},

updated () {

console.log(‘我是原生的updated‘);

},

mixins: [addConsole]

})

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/sunyang-001/p/11104910.html

时间: 2024-11-05 17:20:38

vue.js基础__ mixins 选项的相关文章

vue.js基础__ watch 选项

watch 选项主要用于数据监控,有两种书写方式: 一种是写在构造器内部,另一种是在构造器外部使用 下面以监控天气为例,代码如下: - 每次加减5°C,在watch内部做 if 判断 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

vue.js基础__ extend 扩展选项

extend 扩展选项需要在构造器外部进行定义,并使用updated方法: 在构造器中使用 extend 方法以对象的形式调用, 方法的执行顺序为:原生的methods方法优先执行,然后是扩展的updated方法,最后执行的是原生的updated方法 差值使用{{ }}进行插入,在构造器中设置delimiters:['${','}'],则可以使用${}进行插值 代码示例如下: <!DOCTYPE html> <html lang="en"> <head&g

Vue.js 基础部分

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.6 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自

vue.js基础知识篇(8):与服务端通信

vue.js可以构建一个完全不依赖后端服务的应用APP,同时也可以与服务端进行数据交互来同步界面的动态更新.vue-resource实现了基于AJAX.JSONP等技术的服务端通信. 第十三章:与服务端通信 1.安装和配置vue-resource 安装方法:使用script标签引入. (1)参数配置.分为全局配置.组件实例配置和调用配置3部分,其优先级依次增高. 第一,全局配置. (2)headers配置 XXX 2.基本HTTP调用 (1)底层方法 (2)便捷方法 (3)请求选项对象 (4)r

简单易懂的 Vue.js 基础知识 !

根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <!-- 这是我们的 View --> <div id="app"> Hello {{ name }}! </div> // 这是我们的 Model var model = { name: 'Vue.js' } // 创建一个 Vue 实例或 "viewModel" //

vue.js基础(继)

今日,将简单地Vue.js指令形成了一个串联使用.Vue.js就是这样,是渐进式的,何为渐进式?简单的指令看起来分厂简单,浅显易懂,但是将指令进行综合,自定义事件,原生事件,子父通信,父子通信,创建实例,创建组件,注册组件,数据定义等等进行融合使用时候缺愈发的复杂.进行项目的书写.模拟.测试.以及UI库的综合使用,布局 UI库使用,通过数据控制功能,看似简单的步骤,实现起来对于初学者来讲,仍难侍候很大难度的.一定要多学多练,多练,在多练.形成自己的编程思想,编程思想非常重要. 新知识补充了VDO