Vue.js2.0开发环境搭建(二)
转载自 Vue.js 2.0从入门到放弃---入门实例(二)
前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实例,通过实例来跟大家分享,想必更容易理解。
先来看一下,看完这篇博客,你会做出什么样的效果吧。
就是这样的一个小的demo,其中主要用到了vue-router 2.0 和vue的单文件组件,这里再细分一下如下
- vue-router 2.0 定义路由配置
- router-view 和 router-link 来控制路由
- transition 控制页面之间的跳转动画
- .vue后缀名的单文件组件
- 简单的ES6语法
修改项目目录结构
先来看一下项目的机构,我在原项目目录结构上稍作调整,让目录结构更清晰一些。如下图
在 src 目录下,删除 App.vue ,增加 pages 文件夹,该文件夹用来用来放置我们创建的“页面”(比如,Home.vue)。其实,这里说的“页面”也是组件,只是它变现为一个“页面”而已,跟components 目录下的组件没有本质的区别,我们分开目录放置主要是更语义化,结构更清晰易懂。
可能有的刚接触的同学还不太了解组件(.vue后缀结尾的文件),不要着急,接着往下看。
.vue后缀名的单文件组件
template
style
script
vue-router 2.0
安装vue-router 2.0
router-view
router-link
<!-- index.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>first-vue</title><style type="text/css">* { margin: 0; padding: 0; }html,body { background: #eee; }ul,li { list-style: none; }a { text-decoration: none; }img { vertical-align: middle; }/* 跳转页面动画 */.slide-enter,.slide_back-enter {position: absolute;width: 100%;}.slide-leave,.slide_back-leave {position: absolute;width: 100%;}.slide-enter-active,.slide_back-enter-active {transition: all 0.3s linear;}.slide-leave-active {position: absolute;transition: all 0.3s linear;transform: translate(-100%);}.slide-enter{transform: translateX(100%);}.slide_back-leave-active {position: absolute;transition: all 0.3s linear;transform: translate(100%);}.slide_back-enter {transform: translateX(-100%);}</style></head><body><div id="app"><transition :name="transitionName"><router-view></router-view></transition></div><script type="text/javascript">// 计算html的font-size(function(){function resizeBaseFontSize(){var rootHtml = document.documentElement,deviceWidth = rootHtml.clientWidth;if(deviceWidth > 640){deviceWidth = 640;}rootHtml.style.fontSize = deviceWidth / 7.5 + "px";}resizeBaseFontSize();window.addEventListener("resize", resizeBaseFontSize, false);window.addEventListener("orientationchange", resizeBaseFontSize, false);})();</script></body>
</html>
其中 transition组件是用来控制页面切换的动画用的,transitionName绑定到的是main.js中的data中的transitionName字段。
// main.js// 导入Vue,这个是必需的,在使用Vue之前,必须先导入
import Vue from 'vue'// 导入 vue-router,并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)// 导入 pages 下的 Home.vue
import Home from './pages/Home'
import Detail from './pages/Detail'// 定义路由配置
const routes = [{path: '/',component: Home},{path: '/detail',component: Detail}
]// 创建路由实例
const router = new VueRouter({routes
})// 创建 Vue 实例
new Vue({el: '#app',data(){return {transitionName: 'slide'}},router, // 在vue实例配置中,用routerwatch: {// 监视路由,参数为要目标路由和当前页面的路由'$route' (to, from){const toDepth = to.path.substring(0, to.path.length-2).split('/').length// 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'// 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥// 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教const fromDepth = from.path.substring(0, from.path.length-2).split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'// 根据路由深度,来判断是该从右侧进入还是该从左侧进入}}
})
<!-- HomeHeader.vue -->
<template><header class="header"><div class="header_inner"><div class="header_cont">主页</div></div></header>
</template><style>.header {height: 0.88rem;}.header_inner {position: fixed;top: 0;left: 0;right: 0;z-index: 99;max-width: 640px;height: 0.88rem;box-sizing: border-box;margin: 0 auto;padding: 0 0.24rem;border-bottom: 0.02rem solid #80ccd6;background-color: #fff;}.header_cont {text-align: center;padding: 0 0.4rem;line-height: 0.86rem;font-size: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>
<!-- List.vue -->
<template><li class="sec_li"><router-link to="/detail" class="lp_li_a"><div class="lp_li_imgWrap"><img src="../assets/img/lp_01.jpg" alt=""></div><p class="lp_li_name">{{ title }}</p><p class="lp_li_price">¥{{ price }}元</p></router-link></li>
</template><style scoped>.sec_li {float: left;width: 50%;margin-bottom: 0.1rem;}.lp_li_a {display: block;padding: 0.3rem 0;margin: 0 0.05rem;text-align: center;background: #fff;}.lp_li_imgWrap {padding: 0.24rem 0;}.lp_li_imgWrap > img {width: auto;height: 2.3rem;}.lp_li_name {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #333;}.lp_li_price {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #fb3b3b;}
</style>
<script>export default {props: ['price', 'title']}
</script>
<!-- DetailHeader.vue -->
<template><header class="header"><div class="header_inner flexWrap"><div id="header_btn_nav" class="header_btn header_btn_back"v-on:click="goBack">返回</div><div class="header_cont flex">详情</div><div class="header_btn header_btn_cart"></div></div></header>
</template><style>.flexWrap {display: -webkit-flex;display: flex;}.flex {flex: 1;}.header {height: 0.88rem;}.header_inner {position: fixed;top: 0;left: 0;right: 0;z-index: 99;max-width: 640px;height: 0.88rem;box-sizing: border-box;margin: 0 auto;padding: 0 0.24rem;border-bottom: 0.02rem solid #80ccd6;background-color: #fff;}.header_btn {width: 0.5rem;height: 100%;background-repeat: no-repeat;}.header_btn_back {line-height: 0.86rem;}.header_cont {text-align: center;padding: 0 0.4rem;line-height: 0.86rem;font-size: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.header_btn:active {opacity: 0.7;}
</style>
<script>export default {methods: {goBack(){window.history.back();}}}
</script>
<!-- Home.vue -->
<template><div class="container"><!-- 由于html不区分大小写,所以js中驼峰命名方式在html中要改成用短横线连接的形式 --><home-header></home-header><div class="content"><ul class="cont_ul"><listv-for="item in items":price="item.price":title="item.title"></list></ul></div></div>
</template>
<style>.container {max-width: 640px;margin: 0 auto;overflow-x: hidden;}.cont_ul {padding-top: 0.05rem;margin: 0 -0.12rem;}.cont_ul:after {content: "";display: block;width: 0;height: 0;clear: both;}
</style>
<script>// 导入要用到的子组件import HomeHeader from '../components/HomeHeader'import List from '../components/List'export default {data () {return {items: [{ price: "129.00", title: "大学" },{ price: "256.00", title: "中庸" },{ price: "399.00", title: "论语" },{ price: "998.00", title: "孟子" },{ price: "99.00", title: "道德经" },{ price: "89.00", title: "老子" },{ price: "188.00", title: "金刚经" },{ price: "209.00", title: "易筋经" },]}},// 在components字段中,包含导入的子组件components: {HomeHeader,List}}
</script>
<!-- Detail.vue -->
<template><div class="detail"><detail-header></detail-header><img src="../assets/img/lp_01.jpg" alt=""><p>崇贤馆始置唐代太宗朝。1999年,李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化,提供全新国学体验馆为宏愿。</p><p>其间,在季羡林、冯其庸等国学大师及著名文史学家傅璇琮、毛佩琦先生指导下,耕注先贤原典,以宣纸线装精品形式呈奉世人。作为一家国学传播机构,崇贤馆始终致力于中华传统文化的传承和推广,以古籍线装宣纸书的形式,对浩繁的史海巨著进行经典复刻。不仅如此,崇贤馆还延请了傅璇琮、毛佩奇等诸位在国学界内享有盛誉的专家和学者担纲学术顾问,以精益求精的治学态度面对每一部崇贤馆的作品,使之成为学术史中无尚的精品。</p></div>
</template>
<style>.detail {padding: 0.24rem;font-size: 12px;}img {display: block;width: 80%;margin: 0 auto 0.2rem;}p {font-size: 14px;line-height: 0.5rem;text-align: justify;padding-bottom: 0.24rem;}
</style>
<script>import DetailHeader from '../components/DetailHeader'export default {components: {DetailHeader}}
</script>
Vue.js2.0开发环境搭建(二)相关推荐
- Vue.js2.0开发环境搭建(三)
转载自 Vue.js2.0从入门到放弃---入门实例(三) 今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据.话不多说,直接上干货吧. ...
- Vue.js2.0开发环境搭建(一)
转载自 Vue.js2.0从入门到放弃---入门实例(一) 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题 ...
- Vue.js2.0开发环境搭建(四)
转载自 vuejs2.0从入门到放弃--入门实例(四) 最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的! 对于很多做前端的同学,涉及到命令行和构建工具 ...
- Hi3519V101开发环境搭建(二)
目录 目录 前言 编译U-boot 编译Linux-318y的内核 链接地址 前言 前面已经搭建好了Ubuntu下的海思开发环境,现在对编译Uboot和Kernel的过程做一个简单的记录.参考文档&l ...
- NXP JN5189 ZigBee 3.0开发环境搭建(续)
NXP JN5189 ZigBee 3.0开发环境搭建(续) 一.设置 SDK 安装位置 二.导入 DK6 的 SDK 三.安装 NXP Zigbee Configuration Editor 1.插 ...
- NXP JN5189 ZigBee 3.0开发环境搭建
NXP JN5189 ZigBee 3.0开发环境搭建 一.下载相关软件 1.IDE 2.SDK 3.MCUXpresso Config Tools 4.GCC Arm Embedded tool c ...
- udig-1.4.0 开发环境搭建
udig-1.4.0开发环境搭建 下载需要的文件 dropins-3.7.2.zip: http://udig.refractions.net/files/downloads/extras/ ...
- 音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发
SRS 4.0开发环境搭建 视频讲解如下,点击观看: 音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发 音视频高级开发学习学习资料链接:FFmpeg/WebR ...
- CAD二次开发--0.开发环境搭建及CAD层次结构
本文章用于CAD二次开发学习工作总结,参考李冠艺著编的<深入浅出AutoCAD.NET二次开发>. 一.开发前准备: 首先开发前默认有一定的C#编程经验. 对CAD有一定的了解. 安装好V ...
最新文章
- Deep Metric Learning for Person Re-Identification
- 拦截请求并记录相应信息-springboot
- BSD配置SSH服务
- 安装JDK以及配置Java运行环境
- 【Deep Learning 二】课程一(Neural Networks and Deep Learning),第二周(Basics of Neural Network programming)答案
- 服务器上使用 git 更新 wordpress 内核方案
- 9、包、访问控制、import、static、static代码块、final、抽象类、接口、instanceof、多态...
- Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)
- ARM通用寄存器和特殊寄存器
- 面对不稳定的百度网盘离线下载,这些备用方案可以帮你应急
- 2022-01-18国产Linux深度操作系统deepin20.4发布,涉及桌面和内核升级。
- Shell判断字符串是否为空
- 简易记事本android代码,Android实现简易记事本
- 嵌入式编程中volatile的重要性
- mysql删除指令_mysql怎么用命令删除数据?
- 【小沐学NLP】Python实现图片文字识别
- 搭建红外遥控arm-hadoop集群过程
- html绝对定位重叠,怎么消除css中的绝对定位重叠问题
- linux定时每隔多少天,Linux中Cron任务间隔执行:每隔几分钟/几小时/几天
- Android中相对布局是,Android之相对布局
热门文章
- 高等数学下-赵立军-北京大学出版社-题解-练习8.3
- 确定S中最接近中位数的k个元素(算法导论第三版9.3-7)
- android 按钮 菜单,(期末要考啊)Android的menu(菜单)按钮的使用
- 导数卷积 (NTT)
- Mult-Nim博弈
- 【HNOI2016】序列【莫队】【单调栈】【ST表】
- 【CF1045A】A Last chance【贪心】【线段树优化建图】【网络流构造方案】
- Take Your Seat Gym - 102222D
- 2020牛客暑期多校训练营(第二场)
- scanf(“%s“)真的只开读入字符串大小就可以了吗??