资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue2.0开发聊天程序(四) 完整体验一次Vue开发（上）

vue2.0开发聊天程序(四) 完整体验一次Vue开发（上）

zhaochunqi / 2281人阅读

摘要：在离开过渡被触发时生效，在完成之后移除。可以链式的多次使用和用法相同，但是的元素会始终渲染并保存在中，只是改变值。用法如下对应前面的数据

在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——王小波
上一章研究了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样式可以写在中，当然也可以写成一个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: "",
  components: { App }
})

2.使用base.css声明基本样式
我在src目录下创建了base.css将reset样式以及公共的样式都放在了base.css中，也在main.js中引入

import "./base.css"

3.在每个组件中声明对应的样式
在每个组件中写对应的样式，并且加上scoped显示样式的作用域，能有效的防止样式冲突，从此不再为css样式的命名而头疼。

如果要使用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

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越多，越来越慢。
赋值有一下几种方式：

{{}} 最常见的方式

Message: {{ msg }}

v-once一次性插值，当数据改变时，插值处的内容不会改变

This will never change: {{ msg }}

v-html 插入html文本的时候用此方式

v-bind 为属性赋值时使用此方式，可以简写为:

其中css的绑定如下：

v-for用于以数组的形式渲染html

    
  
  • 
    {{ item.message }}
  
    •

v-model 双向数据绑定，不同的类型绑定的方式个有不同，下面是一个input类型的简单事例，其他类型请看文档：http://cn.vuejs.org/v2/guide/...



Message is: {{ message }}

以上就是赋值操作的简单介绍，更多复杂的操作（特别是v-bind:class和v-for）请阅读官网http://cn.vuejs.org/v2/guide/...

控制
我在这里将条件渲染和事件监听归于控制一类，其实不太好，但是又不知道该怎么分。有点牵强，厚着脸皮往下写

条件渲染
v-if根据条件显示或隐藏组件

Yes

v-else放在v-if的后面，表示当v-if为false时，要显示的内容。

Yes


No

v-else-if，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：


  A




  B




  C




  Not A/B/C

v-show： 和v-if用法相同，但是v-show的元素会始终渲染并保存在DOM中，只是改变display值。

Hello!
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

事件监听
v-on: 监听DOM事件触发绑定的methods。


  
  
这个按钮被点击了 {{ counter }} 次。


var example1 = new Vue({
  el: "#example-1",
  data: {
    counter: 0
  }
})

可以简写为@click="counter += 1"。vue还提供了事件修饰符和按键修饰符.
事件修饰符比如阻止冒泡：

按键修饰符指按下键盘上的某个键触发此methods，比如enter键：

还可以自定义按键修饰符：

//main.js
Vue.config.keyCodes = { 
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
}

过滤
改变数据显示的方式而不改变数据原本的值，不如时间显示格式改为yyyy-MM-dd但原本的date对象不会改变。vue2.0废弃了之前1.0上的所有自带过滤器，现在要自己写了。用法如下：


{{ msg| capitalize }}
GPU云服务器 云服务器 vue2.0 cdn 微信小程序是一次开发吗 小程序线上开发 Vue开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81078.html

相关文章

  • vue2.0开发聊天程序(四) 完整体验一次Vue开发（下）

    摘要：用法如下注册全局的指令注册一个全局自定义指令当绑定元素插入到中。具体代码如下当组件中需要用到其他的组件时，需要使用属性去创建一个哈希表。具体用法如下包含组件引入组件在中添加组件的哈希表收尾除了上面这些属性，还有一些杂项详情请看官网 后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。　　　　　　　　　　　　　　　　　　　　　　　　　　　　...

    tinyq 评论0 收藏0

  • vue2.0开发聊天程序（三）组件的通信

    摘要：我在中写了这段代码在组件被创建时候将会执行此函数相当于进入页面的自执行使用方法监听属性并执行一个回调函数按道理在元素被创建的时候，会将监听到的值赋给并且打印。 天地不仁以万物为刍狗，宇宙无义视众生如蝼蚁　　　　　　　　　　　　　　　　　　——萧鼎和我 上一节列出了５个关键点，第一个路由已经解决了，接下来解决第二个问题： 组件的通信问题 一、组件的关系 组件之间的关系无非就是两种父子关系...

    ddongjian0000 评论0 收藏0

  • vue2.0开发聊天程序(五) 客户端的webScoket

    摘要：先看看兼容性创建连接构造函数接收两个参数这里的不能是或者而是对应的或者和是定义的两种方案，类似于类似于协议名称，是可选的。服务端和客户端的协议名称必须一致。协议有三种注册协议，开放协议，自定义协议。限制以内就是在构造函数中选传的参数。 愿天下所有的情侣，都是失散多年的兄妹　　　　　　　　　　　　　　　　　　——好妹妹webScoket是html5提出的一个协议，咱们用的http是无状态...

    meteor199 评论0 收藏0

  • vue2.0开发聊天程序(六) 搞定mongodb

    摘要：为安装文件，无需再配置环境变量。连接操作有以下包作者并未查到除此之外的包，但不代表没有。等于是每个默认配置的主键属性，属性名为可自己定义一个来覆盖此属性。需要注意的是，在新版本的文档中，为。通过创建限于篇幅，本小节暂时写到这里。 我的琴声呜咽，我的泪水全无。我把远方的远归还草原。　　　　　　　　　　　　　　　　　　　- 海子《九月》 mongodb安装 什么是Mongodb？就是一个基...

    Dr_Noooo 评论0 收藏0

  • vue2.0开发聊天程序(八) 初步完成

    摘要：主要表现在复杂的语句事务支持等。仅支持，在等浏览器中，会出现样式布局混乱的情况。将群群对应的聊天记录保存在数据库。用户进入群聊，则将其加入到对应的中。文件大小不能超过通过模块操作登录注册将用户名作为唯一值。登录支持自动登录，将密码保存在中。 showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...

    wmui 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhaochunqi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<