一: 组件模板的创建
1. 普通创建
- new vue({
- el:"#app",
- components:{
- mytag:{
- template:"<h1 > 普通创建 </h1>",
- },
- },
- })
2. 使用 < template > 标签创建
- <template id="temp">
- <div>
- 名字:<input type="text" />
- 密码:<input type="password" />
- <input type="button" value="提交" />
- </div>
- </template>
- <script>
- new Vue({
- el:"#app",
- components:{
- mytag:{
- template:"#temp",
- },
- },
- })
- </script>
3. 使用 script 创建
- <!--script 必须使用 type="text/template-->
- <script id="temp" type="text/template">
- <form action=""method="post">
- 名字:<input type="text" />
- 密码:<input type="password" />
- <input type="button" value="提交" @click="say"/>
- </form>
- </script>
4. 注意组件中的数据必须是函数
语法:
- "组件的名字":{
- template: "",
- data : function(){
- return {
键 1: 值 1,
键 2: 值 2
- }
- }
- }
二, 路由
1. 认识
路由就是根据浏览器的请求, 映射到对应的组件当中去, 由该组件响应请求, 浏览器不会进行刷新.
2. 引入路由的支持
- <!-- 引入路由支持 -->
- <script src="vuejs/vue-router.js"></script>
3. 路由的创建于使用
- <div id="app">
- <p>
- <!--
- router-link: 路由标签 (它就是一个 a 标签)
- to="/foo": 路径 (连接到的地址)
- -->
- <router-link to="/main"> 首 </router-link>
- <router-link to="/singer"> 苏 </router-link>
- <router-link to="/hot"> 海 </router-link>
- </p>
- <!-- 路由出口 否则不会跳转 -->
- <!-- 路由匹配到的组件将渲染在这里 -->
- <router-view></router-view>
- </div>
- <script>
- /*2. 定义路由
- 每个路由应该映射一个组件. 其中 "component" 可以是
- 通过 Vue.extend() 创建的组件构造器,
- 或者, 只是一个组件配置对象.*/
- var routes = [
- {
- path: '/main',
- component: {
- template:"<h2 > 跳 </h2>"
- }
- },
- {
- path: '/singer',
- component: {
- template:"<h2 > 唱 </h2>"
- }
- }, {
- path: '/hot',
- component: {
- template:"<h2 > 热 </h2>"
- }
- }
- ]
- // 定义一个路由
- var router = new VueRouter({
- routes // (缩写) 相当于 routes: routes
- })
- new Vue({
- el:"#app",
- router:router
- })
- </script>
三, elementUI
Vue 组件框架, 基于 Vue 2.0 的桌面端组件库, 类似于 easyui 一样, 提供了很多的 ui 组件.
资料下载网站: https://unpkg.com/[email protected]/lib/
来源: http://www.bubuko.com/infodetail-3009414.html