学习vue的第二天

Posted 2020-09-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习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>

以上是关于学习vue的第二天的主要内容，如果未能解决你的问题，请参考以下文章

学习python的第二天之函数

Java学习的第九天-mybatis学习的第二天：今天遇到了好两个错误，解决一天；

JAVA Web day02--- Android小白的第二天学习笔记

学习Vue第二天

python学习的第二天

学习python的第二天