在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。
——王小波
上一章研究了vue中组件的通信,算是对vue的组件通信有了大致的了解。综合上三章对搭建项目也算是心有成竹了,这一章我将把自己在开发整个项目时的一些总结分享给大家。
X-chat项目github地址:https://github.com/ermu592275...
X-chat是我仿照别人项目的UI纯手打的,在这里表示感谢,同时贴上CookIM(我仿照的项目)的地址:
码云地址:http://git.oschina.net/cookee...
演示地址:https://im.cookeem.com/chat/#...
一、关于CSS
众所周知,vue组件的css样式可以写在<style></style>中,当然也可以写成一个css文件然后link进去。
我在项目中对于CSS的写法如下:
1.使用bootstarp.css
安装npm install bootstarp --save
引入有两种方法:在index.html中link或者main.js也就是入口文件中improt,需要注意的是import不支持使用cdn,所以如果是cdn可以在index.html中link进来
import如下:
// 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 VueRouter from 'vue-router'
import Vuex from 'vuex'
import router from './router'
import store from './store'
import App from './App'
import 'bootstrap/dist/css/bootstrap.css' //只需引入就够了
import 'animate.css/animate.css'
import './base.css'
Vue.use(VueRouter)
console.log(store)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
2.使用base.css声明基本样式
我在src目录下创建了base.css将reset样式以及公共的样式都放在了base.css中,也在main.js中引入
import './base.css'
3.在每个组件中声明对应的样式
在每个组件中写对应的样式,并且加上scoped显示样式的作用域,能有效的防止样式冲突,从此不再为css样式的命名而头疼。
<style scoped> // 加上scoped
.hint {
margin: 0;
position: relative;
width: 100%;
height: 100%;
z-index: 99;
}
....
</style>
如果要使用sass或less语法,请参考:https://segmentfault.com/a/11...
4.过渡效果
组件的切换,要是能加上过渡效果就更好了。在vue中可以通过一下方式实现过渡效果:
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库,如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库,如 Velocity.js
我在项目中使用了animate.css,用法和bootstarp十分相似,只需要安装之后在main.js中引入就可以了。
npm install animate.css --save
main.js
import 'animate.css/animate.css'
也使用了Vue提供的transition封装组件,transition多用在条件渲染(v-if),动态数组等情形下。
我在项目中的使用如下:
APP.vue
<template>
<div>
<!-- 1.使用transition组件将需要实现过渡效果的组件(也可以是元素)包裹,并且定义一个name属性 -->
<transition name="listbar">
<listbar></listbar>
</transition>
<div class="rightpart" v-bind:style="height">
<router-view></router-view>
</div>
<transition name="daggerbar">
<daggerbar></daggerbar>
</transition>
<transition name="hinttst">
<hint></hint>
</transition>
</div>
</template>
<script>
import Headerbar from './Header.vue'
import Listbar from './List.vue'
import Footerbar from './Footer.vue'
import Daggerbar from './Dagger.vue'
import Hint from './Hint.vue'
export default {
components: {
Headerbar,
Listbar,
Footerbar,
Daggerbar,
Hint
},
data () {
return {
height: 'height:'+document.documentElement.clientHeight+'px',
showdagger: this.$store.state.cCtrl.showDagger
}
},
methods: {
daggerCtrl: function(){
this.$store.commit('daggerCtrl')
}
}
}
</script>
<style>
.rightpart {
position: relative;
float: left;
width: 83%;
}
/*2. 添加对应的style,注意前缀为transition的name属性名 !!*/
.daggerbar-enter-active, .daggerbar-leave-active {
transition: opacity .5s;
}
.daggerbar-enter, .daggerbar-leave-active {
opacity: 0;
}
.hinttst-enter-active {
transition: all .3s ease;
}
.hinttst-enter {
transform: translateX(-100%);
opacity: 0;
}
/*.listbar-enter-active {
transition: all .3s ease;
}
.listbar-enter {
margin-left: -100%;
}*/
</style>
transition有四个类名,用于定义enter/leave的过渡效果:
v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。
在项目中使用到的CSS相关暂时是这些,其他坑留着以后踩。
二、关于template
template包含了html的代码,vue和angular一样,也有自己的模版语法,可大致分为以下几类:
赋值 包括
{{}} v-html v-bind
等控制 包括
v-if v-on
等过滤 vue2.0废弃了自带的fitler,现在只能自己写了
首先声明,以下内容大多是从vue官网中copy过来的,只是为了做一个总结性的概述,满足喜欢快速阅读的朋友,更详细的内容请移步到官网中。
赋值
所谓赋值,就是把Vue实例中的数据(data声明的部分)渲染到html中。vue相比angular没有脏检查机制,而是用了基于依赖追踪的观察系统。不会像angular那样watcher越多,越来越慢。
赋值有一下几种方式:
-
{{}}
最常见的方式<span>Message: {{ msg }}</span>
-
v-once
一次性插值,当数据改变时,插值处的内容不会改变<span v-once>This will never change: {{ msg }}</span>
-
v-html
插入html文本的时候用此方式<div v-html="rawHtml"></div>
-
v-bind
为属性赋值时使用此方式,可以简写为:<div v-bind:id="dynamicId"></div> <div :id="dynamicId"></div>
其中css的绑定如下:
<!-- isActive值为true就添加active属性 -->
<div v-bind:class="{ active: isActive }"></div>
v-for
用于以数组的形式渲染html
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
v-model
双向数据绑定,不同的类型绑定的方式个有不同,下面是一个input类型的简单事例,其他类型请看文档:http://cn.vuejs.org/v2/guide/...
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
以上就是赋值操作的简单介绍,更多复杂的操作(特别是v-bind:class和v-for)请阅读官网http://cn.vuejs.org/v2/guide/...
控制
我在这里将条件渲染和事件监听归于控制一类,其实不太好,但是又不知道该怎么分。有点牵强,厚着脸皮往下写
条件渲染
v-if
根据条件显示或隐藏组件
<h1 v-if="ok">Yes</h1>
v-else
放在v-if的后面,表示当v-if
为false时,要显示的内容。
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-else-if
,顾名思义,用作 v-if
的 else-if
块。可以链式的多次使用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
: 和v-if
用法相同,但是v-show
的元素会始终渲染并保存在DOM中,只是改变display值。
<h1 v-show="ok">Hello!</h1>
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。
事件监听
v-on
: 监听DOM事件触发绑定的methods。
<div id="example-1">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
可以简写为@click="counter += 1"
。vue还提供了事件修饰符和按键修饰符.
事件修饰符比如阻止冒泡:
<a v-on:click.stop="doThis"></a>
按键修饰符指按下键盘上的某个键触发此methods,比如enter键:
<input v-on:keyup.enter="submit">
还可以自定义按键修饰符:
//main.js
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}
过滤
改变数据显示的方式而不改变数据原本的值,不如时间显示格式改为yyyy-MM-dd但原本的date对象不会改变。vue2.0废弃了之前1.0上的所有自带过滤器,现在要自己写了。用法如下:
<!-- in mustaches -->
{{ msg| capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App!'
}
},
filters: {
capitalize: function (value) { // value对应 | 前面的数据
if (!value) return ''
value = value.toString()
return value + 'you are lovely'
}
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。