day02 Vue方法的构建和调用

1.1在methods属性中构建函数方法

Vue中的methods属性是一个对象,跟前一天内中的data同级,用于存储各种方法

示例代码1
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue方法学习</title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
       <div id="app">
           <h2>{{greeting()}}</h2>
           <h2>{{message}}</h2>
       </div>
       <script>
           var app = new Vue({
               el: '#app',
               data: {
                   message: 'Hello Vue!'
               },
               methods:{
                   greeting:function(){
                       return 'Good Morning!';
                   }
               }
           })
       </script>
   </body>
</html>

greeting是methods中的一个函数方法,可以使用{{方法名()}}进行输出,也可以构建在括号里加入参数来实现方法内容的可变性

#####示例2
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue方法学习</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>{{greeting('Afternoon')}}</h2>
            <h2>{{message}}</h2>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                },
                methods: {
                    greeting: function(time) {
                        return 'Good ' + time + '!';
                    }
                }
            })
        </script>
    </body>
</html>

1.2使用v-on指令调用方法

示例3
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-model数据双向绑定练习</title>
        <!--通过cdn引入Vue.js  -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>
        <!-- Vue-app的根容器 -->
        <div id="app">
            <button type="button" v-on:click="handleClick">点我</button>
        </div>
        <script type="text/javascript">
            //实例化一个Vue对象
            var app = new Vue({
                el: '#app',
                data:{
                    name:'1721',
                },
                methods:{
                    handleClick:function(){
                        alert(this.name)
                    }
                }
            })
        </script>
    </body>
</html>

方法中若想使用data中属性,可直接this.对象名,如示例中的this.name
指令v-on:click可简写为@click

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,427评论 0 11
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0 25
  • 孩子天生都是爱学习的,那么是什么原因让孩子不爱学习了呢?如何让孩子爱上学习呢 微课笔记:1.如果在学习的过程中,时...
    未来的美好1111111阅读 230评论 0 0
  • 孟秋是村里唯一一个会唱清曲的人。 没有词的吟唱让人听着多少觉得有点凄凉,就好像是一次次无法言语的生离死...
    Mr束阅读 533评论 0 0