vue模块的用法

前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实例,通过实例来跟大家分享,想必更容易理解。

先来看一下,看完这篇博客,你会做出什么样的效果吧。

就是这样的一个小的demo,其中主要用到了vue-router 2.0 和vue的单文件组件,这里再细分一下如下

 

  • vue-router 2.0 定义路由配置
  • router-view 和 router-link 来控制路由
  • transition 控制页面之间的跳转动画
  • .vue后缀名的单文件组件
  • 简单的ES6语法
 

修改项目目录结构

 

先来看一下项目的机构,我在原项目目录结构上稍作调整,让目录结构更清晰一些。如下图

vue模块的用法_第1张图片

在 src 目录下,删除 App.vue ,增加 pages 文件夹,该文件夹用来用来放置我们创建的“页面”(比如,Home.vue)。其实,这里说的“页面”也是组件,只是它变现为一个“页面”而已,跟components 目录下的组件没有本质的区别,我们分开目录放置主要是更语义化,结构更清晰易懂。

可能有的刚接触的同学还不太了解组件(.vue后缀结尾的文件),不要着急,接着往下看。

 

.vue后缀名的单文件组件

 
这里先说一下我对组件的理解。组件,顾名思义就是一组元素组成的一个原件(理解的比较浅显、直白),在Vue.js中,表现为一个自定义元素。开篇展示的图中,首页的的列表中的每一项就可以看成一个组件(事实上,在demo中,我也是这么做的),这个组件由一张图片,一个显示价格的元素,一个显示名称的元素组成,我就可以先把它定义为一个list组件。
首先,我们先来分析一下两个页面中组件,如下图
 
vue模块的用法_第2张图片 vue模块的用法_第3张图片
 
主页可以看做由两个组件组成,homeHeader和list组件,而详情页则可以看成是有detailHeader跟下边的图文内容组成(这里的图文内容也可以写成组件,但是博主这里想偷懒一下,有兴趣的,可以自己试着写成组件)。
分析完两个页面的组件构成之后,我们修改项目目录如下
 
vue模块的用法_第4张图片
 
这样的目录结构,就一目了然了吧。两个页面,Home和detail和其中用到的三个组件。ps:assets目录下新建的img目录,里边放的一张图片是测试用的。
做了这么一大堆铺垫,现在来简单说一说单文件组件.vue文件。拿List.vue为例,说说单文件组件的结构,如下图
 
vue模块的用法_第5张图片
 
单文件组件,由三大部分组成,template、style、script,想必看到这三个标签元素,大家也都对其作用大概了解了吧。
 

template

template是放置组件的组成部分——html元素的地方,是整个组件的模板构成。不过有一点需要特别注意,template下只能存在一个根html元素作为wrapper,不能存在两个并列的跟元素,否则会报错。
 
vue模块的用法_第6张图片
 
vue模块的用法_第7张图片
 

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传递数据。看下边的示意图
 
vue模块的用法_第8张图片
 
具体的怎样利用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等待安装完成即可。
 
vue模块的用法_第9张图片
 

router-view

router-view是现实路由内容的地方,即如果有多个“页面”需要切换,显示当前“页面“的地方。需要注意的是,使用vue-router控制路由则必须router-view作为容器。
 
 
router-view还可以嵌套,即嵌套路由,详情去  这里学习哟~
 

router-link

router-link有一个to属性,其属性值是目标路由,在运行项目的时候,router-link表现为a标签,to属性则表现为a标签的href属性。至于,为什么不直接用a标签,我也不知道呢 。如果你知道的话,可以留言告诉我,不胜感激的呢~
 
vue模块的用法_第10张图片
 
这是List组件中用到的router-link组件。
 
基本的概念和准备工作都做好了,剩下的就是贴代码了,瞬间感觉轻松好多。
 
