一：组件模板的创建
1.普通创建
1 new Vue({ 2 el:"#app", 3 components:{ 4 mytag:{ 5 template:"<h1>普通创建</h1>", 6 }, 7 }, 8 })
2.使用<template>标签创建
1 <template id="temp"> 2 <div> 3 名字:<input type="text" /> 4 密码:<input type="password" /> 5 <input type="button" value="提交" /> 6 </div> 7 </template> 8 9 <script> 10 new Vue({ 11 el:"#app", 12 components:{ 13 mytag:{ 14 template:"#temp", 15 }, 16 }, 17 }) 18 </script>
3.使用script创建
1 <!--script必须使用type="text/template--> 2 <script id="temp" type="text/template"> 3 <form action="" method="post"> 4 名字:<input type="text" /> 5 密码:<input type="password" /> 6 <input type="button" value="提交" @click="say"/> 7 </form> 8 </script>
4.注意组件中的数据必须是函数
1 语法: 2 "组件的名字":{ 3 template: "", 4 data : function(){ 5 return { 6 键1:值1, 7 键2:值2 8 } 9 } 10 }
二、路由
1.认识
路由就是根据浏览器的请求，映射到对应的组件当中去，由该组件响应请求，浏览器不会进行刷新。
2.引入路由的支持
1 <!--引入路由支持--> 2 <script src="vuejs/vue-router.js"></script>
3.路由的创建于使用
1 <div id="app"> 2 <p> 3 <!-- 4 router-link:路由标签（它就是一个a标签） 5 to="/foo":路径(连接到的地址) 6 --> 7 <router-link to="/main">首</router-link> 8 <router-link to="/singer">苏</router-link> 9 <router-link to="/hot">海</router-link> 10 </p> 11 <!-- 路由出口 否则不会跳转--> 12 <!-- 路由匹配到的组件将渲染在这里 --> 13 <router-view></router-view> 14 </div> 15 16 <script> 17 /*2. 定义路由 18 每个路由应该映射一个组件。 其中"component" 可以是 19 通过 Vue.extend() 创建的组件构造器， 20 或者，只是一个组件配置对象。*/ 21 var routes = [ 22 { 23 path: '/main', 24 component: { 25 template:"<h2>跳</h2>" 26 } 27 }, 28 { 29 path: '/singer', 30 component: { 31 template:"<h2>唱</h2>" 32 } 33 }, { 34 path: '/hot', 35 component: { 36 template:"<h2>热</h2>" 37 } 38 } 39 ] 40 41 //定义一个路由 42 var router = new VueRouter({ 43 routes // (缩写) 相当于 routes: routes 44 }) 45 46 new Vue({ 47 el:"#app", 48 router:router 49 }) 50 51 </script>
三、elementUI
Vue组件框架，基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。
资料下载网站：https://unpkg.com/[email protected]/lib/