精华内容
下载资源
问答
  • 今天小编就为大家分享一篇对vue中methods互相调用的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中methods函数调用methods函数写法

    千次阅读 2018-09-07 20:34:00
    vue中methods函数调用methods函数写法 1 export default { 2 data() { 3 return { 4 hello:"你好" 5 } 6 }, 7 methods:{ 8 open(that) { 9 that.hello = "he...

    vue中methods函数调用methods函数写法

     1 export default {
     2   data() {
     3     return {
     4       hello:"你好"
     5     }
     6   },
     7   methods:{
     8     open(that) {
     9       that.hello = "hello world!"
    10     },
    11     close() {
    12       this.$options.methods.open(this)
    13     }
    14   }
    15 }

    close函数调用open函数,close函数里调用的open函数的参数this赋值给that,这样可以通过that调用到data中的hello。

    posted @ 2018-09-07 20:34 或许这就是生活 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • 当 原生js 和 vue中methods的方法不在同一个文件下,js要调用vue中methods的方法,操作如下: //.vue文件里的代码 export default { name: 'home', mixins: [mainMixin], data: function () { return {...}}, ...

    所谓的 外部js,可以是 .js文件,也可以是 .html文件; vue 中的 methods方法 也就是 .vue文件里的 methods属性下的方法.
    原生jsvue中methods的方法不在同一个文件下,js要调用vue中methods的方法,操作如下:

    //.vue文件里的代码
    
    export default {
      name: 'home',
      mixins: [mainMixin],
      data: function () {
      	return {...}},
      computed: {...},
      mounted(){...},
      methods: {
      	TestAA(){   //  要调用的方法
      		console.log('测试js调用vue中的methods方法 TestAA!!!')
      },
      created () {   // 在created ()里定义是为了确保vue组件加载完成后,再执行window 全局方法
        window.TestAA= this.TestAA  // 将vue中要被调用的方法定义成 window 全局方法
      },
    
    // .js 或 .html 文件的 <script>代码中
    
    function Hello(){  //  这里的方法是随便写的,其实可以在任意<script>代码中调用 TestAA 方法
    	TestAA()  // 上面设置好后,这里就可以直接调用了
    }
    
    展开全文
  • vue中methods中的方法闭包缓存问题问题背景需求描述在路由的导航栏中需要, 判断是否为第一次点击需要一个标志位来记录是否点击过现状:这个标志位只在一个函数中用过.不希望存放全局希望在这个methods中形成闭包, ...

    vue中methods中的方法闭包缓存问题

    问题背景

    需求描述

    在路由的导航栏中需要, 判断是否为第一次点击

    需要一个标志位来记录是否点击过

    现状:

    这个标志位只在一个函数中用过.不希望存放全局

    希望在这个methods中形成闭包, 用来缓存这个函数

    做出如下尝试后, 发现可以实现.

    当前问题:

    不能在闭包调用时找到正确的this.

    诡异点

    测试使用时: 返回的this找到了window

    // 测试使用:

    测试按钮

    var app = new Vue({

    el: '#app',

    methods: {

    test: (() => {

    `use strict`

    console.log(this) // Window

    var flag = true

    return () => {

    console.log(this) // Window

    flag = false

    }

    })()

    }

    })

    实际项目中的this变成了undefined

    更加诡异的是debugger之后, 我们一步步来看

    当前代码:

    pointJump: (() => {

    let isFirstChanged = false;

    console.log(this);

    debugger;

    return entry => {

    console.log(this);

    console.log(isFirstChanged);

    debugger;

    isFirstChanged = true;

    };

    })(),

    操作:

    刷新页面, 第一次函数立即执行

    页面生成完成后: 我们再次通过按钮触发事件: 此时debugger显示内存中为Vue的顶级对象, 而在控制台打印出来的依旧是undefined

    执行过程分析

    第一次执行的时候为undefined是正常的, 因为第一次闭包执行, 没有找到this

    当我们再次执行的时候, 虽然调用起来的上下文, 也就是this已经改了, 但是因为在作用域中那个this所代表的空间还是undefined, 所以没有能改变过来.

    就造成了我们所看到的诡异的现象.

    与测试文件有差别的原因

    因为在测试环境下, 没有能开启严格模式.

    经过两次不同位置的的开启尝试, 都不对

    依旧可以找到window对象

    现在推测是在vue内部进行的实现, 因为引入的vue版本不同.需要再进行测试, 看来源码还是要好好过一遍

    var app = new Vue({

    el: '#app',

    methods: {

    test: (() => {

    `use strict`

    console.log(this) // Window

    var flag = true

    return () => {

    console.log(this) // Window

    flag = false

    }

    })()

    }

    })

    最后找到原因的测试

    因为箭头函数的this是不会改变, 拥有根据父级能够返回的this

    然后因为上面的闭包环境中的this, 指向的一直都是undefined

    const test = (() => {

    let aaa = true;

    return function () {

    console.log(this);

    aaa = false;

    };

    })();

    mainJump(entry) {

    test.call(this);

    },

    解决方法

    形成闭包返回的函数中, 不要使用箭头函数, 使用function定义即可

    pointJump: (() => {

    let isFirstChanged = false;

    return function () {

    console.log(this); // Vue的顶级对象

    isFirstChanged = true;

    };

    })(),

    总结

    箭头函数不会被call, bind等方法改变this指向

    在闭包中返回函数, 缓存变量时, 使用function进行返回函数的定义.

    展开全文
  • 这篇文章主要介绍了关于如何解决vue中methods中的方法闭包缓存的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下vue中methods中的方法闭包缓存问题问题背景需求描述在路由的导航栏中需要, 判断...

    这篇文章主要介绍了关于如何解决vue中methods中的方法闭包缓存的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

    vue中methods中的方法闭包缓存问题

    问题背景

    需求描述在路由的导航栏中需要, 判断是否为第一次点击

    需要一个标志位来记录是否点击过

    现状:这个标志位只在一个函数中用过.不希望存放全局

    希望在这个methods中形成闭包, 用来缓存这个函数

    做出如下尝试后, 发现可以实现.

    当前问题:不能在闭包调用时找到正确的this.

    诡异点测试使用时: 返回的this找到了window// 测试使用:

    测试按钮

    var app = new Vue({

    el: '#app',

    methods: {

    test: (() => {

    `use strict`

    console.log(this) // Window

    var flag = true

    return () => {

    console.log(this) // Window

    flag = false

    }

    })()

    }

    })

    实际项目中的this变成了undefined

    更加诡异的是debugger之后, 我们一步步来看

    当前代码:pointJump: (() => {

    let isFirstChanged = false;

    console.log(this);

    debugger;

    return entry => {

    console.log(this);

    console.log(isFirstChanged);

    debugger;

    isFirstChanged = true;

    };

    })(),操作:刷新页面, 第一次函数立即执行

    页面生成完成后: 我们再次通过按钮触发事件: 此时debugger显示内存中为Vue的顶级对象, 而在控制台打印出来的依旧是undefined

    执行过程分析第一次执行的时候为undefined是正常的, 因为第一次闭包执行, 没有找到this

    当我们再次执行的时候, 虽然调用起来的上下文, 也就是this已经改了, 但是因为在作用域中那个this所代表的空间还是undefined, 所以没有能改变过来.

    就造成了我们所看到的诡异的现象.

    与测试文件有差别的原因因为在测试环境下, 没有能开启严格模式.

    经过两次不同位置的的开启尝试, 都不对

    依旧可以找到window对象

    现在推测是在vue内部进行的实现, 因为引入的vue版本不同.需要再进行测试, 看来源码还是要好好过一遍

    var app = new Vue({

    el: '#app',

    methods: {

    test: (() => {

    `use strict`

    console.log(this) // Window

    var flag = true

    return () => {

    console.log(this) // Window

    flag = false

    }

    })()

    }

    })

    最后找到原因的测试因为箭头函数的this是不会改变, 拥有根据父级能够返回的this

    然后因为上面的闭包环境中的this, 指向的一直都是undefinedconst test = (() => {

    let aaa = true;

    return function () {

    console.log(this);

    aaa = false;

    };

    })();

    mainJump(entry) {

    test.call(this);

    },

    解决方法形成闭包返回的函数中, 不要使用箭头函数, 使用function定义即可pointJump: (() => {

    let isFirstChanged = false;

    return function () {

    console.log(this); // Vue的顶级对象

    isFirstChanged = true;

    };

    })(),

    总结箭头函数不会被call, bind等方法改变this指向

    在闭包中返回函数, 缓存变量时, 使用function进行返回函数的定义.

    展开全文
  • vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望在这个methods中...
  • Vue methods,computed, watch 的区别 Methods methods 中都是封装好的函数,无论是否有变化只要触发就会执行 适用场景:组件功能的封装,逻辑处理 Computed computed: 是 vue 独有的特性计算属性,可以对 data ...
  • vue中methods互相调用的方法 转载于:https://www.cnblogs.com/macT/p/10212878.html
  • Vue 中methods,computed,watch的区别 methods methods中定义的都是具体的方法,根据一些触发条件,调用一次,重新执行一次。 比如说点击事件 <template> <div> <!-- 调用一次,执行一次 --> ...
  • vue中 methods watch computed的执行顺序 今天在做项目的时候,遇到一个问题,一直告诉我一个函数未定义。因为我是使用的计算属性(computed)给子组件传递的数据,于是我就写了一个demo测试了一下。 <div id=...
  • vue中methods、computed、watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓存} watch: { // watch 和 computed 区别: ...
  • Vue中methods和computed、watch的区别 demo1 <div id="app1"> <h2>mustache:{{firstName}} &nbsp; {{lastName}}</h2> <h2>mustache:{{firstName + " " + lastName}}</h2> <...
  • vue中methods、computed、watch的区别: methods方法定义的函数,可以主动调用各类数据和属性,但是methods没有主动监听和数据缓存的能力。 computed方法定义的函数,一般是计算某些数据或属性,并且是依赖其他...
  • vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就会自动执行。这个属性没有依赖缓存 二.computed 计算属性该属性里面的方法...
  • Vue中methods原理分析

    2020-09-12 11:55:33
    Vue考虑到不是所有的浏览器都支持bind。于是也实现了自己的polyfillBind function polyfillBind(fn, ctx) { return function boundFn(a) { const l = arguments.length; return l > 0 ? ( l > 1 ? fn....
  • Vue中methods相互调用

    千次阅读 2018-10-04 11:15:25
    2.onSubmit方法之,this.$options.methods必须在onSubmit方法下调用,不能放到 回调方法里面(//this.$options.methods.login();报错$options未定义) 3.valid命名不能和回调方法参数名称相同   methods: ...
  • methods中打印 <code>methods: { upOptions() { console.log(this.AnimatorChoices) //这里输出false onscroll = function () { let height = document.body.scrollTop || document.documentElement...
  • vue中事件,计算属性,帧听器,过滤器的区别 其实共同点:修改数据 事件methods和计算属性computed 作用:对数据进行逻辑运算 区别:计算属性是基于它们的响应式依赖进行缓存的,是依赖于data中的值改变而响应...
  • methodsmethods里面的方法调用几次就会执行几次 computed:第一次执行后,计算属性会进行缓存,只有当依赖的属性发生变化时,才会再执行
  • methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法; new Vue({ el: '#app', data: { test:111,...
  • 在new Vue的配置参数的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。 computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们...
  • 2、methodsmethods 将被混入到 Vue 实例。可以直接通过 VM 实例访问这些方法,或者在指令表达式使用。方法的 this 自动绑定为 Vue 实例。 3、watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动...
  • 可以将同一函数定义为一个methods方法,亦可以定义为一个computed计算属性,两种方式的最终结果是完全相同的。不同之处在于: 计算属性 computed 是基于它们的依赖缓存,只在相关响应式依赖发生改变时才会重新调用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,239
精华内容 2,095
关键字:

vue中methods

vue 订阅