之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue、vue-cli、vue-router、webpack等。
首先看下实现的效果:
源码下载戳这里:源码
1、使用vue-cli脚手架创建项目
vue init webpack tll
备注:使用webpack模板创建名为tll的项目,这里会按照提示输入一些项目基本配置,比如项目名称、版本号、描述、作者、是否启用eslint校验等等,不知道咋填的直接回车即可
2、根据提示启动项目
tll项目创建完成后,vue会自动提示几个命令运行,直接依次执行:
cd tll
npm i
npm run dev
这样,一个自动配置好的vue项目便运行起来了,包含热更新、自动校验等,当然这些配置在build文件夹下的webpack.base.conf.js里面,找到loader、preloader加载器,直接注释掉相应功能也行。比如我写代码时,配置了eslint后,稍微有个空格啥的
多余eslint都会报错导致整个项目无法运行,这时直接注掉preloader中和eslint相关的即可。
3、编写组件
在src的components目录下,创建home.vue组件,详细代码:
<!--首页组件--> <template> <div class="home"> <h3>{{msg}}</h3> </div> </template> <script> export default { name:"home", data(){ return { msg:"这里是home视图" } } } </script> <style scoped> h3{ background-color: #c5c5c5 } </style>
同样地,创建user.vue组件:
<template> <div> <h3>{{msg}},获取到的参数是:{{$route.params.id}}</h3> </div> </template> <script> export default{ name:"user", data(){ return { msg:"这里是user视图" } } } </script> <style scoped> h3{ background-color:gold } </style>
最后是product.vue组件:
<template> <div class="product"> <h3>{{msg}},获取到的参数是:{{$route.params.id}}</h3> </div> </template> <script> export default{ name:"product", data(){ return { msg:"这里是product视图" } } } </script> <style scoped> h3{ background-color:violet } </style>
4、修改app.vue,添加路由
<template> <div id="app"> <nav class="top-menu"> <ul> <!--遍历li,输出顶部工具栏--> <li v-for="item in menulist"> <router-link :to="item.url">{{item.name}}</router-link> </li> </ul> </nav> <hr> <div> <router-view></router-view> </div> </div> </template> <script> export default { name:"app", data:function (){ return { menulist:[ {"name":"首页",url:"/home"}, {"name":"用户",url:"/user/18"}, {"name":"产品",url:"/product/20"}, ] } } } </script> <style> #app { } .top-menu ul, .top-menu li { list-style: none; } .top-menu { overflow: hidden; } .top-menu li { float: left; width: 100px; } </style>
5、创建详细路由配置
在src根目录下直接新建文件router.js作为我们的自定义路由,详细代码:
import VueRouter from "vue-router" import Home from "./components/Home.vue" import User from "./components/User.vue" import Product from "./components/Product.vue" export default new VueRouter({ routes:[ {path:"/home",component:Home}, {path:"/user/:id",component:User}, {path:"/product/:id",component:Product} ] })
这下便创建了三个导航的匹配路由,最后只要再做一件事即可,那便是让路由生效:将router挂载到vue实例上。
6、挂载路由组件到vue实例
修改main.js文件如下:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' // 引入路由组件、自定义路由组件 import VueRouter from "vue-router" import router from "./router" //使用路由组件 Vue.use(VueRouter) /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App }, router:router })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <style> table thead tr th { text-align: center } </style> </head> <body> <div style="padding: 20px" id="app"> <div class="panel panel-primary"> <div class="panel-heading">用户管理</div> <table class="table table-bordered table-striped text-center"> <thead> <tr> <th>编号</th> <th>用户名</th> <th>年龄</th> <th>毕业院校</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="(row,index) in rows"> <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize"> <td>{{row.id}}</td> <td>{{row.name}}</td> <td>{{row.age}}</td> <td>{{row.school}}</td> <td>{{row.remark}}</td> <td> <a href="#" v-on:click="Edit(row)">编辑</a> <a href="#" v-on:click="Delete(row.id)">删除</a> </td> </tr> </template> <tr> <td> </td> <td> <input type="text" class="form-control" v-model="rowtemplate.name"> </td> <td> <input type="text" class="form-control" v-model="rowtemplate.age"> </td> <td> <select name="" class="form-control" id="" v-model="rowtemplate.school"> <option>中山小学</option> <option>复兴小学</option> <option>光明小学</option> </select> </td> <td> <input type="text" v-model="rowtemplate.remark" class="form-control"> </td> <td> <button type="button" class="btn btn-primary" @click="Save">保存</button> </td> </tr> </tbody> </table> </div> <nav style="float:right"> <ul class="pagination pagination-lg"> <template v-for="page in Math.ceil(rows.length/pagesize)"> <li @click="PrePage()" id="prepage" v-if="page == 1" class="disabled"><a href="#">上一页</a></li> <li v-if="page == 1" class="active" @click="NumPage(page,$event)"><a href="#">{{page}}</a></li> <li v-else @click="NumPage(page,$event)"><a href="#">{{page}}</a></li> <li id="nextpage" @click="NextPage()" v-if="page == Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li> </template> </ul> </nav> </div> </body> <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script> <script> var data = { rows: [{ id: 1, name: '小明', age: 18, school: '光明小学', remark: '三好学生' }, { id: 2, name: '小刚', age: 20, school: '复兴中学', remark: '优秀班*' }, { id: 3, name: '吉姆格林', age: 19, school: '光明小学', remark: '吉姆做了汽车公司经理' }, { id: 4, name: '李雷', age: 25, school: '复兴中学', remark: '不老实的家伙' }, { id: 5, name: '韩梅梅', age: 22, school: '光明小学', remark: '在一起' }, ], rowtemplate: { id: 0, name: '', age: '', school: '', remark: '' }, pagesize: 2, curpage: 1 }; var vue = new Vue({ el: "#app", data: data, methods: { PrePage: function (event) { jQuery(".pagination .active").prev().trigger("click"); }, NextPage: function (event) { jQuery(".pagination .active").next().trigger("click"); }, NumPage: function (num, event) { if (this.curpage == num) { return; } this.curpage = num; jQuery(".pagination li").removeClass("active"); if (event.target.tagName.toUpperCase() == "LI") { jQuery(event.target).addClass('active'); } else { jQuery(event.target).parent().addClass('active'); } if (this.curpage == 1) { jQuery('#prepage').addClass('disabled'); } else { jQuery('#prepage').removeClass('disabled'); } if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) { jQuery('#nextpage').addClass('disabled'); } else { jQuery('#nextpage').removeClass('disabled'); } }, Save: function (ev) { if (this.rowtemplate.id == 0) { this.rowtemplate.id = this.rows[this.rows.length - 1].id + 1;this.rows.push(this.rowtemplate); } //还原模板 this.rowtemplate = { id: 0, name: '', age: '', school: '', remark: '' }; }, Edit: function (row) { // v-model绑定的数据,是双向的,所以对rowtemplate的修改直接会修改row对象,继而会修改this.rows数据,所以对最后一行的修改直接会体现在被修改的行上面 this.rowtemplate = row; }, Delete: function (id) { for (var i = 0; i < this.rows.length; i++) { if (id == this.rows[i].id) { this.rows.splice(i, 1); break; } } } } }); </script> </html>