{"id":519,"date":"2020-02-26T20:48:44","date_gmt":"2020-02-26T12:48:44","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=519"},"modified":"2020-02-26T20:48:44","modified_gmt":"2020-02-26T12:48:44","slug":"vue-%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/26\/vue-%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8\/","title":{"rendered":"Vue-\u4e8b\u4ef6\u5904\u7406\u5668"},"content":{"rendered":"
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\" >\n        <p>{{count}}<\/p>\n\n        <button @click=\"handleAdd1()\">add1<\/button>\n        <button @click=\"handleAdd2\">add2<\/button>\n        <button @click=\"count++\">add3<\/button>\n        \n\n        <ul v-for=\"n in 5\">\n            <li @click=\"handleClick\">\n                {{n}}\n            <\/li>\n        <\/ul>\n\n        <!-- <input type=\"text\" @input=\"handleInput\"\/> -->\n        <input type=\"text\" @input=\"handleInput($event)\" @keyup.65=\"handleKeyUp\"\/>\n     <!--    change \u5185\u5bb9\u6539\u53d8\u5931\u53bb\u7126\u70b9 \u6267\u884c\n        input  \u8f93\u5165value \u5f15\u53d1\u5185\u5bb9\u6539\u53d8\uff0c\u6267\u884c\n -->\n        <button>add<\/button>\n\n\n        <ul @click.self=\"handleUlClick()\">\n            <!-- .self\u662f\u4e8b\u4ef6\u6e90 \u662f\u81ea\u5df1\u4f1a\u89e6\u53d1 -->\n            <li @click.stop=\"handleLiClick1()\">\u4e8b\u4ef6\u5192\u6ce1-11<\/li>\n            <li><a href=\"http:\/\/www.baidu.com\" @click.prevent.stop=\"handleHrefClick()\">click<\/a>\n                <!-- .prevent \u662f\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a  .stop \u963b\u6b62\u5192\u6ce1 -->\n            <\/li>\n                <!-- <li @click=\"isFirst && handleLiClick1()\">333<\/li> -->\n            <li @click.once=\"handleLiClick1()\">333<\/li>\n            <!-- .once \u53ea\u4f1a\u89e6\u53d1\u4e00\u6b21 -->\n        <\/ul>\n    <\/div>\n\n\n    <script type=\"text\/javascript\">\n        \/\/\u81ea\u5b9a\u4e49\u6309\u952e\u4fee\u9970\u7b26\n        \n    \t\n        var vm= new Vue({\n            el:\"#box\",\n            data:{\n                count:0,\n                mytext:\"\",\n                isFirst:true\n            },\n\n            methods:{\n                handleLiClick1(){\n                    this.isFirst = false;\n                    console.log(\"handleLiClick1\");\n                },\n                handleUlClick(){\n                    console.log(\"handleUlClick\");\n                },\n\n                handleHrefClick(){\n                    console.log(\"handleHrefClick\")\n                },\n\n                handleKeyUp(ev){\n                    console.log(ev.keyCode,\"\u53ea\u6709\u6309\u4e0b\u56de\u8f66\u952e\u624d\u4f1a\u89e6\u53d1\u4e00\u6b21\u7684\u4e8b\u4ef6\")\n                },\n\n\n                handleAdd1(){\n                    this.count++;\n                },\n                handleAdd2(){\n                    this.count++;\n                },\n                handleClick(ev){\n                    console.log(ev.target);\n                },\n                handleInput(ev){\n                    console.log(ev.target.value);\n                    this.mytext= ev.target.value;\n                }\n            }\n        })\n    <\/script>\n\n\n    <script>\n        \n        \/\/ \u6355\u83b7\u9636\u6bb5-> \u5904\u4e8e\u76ee\u6807\u9636\u6bb5 -> \u5192\u6ce1\u9636\u6bb5\n        \/\/ obox.addEventListener(\"click\",function(){\n\n        \/\/ },true)\n\n        \/\/ .stop\n        \/\/ .prevent\n        \/\/ .capture\n        \/\/ .self\n        \/\/ .once\n        \/\/ .passive\n\n\n        \/\/ obox.addEventListener('click',function(){\n\n        \/\/ },true);\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset= …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/519"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=519"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/519\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}