Vue, App与我（八）

App的新功能：

Big-man这里先要提供一张图吧：

一级菜单：

一级菜单也就是所谓图片的头部，返回按钮加抢购再加拼单，实现这个一级菜单还是比较简单，接下来是Big-man的简单实现：
template:

<template><div><div class="productListNav"><div class="nav"><div class="back" v-on:click="goBack()"></div><div class="tab"><a v-bind:class="[isClass ? 'current' : '']" v-on:click="addChange('con1')">抢购</a><a v-bind:class="[isClass ? '' : 'current']" v-on:click="addChange('con2')">拼单</a></div></div></div></div>
</template>

js:

<script>import Store from '../../store.js'export default {data() {return{isClass: 0,}},methods: {goBack: function () {Store.setIntoPage(0)this.$router.push('/')},addChange: function(con) {this.isClass = con == 'con1' ? 1 : 0},}}
</script>

css:

<style scoped>
/* 一级标题导航栏  */
.productListNav { position: relative; z-index: 503; }
.productListNav .nav { position:fixed; left:0; top:0; width:100%; height:0.45rem; z-index:503; -webkit-transform:translateZ(0); background: red; overflow:hidden; }
.nav .back { position:absolute; width:0.45rem; height:0.45rem; left:0; top:0;background:url("../../assets/images/icon-back.png") center center no-repeat; background-size: 0.1rem 0.18rem; }
.nav .tab { position:absolute; left:50%; bottom:2px; margin-left:-0.6rem; width:1.2rem; height:0.42rem; line-height:0.42rem;text-align:center;}
.nav .tab a{ color: #ffffff; display:inline-block;  width:0.5rem; line-height:0.42rem; font-size:0.16rem; letter-spacing: 0.005rem; }
.nav .tab .current{ border-bottom: #ffffff 2px solid; letter-spacing: 0.005rem; }
</style>

二级菜单：

二级菜单的实现才是这个页面的难点, Big-man这样规划着，因为以前用reactJS写过类似的效果，在DBB, 所以Big-man接下来进行了静静地分析。
首先是weekDays需要解决，也就是星期的问题；这个问题需要去思考清楚一下；Big-man首先觉得应该把页面写出来的。
template:

        <ul v-bind:class="[isClass ? 'weekDaysList' : 'weekDaysListCurr']"><li v-bind:class="[isCurrentClass === 0 ? 'weekDaysCurr' : 'weekDays']" v-on:click = "currentFir()" ><span class="days">周一</span><span class="label">已开抢</span><i v-bind:class="[isCurrentClass === 0 ? 'triangleCurr' : 'triangle']"></i></li><li v-bind:class="[isCurrentClass === 1 ? 'weekDaysCurr' : 'weekDays']" v-on:click = "currentSec()" ><span class="days">周二</span><span class="label">已开抢</span><i v-bind:class="[isCurrentClass === 1 ? 'triangleCurr' : 'triangle']"></i></li><li v-bind:class="[isCurrentClass === 2 ? 'weekDaysCurr' : 'weekDays']" v-on:click = "currentTrd()" ><span class="days">周三</span><span class="label">抢购进行中</span><i v-bind:class="[isCurrentClass === 2 ? 'triangleCurr' : 'triangle']"></i></li><li v-bind:class="[isCurrentClass === 3 ? 'weekDaysCurr' : 'weekDays']" v-on:click = "currentFourth()" ><span class="days">周四</span><span class="label">即将开场</span><i v-bind:class="[isCurrentClass === 3 ? 'triangleCurr' : 'triangle']"></i></li><li v-bind:class="[isCurrentClass === 4 ? 'weekDaysCurr' : 'weekDays']" v-on:click = "currentFifth()" ><span class="days">周五</span><span class="label">即将开抢</span><i v-bind:class="[isCurrentClass === 4 ? 'triangleCurr' : 'triangle']"></i></li></ul>

js:

            currentFir: function () {this.isCurrentClass = 0},currentSec: function () {this.isCurrentClass = 1},currentTrd: function () {this.isCurrentClass = 2},currentFourth: function () {this.isCurrentClass = 3},currentFifth: function () {this.isCurrentClass = 4},

css:

/* 星期数 */
.weekDaysList { display: block; position:absolute; top: 8%;  width: 100%; height: 0.55rem; background: #000000; font-size: 0; }
.weekDaysListCurr { display: none; }
.weekDaysCurr { display: inline-block; position: relative; width: 20%; height: 100%; color: #fff; background: red; }
.weekDays { display: inline-block; width: 20%; height: 100%; color: #fff; }
.days { display: inline-block; width: 100%; margin-top: 0.1rem; font-size: 0.16rem; text-align: center; letter-spacing: 0.005rem; }
.label { display: inline-block; width: 100%; text-align: center; font-size: 0.12rem; letter-spacing: 0.005rem; }
.triangleCurr { display: block; position: absolute; top: 100%; left: 33.4%;  overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; border-bottom: 8px solid #FFF; border-top: 8px solid red; border-left: 8px solid #FFF; border-right: 8px solid #FFF; }
.triangle { display: none; }

就会把上述的页面完成；

点击不同按钮，加载不同的数据展现：

一级菜单的按钮呈现不同效果：也就是上面定义的isClass来实现的问题;
template:

v-bind:class="[isClass ? 'weekDaysList' : 'weekDaysListCurr']"

css:

.weekDaysList { display: block; position:absolute; top: 8%;  width: 100%; height: 0.55rem; background: #000000; font-size: 0; }
.weekDaysListCurr { display: none; }

当点击按钮，控制模块的display属性来进行按钮的控制；星期天的控制与此类似，上面的代码已经给出了, Big-man就不再这里赘述了。

下面的产品展示: 很明显可以看出这是一个列表的页面；所以Big-man认为需要采用列表的方式进行解决。
template

<div v-bind:class="[isClass ? 'productListPage' : 'productListPageCurr']"><div id="con" class="productListBox"><li class="productListInfo" v-for="(item, index) in productPictures" :key="index"><div class="left"><img v-bind:src="item.imgUrl" alt="智慧信阳欢迎您!" /></div><div class="right"><span class="companyTitle">风波庄丨925纯银情侣开口 对戒</span><span class="startTime">周三开抢，仅限200名额</span><p class="companyInfo"><span class="purchased">已抢 45件</span><span class="inventory">库存 155件</span></p><div class="productInfo"><div class="priceInfo"><span class="price"><i>￥</i>65</span><span class="oldPrice">￥65</span></div><div class="buyInfo"><span>马上抢购</span></div></div></div></li></div></div>

js：模拟数据；

<script>import Store from '../../store.js'import iconFir from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconSec from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconTrd from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconFourth from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconFifth from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconSixth from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconSeventh from '../../assets/images/SpecialOffer/ProductList/productIcon.png'import iconEight from '../../assets/images/SpecialOffer/ProductList/productIcon.png'export default {data() {return{isClass: 0,isCurrentClass: 2,productPictures: [{ imgUrl: iconFir },{ imgUrl: iconSec },{ imgUrl: iconTrd },{ imgUrl: iconFourth },{ imgUrl: iconFifth },{ imgUrl: iconSixth },{ imgUrl: iconSeventh },{ imgUrl: iconEight },],}},}
</script>

css: 设置其中的长宽高

.productListPage { display: block; background: #fff; padding-top: 1rem; }
.productListPageCurr { display: none; }
.productListPage .productListBox { display: block; }
.productListInfo { display: block; height: auto; padding: 0.15rem 0.1rem; border-bottom: 1px solid #eeeeee; }
.productListInfo .left { display: inline-block; float: left; width: 0.9rem; height: 0.9rem; line-height: 0.8rem; margin-top: 0.05rem; border-radius: 2px; font-size: 0.12rem; }
.productListInfo .left img { display: inline-block; height: 100%; }
.productListInfo .right { display: block; padding-left: 1rem; }
.companyTitle { display: block; height: 0.22rem; line-height: 0.22rem; font-size: 0.14rem; font-weight: bold; }
.startTime { display: block; height: 0.22rem; line-height: 0.22rem; font-size:0.12rem; }
.companyInfo { display: block; font-size: 0.12rem; }
.companyInfo .purchased { display: inline-block; width: 50%; text-align: left; }
.companyInfo .inventory { display: inline-block; width: 48%; text-align: right; }
.productInfo { display: block; height: 0.5rem; line-height: 0.5rem; }
.productInfo .priceInfo { display: inline-block; width: 57%; }
.productInfo .priceInfo .price { display: inline-block; font-size: 0.25rem; font-weight: bold; color: red; }
.productInfo .priceInfo .oldPrice { display: inline-block; font-size: 0.12rem; text-decoration: line-through; }
.buyInfo { display: inline-block; width: 40%; height: 0.25rem; line-height: 0.25rem; border-radius: 2px; text-align: center; color: #fff;  background: red; }

问题分析与解决：

<ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li>
</ul>

错误原因：
- 中间出现间距的原因：<li>标签和<li>标签之间有空格引起
修改方式：
方式1：

<ul><li>星期一</li><!----><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li>
</ul>

第一个<li>标签和第二个<li>标签直接注释掉或者紧挨着没有空格。
方式2：
- li选择器中加入 float: left; 让li变成浮动，让各个<li>标签紧挨着排列。同时还可以看到 float具有inline元素特性。
方式3：
- 设置ul标签的属性 font-size ＝ 0，再重新设置li标签的 font-size 。
Big-man觉得第2中方式尽量少的采用，因为浮动带来的弊端会令你的排版想象不到的困难。

额外解决的问题：

:disable="Boolean":的使用；
功能是什么了？就是当有的用户进入的时候输入信息的输入框不可以选择，所以在vue里面就用了这样的一套代码:disable="[type == 1 ? true:false]"，当时的Big-man就惊讶了，为什么要这样写了，Big-man的理解是:disable="Boolean"里面，直接是接的是布尔类型的值，如果是在input标签里面的话直接写成<input type="text" disabled />或者<input type="text" disabled="disabled">，Big-man忘记正式地说了, disabled属性表示的是disabled 属性规定应该禁用 input 元素。所以不是Big-man这位同事写得格式有问题而且，而是布尔值，所以不用再写一个三元标识符在里面进行判断，这就是所谓的画蛇添足。

<input type="date" />的日期的默认属性去除，Big-man特意去写了一个测试案例：首先Big-man需要分析一下的；
目前PC端对input 的date类型支持不好，Big-man测试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用，在Google或者度娘里面搜索就行了，PC端Big-man就不去多考虑这点了。
那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好，很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值，但必须是日期格式才会正确显示，否则就会直接忽略掉。
以下为Big-man的测试代码，需要大家自己去进行测试和修改以至于去满足自己本身的开发。

<style type="text/css">html, body {width: 100%;height: 100%;}.date {width: 30%;height: 20%;}input[typ="date"]:before {content: attr(placeholder);color: red;}</style>
<script type="text/javascript">window.onload = function() {var o = document.getElementById('date');o.onfocus = function() {this.removeAttribute('placeholder');};o.onblur = function() {if(this.value == '') this.setAttribute('placeholder', '我是日期')};}</script>
<body><div class="date"><input type="date" name="date" value="2017-09-17" id="date" /></div>
</body>

Vue自定义标签

在Vue中如何定义一个onFocus和onBlur标签来进行一些类似于直接操作DOM中的标签，这在Vue里面存在专业名次那就是自定义标签。
Big-man也就需要在自己所写的项目中自定义一个onFocus和onBlur的标签，下面看Big-man所写的代码：
Custom Directives:
除了在核心（v-model和v-show）中发送的默认指令集之外，Vue还允许您注册自己的自定义指令。请注意，在Vue 2.0中，代码重用和抽象的主要形式是组件 - 但是，有些情况下，您只需要在普通元素上进行一些低级DOM访问，这是自定义指令仍然有用的情况。一个例子就是关注输入元素，像这样：

<input type="text" name="text" placeholder="请输入你的内容"  />

当页面加载时，该元素会获得焦点（注意：自动对焦不适用于移动Safari）。事实上，如果您在访问此页面之后没有点击任何其他内容，则上述输入内容现在应该专注。现在我们来构建完成这个的指令：

// 注册一个名为`v-focus`的全局自定义变量.
Vue.directive('focus', {//当绑定的元素插入DOM中 ...insert: function () {// 聚焦元素el.focus()}
})

如果Big-man他自己想要在本地注册指令，组件也可以接受一个directives选项:

directives: {focus: {// directive definition}
}

然后在模板中，就可以像是在操作DOM元素一样的去使用v-focus进行操作，只不过v-focus中的所有属性都是你已经定义好的属性。

<input v-focus />

钩功能

在这里不得不解释到一个新的概念——钩功能。
指令对象中可以提供几个钩子函数(全部可选)：
- bind: 当调用指令首先绑定到元素时，只调用一次。这是大家可以一次性设置工作的地方。
- insert: 当绑定元素已插入其父节点是调用（这仅保证父节点存在，不一定在文档中）。
- update：在包含组件的VNode已更新后调用，但可能在子组件更新之前。该指令的值可能有也可能没有更改，但您可以通过比较绑定的当前值和旧值来跳过不必要的更新（参见下面的挂钩参数）。
- componentUpdated：在包含组件的VNode 和其子节点的VNodes之后调用。
- unbind当该指令与元素绑定时，只调用一次。

指令钩参数

指令钩子传递这些参数：
- el：指令绑定的元素。这可以用来直接操纵DOM。
- binding：包含以下属性的对象。
- name：指令的名称，不带v-前缀。
- value：传递给该指令的值。例如v-my-directive="1 + 1"，值将是2。
- oldValue：以前的值，只有update和componentUpdated。无论值是否发生变化，都可以使用。
- 表达式：绑定的表达式作为一个字符串。例如v-my-directive="1 + 1"，表达式将是”1 + 1”。
- arg：参数传递给指令，如果有的话。例如v-my-directive:foo，arg将是”foo”。
- 修饰符：包含修饰符的对象（如果有）。例如v-my-directive.foo.bar，修饰符对象将是{ foo: true, bar: true }。
- vnode：Vue编译器生成的虚拟节点。有关详细信息，请参阅VNode API。
- oldVnode：以前的虚拟节点，仅在update和componentUpdatedhook中可用。
- 注意: 除此之外el，大家应该将这些参数视为只读方式，不要修改它们。如果需要在挂钩之间共享信息，建议通过元素的数据集来实现。

使用以下某些属性的自定义指令的示例：

< div  id = “hook-arguments-example”  v-demo：foo.ab = “message” > </ div >

Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: '       + s(binding.name) + '<br>' +'value: '      + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: '   + s(binding.arg) + '<br>' +'modifiers: '  + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')}
})
new Vue({el: '#hook-arguments-example',data: {message: 'hello!'}
})

功能简介:

在很多情况下，你可能希望在相同的行为bind和update，但不关心其他挂钩。例如：

Vue.directive（'color-swatch'，function（el，binding） {el.style.backgroundColor = binding.value
}

对象文字:

如果您的指令需要多个值，您还可以传递一个JavaScript对象文字。请注意，指令可以采用任何有效的JavaScript表达式。

< div  v-demo = "{color：'white'，text：'hello！}" > </ div >

Vue.directive（'demo'，function（el，binding） {console.log（binding.value.color）// =>"white"console.log（binding.value.text）   // =>"Hello"
}）

总结：

以上就是Big-man实现此页面的代码，过程中还存在很多的不足，还望五湖四海的兄弟们给个建议，感激不尽！

JackDan9 Thinking!

Vue, App与我（八）相关推荐

Vue, App与我(十三)
Vue, App与我(十三) 前言: Big-man需要开发一个论坛模块, 论坛模块的话,简而言之, 就是一个发帖和回帖的模块.但是Big-man的这个论坛模块还是比较复杂的.在接下来的实现中Big- ...
Vue app.js文件过大，带宽占用过大，优化方案（持续优化）
Vue app.js文件过大,带宽占用过大,优化方案前言最近我的网站在使用的过程中发现加载缓慢问题,在没有缓存的情况下页面打开速度需要五秒,这对于用户体验来说是不友好的.通过查找网上的方案我实验 ...
Vue, App与我（二）
Vue, App与我(二) 前言: 进过上一章的讲解,Big-man已经理解了项目的搭建,接下来就是项目的具体代码了. 还有就是Webpack的配置说明Big-man在上面仅仅是简单的引用,所以Big ...
vue app.js ＜!doctype html＞报错 Unexpected token ‘＜‘ 作者:哇塞大嘴好帅
vue app.js <!doctype html>报错 Unexpected token '<' 作者:哇塞大嘴好帅作者:哇塞大嘴好帥(哇塞大嘴好帅) 首先我们看下错误确保我们 ...
vue组件通信的八种方式
一.props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信. 1. 父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组 ...
vue App.vue router 过渡效果, keep-alive 结合使用示例
1, router.js配置每个路由的index值 2, router.js配置每个路由的keepAlive值 app.vue 代码 <template><div id=&quo ...
1.微信回到首页直接退出网页 2.vue app返回直接退出问题, 首页返回两次退出解决
问题描述: 1.项目是VUE写的, 之前返回一直是写的返回按键使用this.$router.go(-1)返回, 这样会导致返回会一直返回上一级历史,很多时候体验会非常不好, 但是使用指定路由的方式又会 ...
Vue学习杂记（八）——SPA模式和前端路由
SPA模式和前端路由一.SPA模式介绍二.前端路由工作原理三.配置前端路由三.路由的其他使用方式四.动态路由与参数说明五.导航卫士一.SPA模式介绍 SPA(single pag ...
Vue 人资实战篇八权限设计重点！！！路由访问权限，左侧导航栏显示等等，还有 mixin 混入方法
1.0 权限设计-RBAC的权限设计思想传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限基于此,RBAC的权限模型就应 ...

Vue, App与我（八）

Vue, App与我（八）

App的新功能：

一级菜单：

二级菜单：

点击不同按钮，加载不同的数据展现：

问题分析与解决：

额外解决的问题：

Vue自定义标签

钩功能

指令钩参数

功能简介:

对象文字:

总结：

Vue, App与我（八）相关推荐

最新文章

热门文章