methods_methods中循环集合 - CSDN
精华内容
参与话题
  • methods的使用

    2019-11-04 20:18:52
    最近在学习Vue,感觉methods还是有必有总结一下的,看的米斯特吴的视频,讲的很精髓。下面是我对methods的理解。 methods是Vue对象中作为函数块的包装盒,methods中可以包含多个函数,函数也可以传参,同时在HTML...

    最近在学习Vue,感觉methods还是有必有总结一下的,看的米斯特吴的视频,讲的很精髓。下面是我对methods的理解。

    1. methods是Vue对象中作为函数块的包装盒,methods中可以包含多个函数,函数也可以传参,同时在HTML代码中可以直接使用,例如methods中有greet(time)函数,可以这样使用<p>{{greet('evening')}}</p>,这样就会自动执行函数gree(time),同时methods中的函数有返回值,返回的是对象,调用data()中的数据可以用this.变量名。
    2. return 字符串时可以用“+”拼接,例如 return "good night" + this.name; 但是不推荐使用,因为如果字符串过长容易出错,比较流行这种写法:
      . 在这里插入图片描述
    3. methods包含的函数块可以用这种方式来写greet: function () { return "good night" + this.name;},但是不推荐那样写,对于学过JS的人看起来很别扭,所以推荐这样写greet(time) { return "good night" + this.name; }
      代码示例:
      JS
    // 实例化vue对象
    new Vue({
        el: "#vue-app",//elment
        data() {
            return {
                name: "小哥哥",
                wechat: '2004343',
                website: 'https://www.baidu.com',
            }
        },
        methods: {
            // greet: function () {
            //     return "good night" + this.name;
            // }
            greet(time) {
                // return "good night" + this.name;
                return `Good ${time} ${this.name}`;
            },
            haveLunch() {
                return `吃过午饭了吗?`;
            }
        }
    });
    

    html

    <!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">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Vue CDN</title>
    </head>
    
    <body>
        <div id="vue-app">
            <h1>Data binding</h1>
            <h1>hello,{{name}}</h1>
            <p>你的微信是:{{wechat}}</p>
            <p>{{greet('evening')}}</p>
            <p>{{haveLunch()}}</p>
            <p>
                <a v-bind:href="website">baidu</a>
            </p>
          
            <p><input type="text" v-bind:value="name" /></p>
        </div>
    
    </body>
    
    <script src="app.js"></script>
    
    </html>
    

    运行结果:
    在这里插入图片描述

    展开全文
  • 【Vue原理】Methods - 源码版

    千次阅读 2019-06-28 09:23:15
    写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,...今天我们解读 methods 的源码,其实 methods 挺简单的,所以就不打算出白话版了,但...

    写文章不容易,点个赞呗兄弟
    专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
    研究基于 Vue版本 【2.5.17】

    如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

    【Vue原理】Methods - 源码版

    今天我们解读 methods 的源码,其实 methods 挺简单的,所以就不打算出白话版了,但是 methods 里面让我重新认识到这一个重要的知识点,是我是我,可能你们已经掌握了哈哈

    在这里插入图片描述



    methods 怎么使用实例访问?

    methods 简单到什么程度呢,估计你用脚都能想得到

    那么现在的问题怎么解答

    “遍历 methods 这个对象,然后逐个复制到 实例上?”

    没错,你猜对了,的确是逐个复制,简化源码是这么写的

    function initMethods(vm, methods) {    
        for (var key in methods) {
            vm[key] = 
                methods[key] == null ? 
                noop : 
                bind(methods[key], vm);
        }
    }
    


    methods 如何固定作用域的

    其实 methods 的固定作用域的唯一重点就是 bind 了,bind 相信大家也都用过

    bind 是固定函数作用域的,说实在的,之前我还真不太用 bind 这个东西,就知道可以绑定作用域,我觉得我会 call 和 apply 就行了,现在后悔了,发现用处太大了

    调用 bind 会 返回 绑定作用域的函数,而这个函数直接执行时,作用域就已经是固定了的

    不像 call 和 apply 这种一次性绑定作用域的 妖艳贱货不同,这个货一次绑定,终身受益啊

    Vue 使用了 bind 去绑定 methods 方法,显然是为了避免有些刁民会错误调用而报错,索性直接固定作用域,而且考虑到 bind 有的浏览器不支持

    于是写了一个兼容方法,意思大概是这样

    1、bind 函数需要传入作用域 context 和 函数 A

    2、然后 闭包保存 这个 context,返回一个新函数 B

    3、B 执行的时候,使用 call 方法 直接绑定 函数A 的作用域为 闭包保存的 context

    下面是 Vue bind 兼容的源码,我建议大家把这个方法保存下来,尤大的东西,还不瞬间保存??

    function polyfillBind(fn, ctx) {    
        function boundFn(a) {        
            var l = arguments.length;        
            return l ?
                (
                    l > 1 ?
                    fn.apply(ctx, arguments) :
                    fn.call(ctx, a)
                ):
                fn.call(ctx)
        }
        boundFn._length = fn.length;    
        return boundFn
    }
    
    function nativeBind(fn, ctx) {    
        return fn.bind(ctx)
    
    }
    
    var bind = Function.prototype.bind ?
        nativeBind :
        polyfillBind;
    

    Vue 使用 bind 之后,对我们有什么好处?

    我们调用 实例的方法,不再每次都使用 实例去调用了

    这样子,有什么好处呢,当多次调用方法的话,使用局部变量保存之后,直接访问局部变量可以减少作用域链的检索

    methods:{
        test(){},
        getName(){        
    
            // 本来是这样,多次使用实例调用
            this.test() 
            this.test()    
           
            // 现在局部变量保存,这是优化点
            var test = this.test
            test()
            test()
        }
    }
    

    bind 绑定作用域强到无法改变

    在这里插入图片描述

    举栗子

    function a(){    
        console.log(this)
    }
    
    var b={ name:1 }
    var c = a.bind(b)
    var d={
        c:c,    
        woqu:3434333
    }
    c()
    d.c()
    

    c 和 d.c 执行打印下面的结果
    在这里插入图片描述
    尽管使用 d 调用,作用域仍然是 b,简直不要太强啊

    讲到这里,methods 的精髓,就是 bind 了,很有用哦,这个东西,大家务必要记住
    在这里插入图片描述



    总结

    1、methods 会逐个复制到 实例上

    2、methods 方法会使用 bind 绑定实例作用域,确保作用域不被修改

    公众号

    展开全文
  • vue中的methods,watch和computer区别

    万次阅读 2019-07-17 18:29:25
    methods,watch和computed都是以函数为基础的,但各自却都不同。 一、作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依...

    https://www.jianshu.com/p/69c7318cd95f

    http://www.mamicode.com/info-detail-2482437.html

    methods,watch和computed都是以函数为基础的,但各自却都不同。

    一、作用机制上

    1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

    2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。

    二、从性质上

    1.methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)。

    2.computed计算属性,事实上和和data对象里的数据属性是同一类的(使用上)。

    3.watch:类似于监听机制+事件机制。

    例如:

    watch: {

       firstName: function(val) {this.fullName = val +this.lastName }

    }

    firstName的改变是这个特殊“事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法

    三、watch和computed的对比

    首先它们都是以Vue的依赖追踪机制为基础的,它们的共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。我们当然可以自己写代码完成这一切,但却很可能造成写法混乱,代码冗余的情况。

     

    但watch和computed也有明显不同的地方:

    watch和computed各自处理的数据关系场景不同

    1.watch擅长处理的场景:一个数据影响多个数据

    2.computed擅长处理的场景:一个数据受多个数据影响

    相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数

     

     

    在vue中处理复杂的逻辑的时候,我们经常使用计算属性computer,但是很多时候,我们会把计算属性、方法和侦听器搞混淆,在 w3cplus.com的一篇文章中是这样总结这三者的。

    • methods:正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件
    • computed:属性最初看起来像一个方法,但事实却又不是方法。在Vue中,我们使用data来跟踪对特定属性的更改,得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性,但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。
    • watchers:这些可以让你了解反应系统(Reactivity System)。我们提供了一些钩子来观察Vue存储的任何属性。如果我们想在每次发生变化时添加一些功能,或者响应某个特定的变化,我们可以观察一个属性并应用一些逻辑。这意味着观察者的名字必须与我们所观察到的相符。

    如果仅仅只是看这段话,可能还是不能很清除的明白三者的区别,我们可以通过相关的实例来对三者进行区分。

    computed

    计算属性是根据依赖关系进行缓存的计算,并且只在需要的时候进行更新。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <p>原数据{{message}}</p>
            <p>反转后的数据{{reversedMessage}}</p>
            <button @click="add()">补充货物1</button>
            <div>总价为:{{price}}</div>
        </div>
        <script>
            var demo = new Vue({
                  el: ‘#demo‘,
                  data: {
                    message :‘abcdefg‘,
                    package: {
                        count: 5,
                        price: 5
                    },
                  },
                  computed:{
                      reversedMessage:function(){
                          return this.message.split(‘‘).reverse().join(‘‘)
                      },
                    price: function(){
                         return this.package.count*this.package.price  
                     }
                },
                 methods: {   
                    add: function(){
                        this.package.count++
                    }
                }    
            })
        </script>    
    </body>
    </html>

    技术分享图片 技术分享图片

    上面的例子中展示了计算属性的两种用法:一个计算属性里面可以完成各种复杂的逻辑,最终返回一个结果;计算属性可以依赖多个vue实例的数据,只要其中一个任何一个数据发生变化,计算属性就会重新执行,视图也会更新。除此之外,计算属性还可以依赖其他计算属性和其他实例的数据。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app1">{{text}}</div>
        <div id="app2">{{ reverseText}}</div>
        <script>
            var app1 = new Vue({
               el: ‘#app1‘,
                 data: {
                      text: ‘computed‘
                }
            });
    
            var app2 = new Vue({
                el: ‘#app2‘,
                computed: {
                    reverseText: function(){
                        return app1.text.split(‘‘).reverse().join(‘‘);  
                    }
                }
            });
        </script>    
    </body>
    </html>

    技术分享图片

    methods

    在使用vue的时候,可能会用到很多的方法,它们可以将功能连接到事件的指令,甚至只是创建一个小的逻辑就像其他函数一样被重用。接下来我们用方法实现上面的字符串反转。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <p>原数据{{message}}</p>
            <p>反转后的数据{{ reversedMessage() }}</p>
        </div>
        <script>
            var demo = new Vue({
                  el: ‘#demo‘,
                  data: {
                    message :‘abcdefg‘,
                    num:5
                  },
                  methods:{
                    reversedMessage(){
                        return this.message.split(‘‘).reverse().join(‘‘)
                    },
                }
            })
        </script>    
    </body>
    </html>

    技术分享图片

    虽然使用计算属性和methods方法来实现反转,两种方法得到的结果是相同的,但本质是不一样的,计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值,这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性立即返回的是之前计算的结果,而不会再次执行计算函数,而对于methods方法,只要发生重新渲染,methods调用总会执行该函数。

    如果某个计算属性a需要的遍历一个极大的数组和做大量的计算,可以减小性能开销,如果不希望有缓存,则用methods。

    watch

    watch属性是一个对象,键是需要观察的表达式,值是对应回调函数,回调函数得到的参数为新值和旧值。值也可以是方法名,或者包含选项的对象。侦察器对于任何更新的东西都有用——无论是表单输入、异步更新还是动画。vue实例在实例化时调用$watch(),遍历watch对象的每一个属性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <button @click=‘a++‘>a加1</button>
            <p>{{message}}</p>
        </div>
        <script>
            var demo = new Vue({
                  el: ‘#demo‘,
                  data: {
                    message :‘‘,
                    a:1
                  },
                  
                  watch:{
                  a:function(val,oldval){
                    this.message = ‘a的旧值为‘ + oldval + ‘,新值为‘ + val;
                  }
                }
            })
        </script>    
    </body>
    </html>

    技术分享图片技术分享图片技术分享图片

     

    展开全文
  • 一、methods是什么? 首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印 .<template> <div> <button @click="buttry">测试</button> </div> </template>...

    一、methods是什么?

    首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印

    .<template>
      <div>
        <button @click="buttry">测试</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        buttry() {
          console.log(this);
        },
      },
    };
    </script>
    <style>
    </style>
    

    打印出来的结果表明:这个this是当前的单文件的组件实例,并可以拿到组件定义的成员,可以进行相关业务操作.

    在这里插入图片描述

    二、如果把方法写在data中会怎么样?

    .<template>
      <div>
        <button @click="buttry">测试</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          buttry() {
            console.log(this);
          },
        };
      },
      //   methods: {
      //       buttry() {
      //         console.log(this);
      //       },
      //   },
    };
    </script>
    <style>
    </style>
    

    得到的结果是null,是空值,代表无法取值,无法进行任何业务处理

    在这里插入图片描述

    总结:

    1.不同调用模式this指向不一样
    2.methodsdata等就类似家里的柜子,不用的柜子盛放不同的物品,就代表每个柜子的功能不一样,但地位相同。
    data:变量
    methods:自定义变量
    computed:计算属性
    watch:监听器
    directives:指令
    filters:过滤器
    3.只有methods里面才可以拿到组件,才可以进行业务处理

    展开全文
  • Methods

    2014-08-10 09:02:28
    //Method:类,结构体,枚举中定义的函数叫方法 /* method第一个参数可以时local的,后面的参数必须时external的, ...即在调用的时候必须在前面加上标签,当然第一个参数也可以自己加上external限制。...
  • Vue中computed和methods的区别

    万次阅读 多人点赞 2019-03-19 16:46:39
    Vue中computed和methods的区别computed详解computed和methods的区别 computed详解 computed可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。下面是一个简易的计算器,来实现乘法的操作 ...
  • 当调用test2时: methods = { test(age){ console.log('test', age); }, test2(){ console.log(this.methods); this.methods.test('222'); co...
  • 在vue中methods互相调用的方法

    万次阅读 2017-11-07 21:17:54
    this.$options.methods.delAllOrderList.bind(this)();
  • 1.第一种情况,有的测试类为空,只定义了一个类名,也就是类里面没有能运行的方法 2.第二种情况,测试类方法有错,或者没有添加注解。
  • 如果出现这个错误:Only no-arg methods may be annotated with @Scheduled说明你的方法不能有参数。
  • Spring异常:junit:no runnable methods 解决方法

    万次阅读 多人点赞 2018-08-04 18:02:34
     junit:no runnable methods 尝试解决方案: 1.导错了包:@Test时import的是@org.testng.annotations.Test 所以会报错  解决方法:改为import org.junit.Test;  2.忘记在方法前面加入@Test注解 ...
  • Vue:methods函数集中不能像原声JS中直接调用函数,踩坑半天差点爬不起。 1.首先在methods中定义一个函数, redierct(){ window.location.href="https://www.baidu.com/?tn=98012088_5_dg&amp;ch=12&...
  • disconnected no supported authentication methods available(server sent: publickey,keyboard interactive)解决方案 因为TortoiseGit和Git的冲突 我们需要把TortoiseGit设置改正如下。 1.找到Tortois
  • Ambiguous handler methods mapped for HTTP path

    万次阅读 2014-11-06 00:13:21
    java.lang.IllegalStateException: Ambiguous handler methods mapped for HTTP path '/getPrams': {public java.lang.String cn.ps.spring.controller.MainController.getJson(), public org.springframework.web.s
  • 如果用Putty登录linux的时候,提示no supported authentication methods available,可以  1.更改文件/etc/ssh/sshd_config试试,作如下更改:  PasswordAuthentication yes  2.重启服务器 具体操作...
  • 1.安装好小乌龟git后,用小乌龟的pull ...disconnected no supported authentication methods available(server sent: publickey)  或者是 git did not exit cleanly (exit code 1) 亦或者是 git did not exit
  • 该问题是由于ssh链接未允许远程密码认证导致的通过管理控制台进入系统,查看 /etc/ssh/sshd_config配置文件中是否包含以下配置 PasswordAuthentication no 通过vim编辑器将该参数改成yes,如下 ...
  • created 方法是在页面渲染时候调用的 ; method 中的方法是在页面渲染后调用的 ; 在父子页面的关系中 ,如果 子页面没有渲染 就不能 在父页面中调用子页面的method 中的方法
  • methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法; new Vue({ el: '#app', data: { test:111,...
  • sudo apt-get install apt-transport-https
1 2 3 4 5 ... 20
收藏数 514,061
精华内容 205,624
关键字:

methods