学习vue的第二天

距离上次学习vue 已经很长时间了最近手头上一直有点别的事

还有一个原因是最近有点懒惰所以没有学习自我批评一下今天抽空学习了一下Vue 主要是事件处理学的也不怎么样主要是为了自己记录一下

下面是我今天学习的代码嘿嘿

<!DOCTYPE>
<html>
<head>
    <meta charset = "utf-8">
    <title>vue</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <!--
     利用了Vue的双向数据绑定
     v-on 是vue的指令 “：”后面的click 是指令的参数
     v-on：click  是监听click事件 
     v-on:click 还可以缩写 @click
-->
    <div id="example-1">
        <button v-on:click="counter += 1">增加 1</button>
        <p>这个按钮被点击了{{counter}}次</p>
    </div>
    <script type="text/javascript">
        var example1 = new Vue({
            el:"#example-1",
            data:{
                counter:0
            }
        })
    </script>
    <!--
        很多事件逻辑比较复杂 不能在像counter += 1  一样写在指令内 
        所以可以定一个方法名 像下面的greet
    -->
    <div id="example-2">
        <!--greet 是下面方法定义的方法名-->
        <button v-on:click="greet">Greet</button>
    </div>
    <script type="text/javascript">
        var example2 = new Vue({
            el:"#example-2",
            data:{
                name:"Vue.js"
            },
            methods:{
                greet:function(event){
                    alert('hello'+this.name+'!')
                    alert(event.target.tagName)
                }
            }
        })
        //也可用这种方式调用greet方法
        //example2.greet();
    </script>
    <!--内联绑定方法-->
    <div id="example-3">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('hello')">Say Hello</button>
    </div>
    <script type="text/javascript">
        var example3 = new Vue({
            el:"#example-3",
            methods:{
                say:function(message){
                    alert(message);
                }
            }
        })
    </script>
    <!-- 
        按键修饰符  监听键盘事件  这个很方便 可以做一些回车提交什么的 
        按键别名有：.enter .tab .delete .esc .space .up .down .left .right
        可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
        Vue.config.keyCodes.f1 = 112
    -->
    <div id = "example-4">
        <input  v-on:keyup.enter = "copy" placeholder="请输入" v-model="value" >
        <p style="color:red">{{value}}</p>
    </div>
    <!-- 通过键盘修饰符 响应方法copy 弹出 输入框输入的 值-->
    <script type="text/javascript">
        var example4 = new Vue({
            el:"#example-4",
            data:{
                value :"hello"
            },
            methods:{
                copy:function(){
                    alert(this.value);
                }
            }
        })
    </script>
</body>
</html>