(简)vue的methods（方法）+watch（监听属性）

methods（方法）

基本用法

1.监听一个按钮的点击事件，设值一个计数器，每次点击都加1：

	<div id="app">
        <h1>点击次数：{{counter}}</h1>
        <button @click="counter++">+1</button>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            counter:0
        },
        methods: {
            
        },
    })
    </script>

运行结果：

2.@click的表达式可以直接使用JavaScript语句，也可是一个在Vue实例中methods选项内的函数名，比如对上例进行扩展，在增加一个按钮，点击一次，计算器加10：

	<div id="app">
        <h1>点击次数：{{counter}}</h1>
        <button @click="counter++">+1</button>
        <button @click="handleAdd(10)">+10</button>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            counter:0
        },
        methods: {
            handleAdd:function(count){
                count=count||1;
                this.counter+=count;
            }
        },
    })
    </script>

运行结果：

在methods中定义了我们需要的方法供@click调用，许注意，@click调用方法后可不跟括号‘（）’。

methods中的$event参数

Vue提供了一个特殊变量$event,用于访问原生DOM事件，例如下面的实例可以组装链接打开：

<div id="app">
        <div><a href="https://blog.csdn.net/Minniye" @click="handleClick('禁止打开',$event)">打开链接</a></div>
    </div>
    <script>
    new Vue({
        el:'#app',
        methods: {
            handleClick:function(message,event){
                event.preventDefault();
                window.alert(message);
            }
        },
    })
    </script>

运行结果：

watch（监听属性）

监听数据实例：

<div id="app">
        <h1>{{msg}}</h1>
        <h1>{{msgData}}</h1>
        <input type="text" v-model='msg'>
    </div>
    <script>
    new Vue({
        el:'#app',
        data: {
            msg:'abc',
            msgData:''
        },
        watch:{
            msg:function(val){
                this.msgData=val;
            }
        }
    })
    </script>

运行结果：