我想做一个网站,网络公司在哪里,网站建设图片流程图,wordpress 多级导航转载自 Vue.js 2.0从入门到放弃---入门实例#xff08;二#xff09;前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性#xff0c;以及一个小实例#xff0c;通过实例来跟大家分享#xff0c;想必更容易理解…转载自 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后缀名的单文件组件这里先说一下我对组件的理解。组件顾名思义就是一组元素组成的一个原件理解的比较浅显、直白在Vue.js中表现为一个自定义元素。开篇展示的图中首页的的列表中的每一项就可以看成一个组件事实上在demo中我也是这么做的这个组件由一张图片一个显示价格的元素一个显示名称的元素组成我就可以先把它定义为一个list组件。首先我们先来分析一下两个页面中组件如下图主页可以看做由两个组件组成homeHeader和list组件而详情页则可以看成是有detailHeader跟下边的图文内容组成这里的图文内容也可以写成组件但是博主这里想偷懒一下有兴趣的可以自己试着写成组件。分析完两个页面的组件构成之后我们修改项目目录如下这样的目录结构就一目了然了吧。两个页面Home和detail和其中用到的三个组件。psassets目录下新建的img目录里边放的一张图片是测试用的。做了这么一大堆铺垫现在来简单说一说单文件组件.vue文件。拿List.vue为例说说单文件组件的结构如下图单文件组件由三大部分组成template、style、script想必看到这三个标签元素大家也都对其作用大概了解了吧。template
template是放置组件的组成部分——html元素的地方是整个组件的模板构成。不过有一点需要特别注意template下只能存在一个根html元素作为wrapper不能存在两个并列的跟元素否则会报错。style
style下放置组件的样式可以用css预处理器less或者sass等前提是需要安装这些依赖包和设置lang属性博主比较懒直接用css了。这个style里的样式表在项目运行的时候会生成一个style标签插入到index.html的head标签里如果组件里的style标签为空则会在index.html的head里插入一个空的style标签所以建议大家这个组件没有用到css就不要写一个空的style直接省略就好。既然每个组件的样式都会生成一个style插入到index.html中我们做的又是单页面应用所有的代码都基于index.html的那如果我们的项目比较大或者是多人协作开发的难免会在写组件的时候会命名相同的class这样的话具有相同class的不同组件的样式就会收到影响产生不可预估的样式问题那岂不是很头疼。其实vue早就替我想到了这个问题可以给style设置一个scoped的属性意思是该style里的样式只对这个组件起作用不会影响其他组件中含有相同class的元素。那vue是怎么做到的呢这里先卖个关子后边再探究竟。script
script里自然是放的js代码。这里会用到一些ES6的语法大家可以去这里 学习ES6的一些新的语法特性。在List.vue的script中大致意思就是导出一个对象这个组件其中设置可以通过属性price和title传递数据。看下边的示意图具体的怎样利用props传递数据请看 这里。.vue单文件组件的三大组成部分大概就是这些具体的内容主要是script整个组件的功能代码全在这里边大家还要多去学习和了解由于在下才疏学浅也只能介绍这些了。vue-router 2.0
由于用vue主要开发单页面应用没有页面之间的跳转在vue中一个所谓的“页面”实则是一个看起来很像“页面”的一个组件这个组件大部分情况下包含其他子组件而已。既然没有页面那怎样实现页面之间的切换呢那就是我们现在要介绍的主角——vue-router 2.0。vue-router是在vue中控制路由的。ps如果你不太理解路由这个概念可以简单的理解为url重的hash部分只不过vue做了一些封装和完善。要控制路由还需要借助两个vue-router自带的两个组件router-view和router-link。安装vue-router 2.0
打开命令行cd到当前项目的目录运行 cnpm install vue-router --save f等待安装完成即可。router-view
router-view是现实路由内容的地方即如果有多个“页面”需要切换显示当前“页面“的地方。需要注意的是使用vue-router控制路由则必须router-view作为容器。router-view还可以嵌套即嵌套路由详情去 这里学习哟~router-link
router-link有一个to属性其属性值是目标路由在运行项目的时候router-link表现为a标签to属性则表现为a标签的href属性。至于为什么不直接用a标签我也不知道呢。如果你知道的话可以留言告诉我不胜感激的呢~这是List组件中用到的router-link组件。基本的概念和准备工作都做好了剩下的就是贴代码了瞬间感觉轻松好多。修改根目录下的index.html如下!-- index.html --
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalablenotitlefirst-vue/titlestyle typetext/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/headbodydiv idapptransition :nametransitionNamerouter-view/router-view/transition/divscript typetext/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字段。修改src目录下的main.js如下// 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代码!-- HomeHeader.vue --
templateheader classheaderdiv classheader_innerdiv classheader_cont主页/div/div/header
/templatestyle.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;}
/styleList.vue代码!-- List.vue --
templateli classsec_lirouter-link to/detail classlp_li_adiv classlp_li_imgWrapimg src../assets/img/lp_01.jpg alt/divp classlp_li_name{{ title }}/pp classlp_li_price{{ price }}元/p/router-link/li
/templatestyle 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
scriptexport default {props: [price, title]}
/scriptDetailHeader.vue代码!-- DetailHeader.vue --
templateheader classheaderdiv classheader_inner flexWrapdiv idheader_btn_nav classheader_btn header_btn_backv-on:clickgoBack返回/divdiv classheader_cont flex详情/divdiv classheader_btn header_btn_cart/div/div/header
/templatestyle.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
scriptexport default {methods: {goBack(){window.history.back();}}}
/scriptHome.vue代码!-- Home.vue --
templatediv classcontainer!-- 由于html不区分大小写所以js中驼峰命名方式在html中要改成用短横线连接的形式 --home-header/home-headerdiv classcontentul classcont_ullistv-foritem in items:priceitem.price:titleitem.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/HomeHeaderimport List from ../components/Listexport 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}}
/scriptDetail.vue代码!-- Detail.vue --
templatediv classdetaildetail-header/detail-headerimg src../assets/img/lp_01.jpg altp崇贤馆始置唐代太宗朝。1999年李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化提供全新国学体验馆为宏愿。/pp其间在季羡林、冯其庸等国学大师及著名文史学家傅璇琮、毛佩琦先生指导下耕注先贤原典以宣纸线装精品形式呈奉世人。作为一家国学传播机构崇贤馆始终致力于中华传统文化的传承和推广以古籍线装宣纸书的形式对浩繁的史海巨著进行经典复刻。不仅如此崇贤馆还延请了傅璇琮、毛佩奇等诸位在国学界内享有盛誉的专家和学者担纲学术顾问以精益求精的治学态度面对每一部崇贤馆的作品使之成为学术史中无尚的精品。/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
scriptimport DetailHeader from ../components/DetailHeaderexport default {components: {DetailHeader}}
/script最后差点忘了style的scoped属性的问题。现在我们把List.vue中的style加上scoped属性然后在命令行cd到项目目录运行 npm run dev 在浏览器访问localhost:8080然后审查列表标签会发现在列表标签中多了一个自定义属性如下相应的css选择器也成了复合选择器在原有选择器基础上复合了一个属性选择器so~~这就是style scoped的奥秘之处。这下应该没有什么遗漏了吧好累心好累~~~哦对了如果用sublime开发建议安装vue的插件支持语法高亮哟~应有些朋友的需求把项目源码托管到github上项目网址 https://github.com/Angewell/firstVue
