{"id":1364,"date":"2019-10-10T15:45:22","date_gmt":"2019-10-10T07:45:22","guid":{"rendered":"http:\/\/www.iooe.cn\/?p=1364"},"modified":"2019-10-12T16:26:16","modified_gmt":"2019-10-12T08:26:16","slug":"vuejs-%e4%bc%a0%e7%bb%9f%e5%bc%80%e5%8f%91%e7%9b%b8%e5%85%b3%ef%bc%8c%e8%b7%af%e7%94%b1%ef%bc%8c%e7%bb%84%e4%bb%b6%e7%9b%b8%e5%85%b3%e7%9a%84%e5%ba%94%e7%94%a8%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.iooe.cn\/index.php\/2019\/10\/10\/vuejs-%e4%bc%a0%e7%bb%9f%e5%bc%80%e5%8f%91%e7%9b%b8%e5%85%b3%ef%bc%8c%e8%b7%af%e7%94%b1%ef%bc%8c%e7%bb%84%e4%bb%b6%e7%9b%b8%e5%85%b3%e7%9a%84%e5%ba%94%e7%94%a8%e6%96%b9%e6%b3%95\/","title":{"rendered":"vuejs \u4f20\u7edf\u5f00\u53d1\u76f8\u5173\uff0c\u8def\u7531\uff0c\u7ec4\u4ef6\u76f8\u5173\u7684\u5e94\u7528\u65b9\u6cd5"},"content":{"rendered":"

\u4e00\u76f4\u5728\u5173\u6ce8\uff0c vuejs\u8fd9\u4e1c\u897f\u3002 \u53ea\u662f\u4e00\u76f4\u6ca1\u6709\u6210\u5f62\u7684\u5e94\u7528\u3002 \u5728\u81ea\u5df2\u7684dwz\u9879\u76ee\u4e0a\u6709\u4e2a\u522bdialog\u9875\u9762\u4e0a\u5f15\u5165\u7528\u4e86\u4e00\u4e0b\uff0c \u611f\u53d7\u4e86\u4e00\u4e0b\u6570\u636e\u63a8\u52a8\u7684\u597d\u5904\u3002 \u4f46\u662f\u8981\u5b8c\u6574\u5e94\u7528\uff0c \u59cb\u7ec8\u4e0d\u4f1a\u3002 \u6700\u8fd1\u6709\u4e00\u4e2a\u9879\u76ee\uff0c\u662f\u7cfb\u7edf\u7684\u4e00\u5206\u652f\uff0c \u60f3\u591a\u7528\u8fd9\u4e2a\u6280\u672f\u3002\u6240\u4ee5\u5c31\u60f3\u7740\u770b\u4f20\u7edf\u5f15\u5165\u7684\u65b9\u5f0f\uff0c \u8def\u540c\uff0c \u7ec4\u4ef6\u8fd9\u4e9b\u5728\u4f20\u7edf\u65b9\u5f0f\u4e0b\u600e\u4e48\u5e94\u7528\u3002
\n1. \u7b80\u5355\u7684\u8fd8\u662f\u5b9e\u73b0\u4e86\"\"<\/a> 2. \u6240\u9700\u8981\u7684vuejs \u00a0css \u00a0\u90fd\u4ece\u7f51\u4e0adownload\u4e0b\u6765\u4e86\u3002
\nindex.html\u9875\u9762:\u00a0 ( \u6ce8\u610f\u6539\u4e00\u4e0b\u91cc\u9762\u7684 vuejs\u5f15\u5165\u76f8\u5173\u7684\u6587\u4ef6\u4fee\u6539\uff09<\/p>\n

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n<meta name=\"robots\" content=\"nofollow\" \/>\r\n<meta name=\"robots\" content=\"noarchive\" \/>\r\n<title>{:C('COPYRIGHT')}<\/title> \r\n<!-- \u5f15\u5165\u6837\u5f0f -->\r\n<link rel=\"stylesheet\" href=\"__PUBLIC__\/element-ui\/index.css\">\r\n<\/head>\r\n<body scroll=\"no\">\r\n\r\n \t<h1>this is index page<\/h1>\r\n\t<div id=\"app\">\r\n\r\n  \t\t<router-view name=\"top\"><\/router-view>\r\n \t\t<router-view name=\"left\"><\/router-view>\r\n \t\t<router-view name=\"main\"><\/router-view>\r\n \t\t<test :param='this.param'><\/test>\r\n    <\/div>\r\n\r\n<\/body>\r\n<!-- \u5148\u5f15\u5165 Vue -->\r\n\r\n<script src=\"__PUBLIC__\/element-ui\/vue.js\"><\/script>\r\n<include file=\"test\" \/>\r\n<script src=\"__PUBLIC__\/element-ui\/vue-router.js\"><\/script>\r\n<!-- \u5f15\u5165\u7ec4\u4ef6\u5e93 -->\r\n<script src=\"__PUBLIC__\/element-ui\/index.js\"><\/script>\r\n<include file=\"test\" paramsss=\"eagle\"  title=\"ThinkPHP\u6846\u67b6\" keywords=\"\u5f00\u6e90WEB\u5f00\u53d1\u6846\u67b6\"\/>\r\n<script>\r\n\r\n    var topCom = Vue.extend({\r\n        template: '<div id=\"top\">\u9876\u90e8<\/div>'\r\n    })\r\n\r\n    var leftCom = Vue.extend({\r\n        template: '<div  id=\"left\">\r\n        \t<router-link to=\"\/foo\">\u4fa7\u8fb9\u680fGo to Foo<\/router-link><br \/>\r\n\t\t\t<router-link to=\"\/bar\">\u4fa7\u8fb9\u680fGo to Bar<\/router-link>\r\n        <\/div>'\r\n    })\r\n    \r\n    var foo=Vue.extend({\r\n\t    template:'<div>foo<\/div>'\r\n    })\r\n\t\r\n\tvar bar=Vue.extend({\r\n\t    template:'<div>bar<\/div>'\r\n    })\r\n    \r\n    var mainCom = Vue.extend({\r\n        template: '<div  id=\"main\">\u4e3b\u9875 <\/div>'\r\n    })\r\n\r\n    var router = new VueRouter({\r\n        routes:[\r\n\t        {\r\n                path: '\/',\r\n                name: 'home',\r\n                components:{\r\n                    top: topCom,\r\n                    left: leftCom,\r\n                    main: mainCom\r\n                }\r\n            },\r\n             {\r\n                path: '\/foo',\r\n                name: 'foo',\r\n                components:{\r\n                    top: topCom,\r\n                    left: leftCom,\r\n                    main: foo\r\n\r\n                  }\r\n\r\n\t\t\t},{\r\n                path: '\/bar',\r\n                name: 'bar',\r\n                components:{\r\n                    top: topCom,\r\n                    left: leftCom,\r\n                    main: bar\r\n\r\n                 }\r\n\r\n\t\t\t}\r\n        ]\r\n    })\r\n\r\n    var app = new Vue({\r\n        el: '#app',\r\n        data:{\r\n\t      param: \"this is vue components\",  \r\n        },\r\n        router\r\n    })\r\n<\/script>\r\n\r\n<style>\r\n\t#top{height:50px; border:1px solid red; }\r\n\t#left{width:220px; height:\"100%\"; border:1px solid blue; float:left;}\r\n\t#main{float:left;height:\"100%\";width:\"1000px;\";border:1px solid gray;}\r\n<\/style>\r\n<\/html>\r\n\r\n<\/pre>\n
3. test.html \u5c01\u88c5\u7ec4\u4ef6\u9875\u9762\u5199\u6cd5<\/p>\n
 \r\n<template id=\"test\">\r\n    <div>{{this.name}} <\/div>\r\n<\/template> \r\n<script>\r\n    Vue.component('test', {\r\n        template: '#test',\r\n         props: ['param'],\r\n         data:function(){\r\n            return{\r\n                name:'\u8fd9\u662f\u4e00\u4e2a\u7ec4\u4ef6'+this.param +\"[paramsss] \" + \"[title]\" + \"[keywords]\",\r\n            }\r\n        }\r\n    })\r\n<\/script>\r\n<\/pre>\n
 <\/p>\n
4. \u7ec4\u4ef6\u5f15\u7528\uff0c\u7528\u7684\u662fthinkphp \u00a0 \u00a0<include file=”test” \/> \u00a0 \u8fd9\u4e2a\u4e00\u5b9a\u8981\u653e\u5230vuejs\u5f15\u5165\u540e\u9762\uff0c\u624d\u80fd\u751f\u6548<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e00\u76f4\u5728\u5173\u6ce8\uff0c vuejs\u8fd9\u4e1c\u897f\u3002 \u53ea\u662f\u4e00\u76f4\u6ca1\u6709\u6210\u5f62\u7684\u5e94\u7528\u3002 \u5728\u81ea\u5df2\u7684dwz\u9879\u76ee\u4e0a\u6709\u4e2a\u522bdialog\u9875\u9762\u4e0a\u5f15\u5165\u7528\u4e86\u4e00\u4e0b\uff0c \u611f\u53d7\u4e86\u4e00\u4e0b\u6570\u636e\u63a8\u52a8\u7684\u597d\u5904\u3002 \u4f46\u662f\u8981\u5b8c\u6574\u5e94… <\/p>\n
 \u9605\u8bfb\u66f4\u591a… <\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/1364"}],"collection":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1364"}],"version-history":[{"count":21,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/1364\/revisions"}],"predecessor-version":[{"id":1443,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/1364\/revisions\/1443"}],"wp:attachment":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}