\u95ee\u9898\uff1a
\n1.\u56e0\u4e3a\u524d\u6bb5\u65f6\u95f4\u5b66\u4e60vue\uff0c\u90fd\u662f\u5728\u4e00\u4e2aindex.html\u4e2d\u6dfb\u52a0<html>\u548c<script>
\n2.\u5982\u679c\u4f7f\u7528.vue\u6587\u4ef6\uff0c<template>\u5bf9\u5e94index.html<html>\u4f5c\u4e3a\u5c55\u793a\u5c42\uff0c<script>\u4f5c\u4e3a\u903b\u8f91\u5c42\u5bf9\u5e94index.html\u7684<script>
\nhtml\u4e2d\u7528\u7684\u662fnew vue\u3002\u800c.vue\u6587\u4ef6\u4e2d\u7528\u7684\u662fexport default\u3002\u4e0b\u9762\u662f\u5bf9\u6bd4<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n <title>vueapp01<\/title>\n <script src=\"https:\/\/cdn.staticfile.org\/vue\/2.4.2\/vue.min.js\"><\/script>\n<\/head>\n<style>\n .class1{\n background: #444;\n color: #eee;\n }\n<\/style>\n<body>\n <div id=\"app\"><\/div>\n <div id='example-3'>\n <input type=\"checkbox\" id=\"jack\" value=\"\u767d\u91d1\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"jack\">\u767d\u91d1\u4f1a\u5458<\/label>\n <input type=\"checkbox\" id=\"john\" value=\"\u9ec4\u91d1\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"john\">\u9ec4\u91d1\u4f1a\u5458<\/label>\n <input type=\"checkbox\" id=\"mike\" value=\"\u738b\u8005\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"mike\">\u738b\u8005\u4f1a\u5458<\/label>\n <br>\n <span>\u9009\u62e9\u4f1a\u5458\u79cd\u7c7b: {{ checkedNames }}<\/span>\n <\/div>\n <div id=\"app2\">\n <input v-model=\"username\" placeholder=\"\u7528\u6237\u540d\">\n <p>\u7528\u6237\u540d\u662f: {{ username }}<\/p>\n <input type=\"password\" v-model=\"password\" placeholder=\"\u5bc6\u7801\">\n <p>\u5bc6\u7801\u662f: {{ password }}<\/p>\n <button v-on:click=\"login\">\u767b\u5f55<\/button>\n <\/div>\n<\/body>\n<script type=\"text\/javascript\">\n var chenames=new Vue({\n el: '#example-3',\n data: {\n checkedNames: []\n }\n })\n var user=new Vue({\n el :'#app2',\n data: {\n username:'',\n password:''\n },\n methods :{\n login:function(event){\n alert('\u7528\u6237\u540d\u662f:'+this.username+',\u5bc6\u7801\u662f:'+this.password+'\uff0c\u9009\u62e9\u7684\u662f:'+chenames.checkedNames)\n }\n }\n })\n<\/script>\n<\/html><\/code><\/pre>\n\n- .vue\u6587\u4ef6<\/li>\n<\/ul>\n
<template>\n <div class=\"hello\">\n <h1>{{ msg }}<\/h1>\n <div id='example-3'>\n <input type=\"checkbox\" id=\"jack\" value=\"\u767d\u91d1\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"jack\">\u767d\u91d1\u4f1a\u5458<\/label>\n <input type=\"checkbox\" id=\"john\" value=\"\u9ec4\u91d1\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"john\">\u9ec4\u91d1\u4f1a\u5458<\/label>\n <input type=\"checkbox\" id=\"mike\" value=\"\u738b\u8005\u4f1a\u5458\" v-model=\"checkedNames\">\n <label for=\"mike\">\u738b\u8005\u4f1a\u5458<\/label>\n <br>\n <span>\u9009\u62e9\u4f1a\u5458\u79cd\u7c7b: {{ checkedNames }}<\/span>\n <\/div>\n <div id=\"app2\">\n <input v-model=\"username\" placeholder=\"\u7528\u6237\u540d\">\n <p>\u7528\u6237\u540d\u662f: {{ username }}<\/p>\n <input type=\"password\" v-model=\"password\" placeholder=\"\u5bc6\u7801\">\n <p>\u5bc6\u7801\u662f: {{ password }}<\/p>\n <button class=\"btn btn-large btn-primary\" v-on:click=\"login\">\u767b\u5f55<\/button>\n <\/div>\n <\/div>\n<\/template>\n<script>\nexport default {\n name: \"hello\",\n data() {\n return {\n msg: \"\u6b22\u8fce\u6765\u5230\u6d4b\u8bd5\u5f00\u53d1\u7b14\u8bb0\uff01\",\n checkedNames:[],\n username: \"\",\n password: \"\",\n };\n },\n methods:{\n login(){\n alert('\u7528\u6237\u540d\u662f:'+this.username+',\u5bc6\u7801\u662f:'+this.password+'\uff0c\u9009\u62e9\u7684\u662f:'+this.checkedNames)\n }\n }\n};\n<\/script>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u95ee\u9898\uff1a 1.\u56e0\u4e3a\u524d\u6bb5\u65f6\u95f4\u5b66\u4e60vue\uff0c\u90fd\u662f\u5728\u4e00\u4e2aindex.html\u4e2d\u6dfb\u52a0<html>\u548c<sc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-7"],"_links":{"self":[{"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=299"}],"version-history":[{"count":1,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":943,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=\/wp\/v2\/posts\/299\/revisions\/943"}],"wp:attachment":[{"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yinyubo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}