首页 > 代码库 > 学习vue的第二天

学习vue的第二天

2024-09-05 06:15:38   215人阅读

距离上次学习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>

 

学习vue的第二天


联系
我们