一直在关注, vuejs这东西。 只是一直没有成形的应用。 在自已的dwz项目上有个别dialog页面上引入用了一下, 感受了一下数据推动的好处。 但是要完整应用, 始终不会。 最近有一个项目,是系统的一分支, 想多用这个技术。所以就想着看传统引入的方式, 路同, 组件这些在传统方式下怎么应用。
1. 简单的还是实现了 2. 所需要的vuejs css 都从网上download下来了。
index.html页面: ( 注意改一下里面的 vuejs引入相关的文件修改)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="robots" content="nofollow" /> <meta name="robots" content="noarchive" /> <title>{:C('COPYRIGHT')}</title> <!-- 引入样式 --> <link rel="stylesheet" href="__PUBLIC__/element-ui/index.css"> </head> <body scroll="no"> <h1>this is index page</h1> <div id="app"> <router-view name="top"></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> <test :param='this.param'></test> </div> </body> <!-- 先引入 Vue --> <script src="__PUBLIC__/element-ui/vue.js"></script> <include file="test" /> <script src="__PUBLIC__/element-ui/vue-router.js"></script> <!-- 引入组件库 --> <script src="__PUBLIC__/element-ui/index.js"></script> <include file="test" paramsss="eagle" title="ThinkPHP框架" keywords="开源WEB开发框架"/> <script> var topCom = Vue.extend({ template: '<div id="top">顶部</div>' }) var leftCom = Vue.extend({ template: '<div id="left"> <router-link to="/foo">侧边栏Go to Foo</router-link><br /> <router-link to="/bar">侧边栏Go to Bar</router-link> </div>' }) var foo=Vue.extend({ template:'<div>foo</div>' }) var bar=Vue.extend({ template:'<div>bar</div>' }) var mainCom = Vue.extend({ template: '<div id="main">主页 </div>' }) var router = new VueRouter({ routes:[ { path: '/', name: 'home', components:{ top: topCom, left: leftCom, main: mainCom } }, { path: '/foo', name: 'foo', components:{ top: topCom, left: leftCom, main: foo } },{ path: '/bar', name: 'bar', components:{ top: topCom, left: leftCom, main: bar } } ] }) var app = new Vue({ el: '#app', data:{ param: "this is vue components", }, router }) </script> <style> #top{height:50px; border:1px solid red; } #left{width:220px; height:"100%"; border:1px solid blue; float:left;} #main{float:left;height:"100%";width:"1000px;";border:1px solid gray;} </style> </html>
3. test.html 封装组件页面写法
<template id="test"> <div>{{this.name}} </div> </template> <script> Vue.component('test', { template: '#test', props: ['param'], data:function(){ return{ name:'这是一个组件'+this.param +"[paramsss] " + "[title]" + "[keywords]", } } }) </script>
4. 组件引用,用的是thinkphp <include file=”test” /> 这个一定要放到vuejs引入后面,才能生效