學習vue的次日

時間 2019-11-12

標籤學習 vue 次日简体版

原文原文鏈接

距離上次學習vue 已經很長時間了最近手頭上一直有點別的事 javascript

還有一個緣由是最近有點懶惰因此沒有學習自我批評一下今天抽空學習了一下Vue 主要是事件處理學的也不怎麼樣主要是爲了本身記錄一下html

下面是我今天學習的代碼嘿嘿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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。