修改根目录下的index.html如下:
[html]  view plain  copy
 
  1.   
  2. >  
  3. <html>  
  4.   <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
  7.     <title>first-vuetitle>  
  8.     <style type="text/css">  
  9.         * { margin: 0; padding: 0; }  
  10.         html,body { background: #eee; }  
  11.         ul,li { list-style: none; }  
  12.         a { text-decoration: none; }  
  13.         img { vertical-align: middle; }  
  14.         /* 跳转页面动画 */  
  15.         .slide-enter,  
  16.         .slide_back-enter {  
  17.             position: absolute;  
  18.             width: 100%;  
  19.         }  
  20.         .slide-leave,  
  21.         .slide_back-leave {  
  22.             position: absolute;  
  23.             width: 100%;  
  24.         }  
  25.         .slide-enter-active,  
  26.         .slide_back-enter-active {  
  27.             transition: all 0.3s linear;  
  28.         }  
  29.         .slide-leave-active {  
  30.             position: absolute;  
  31.             transition: all 0.3s linear;  
  32.             transform: translate(-100%);  
  33.         }  
  34.         .slide-enter{  
  35.             transform: translateX(100%);  
  36.         }  
  37.         .slide_back-leave-active {  
  38.             position: absolute;  
  39.             transition: all 0.3s linear;  
  40.             transform: translate(100%);  
  41.         }  
  42.         .slide_back-enter {  
  43.             transform: translateX(-100%);  
  44.         }  
  45.     style>  
  46.   head>  
  47.   <body>  
  48.     <div id="app">  
  49.         <transition :name="transitionName">  
  50.             <router-view>router-view>  
  51.         transition>  
  52.     div>  
  53.   
  54.     <script type="text/javascript">  
  55.   
  56.         // 计算html的font-size  
  57.         (function(){  
  58.             function resizeBaseFontSize(){  
  59.                 var rootHtml = document.documentElement,  
  60.                     deviceWidth = rootHtml.clientWidth;  
  61.   
  62.                 if(deviceWidth > 640){  
  63.                     deviceWidth = 640;  
  64.                 }  
  65.   
  66.                 rootHtml.style.fontSize = deviceWidth / 7.5 + "px";  
  67.             }  
  68.   
  69.             resizeBaseFontSize();  
  70.   
  71.             window.addEventListener("resize", resizeBaseFontSize, false);  
  72.             window.addEventListener("orientationchange", resizeBaseFontSize, false);  
  73.         })();  
  74.     script>  
  75.   body>  
  76. html>  
其中 transition组件是用来控制页面切换的动画用的,transitionName绑定到的是main.js中的data中的transitionName字段。
 
修改src目录下的main.js如下:
[javascript]  view plain  copy
 
  1. // main.js  
  2.   
  3. // 导入Vue,这个是必需的,在使用Vue之前,必须先导入  
  4. import Vue from 'vue'  
  5.   
  6. // 导入 vue-router,并使用  
  7. import VueRouter from 'vue-router'  
  8. Vue.use(VueRouter)  
  9.   
  10. // 导入 pages 下的 Home.vue   
  11. import Home from './pages/Home'  
  12. import Detail from './pages/Detail'  
  13.   
  14. // 定义路由配置  
  15. const routes = [  
  16.     {  
  17.         path: '/',  
  18.         component: Home  
  19.     },  
  20.     {  
  21.         path: '/detail',  
  22.         component: Detail  
  23.     }  
  24. ]  
  25.   
  26. // 创建路由实例  
  27. const router = new VueRouter({  
  28.     routes  
  29. })  
  30.   
  31. // 创建 Vue 实例  
  32. new Vue({  
  33.   el: '#app',  
  34.   data(){  
  35.     return {  
  36.         transitionName: 'slide'  
  37.     }  
  38.   },  
  39.   router, // 在vue实例配置中,用router  
  40.   watch: {  
  41.     // 监视路由,参数为要目标路由和当前页面的路由  
  42.     '$route' (to, from){  
  43.         const toDepth = to.path.substring(0, to.path.length-2).split('/').length  
  44.         // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'  
  45.         // 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥  
  46.         // 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教  
  47.         const fromDepth = from.path.substring(0, from.path.length-2).split('/').length  
  48.         this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'  
  49.         // 根据路由深度,来判断是该从右侧进入还是该从左侧进入  
  50.     }  
  51.   }  
  52. })  

HomeHeader.vue代码
[plain]  view plain  copy
 
  1.   
  2.   
  3.   
  4.   

List.vue代码
[plain]  view plain  copy
 
  1.   
  2.   
  3.   
  4.   
  5.     .sec_li {  
  6.         float: left;  
  7.         width: 50%;  
  8.         margin-bottom: 0.1rem;  
  9.     }  
  10.     .lp_li_a {  
  11.         display: block;  
  12.         padding: 0.3rem 0;  
  13.         margin: 0 0.05rem;  
  14.         text-align: center;  
  15.         background: #fff;  
  16.     }  
  17.     .lp_li_imgWrap {  
  18.         padding: 0.24rem 0;  
  19.     }  
  20.     .lp_li_imgWrap > img {  
  21.         width: auto;  
  22.         height: 2.3rem;  
  23.     }  
  24.     .lp_li_name {  
  25.         height: 0.5rem;  
  26.         line-height: 0.5rem;  
  27.         font-size: 16px;  
  28.         color: #333;  
  29.     }  
  30.     .lp_li_price {  
  31.         height: 0.5rem;  
  32.         line-height: 0.5rem;  
  33.         font-size: 16px;  
  34.         color: #fb3b3b;  
  35.     }  
  36.   
  37.   
  38.   

DetailHeader.vue代码
[plain]  view plain  copy
 
  1.   
  2.   
  3.   
  4.   
  5.   

Home.vue代码
[plain]  view plain  copy
 
  1.   
  2.   
  3.   
  4.   

Detail.vue代码
[plain]  view plain  copy
 
  1.   
  2.   
  3.   
  4.   

最后,差点忘了,style的scoped属性的问题。现在,我们把List.vue中的style加上scoped属性,然后在命令行cd到项目目录,运行 npm run dev ,在浏览器访问localhost:8080,然后审查列表标签,会发现在列表标签中多了一个自定义属性,如下
 
vue模块的用法_第11张图片
 
相应的css选择器也成了复合选择器,在原有选择器基础上复合了一个属性选择器,so~~这就是style scoped的奥秘之处。
 
这下应该没有什么遗漏了吧,好累,心好累~~~
 
哦,对了,如果用sublime开发,建议安装vue的插件,支持语法高亮哟~
 
应有些朋友的需求,把项目源码托管到github上,项目网址 https://github.com/Angewell/firstVue
 
原文地址:  http://blog.qianduanchina.cn/post/59704ab47838a71273eb4da7

你可能感兴趣的:(vue)