成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue2.0開發(fā)聊天程序(四) 完整體驗(yàn)一次Vue開發(fā)（上）

zhaochunqi / 2319人閱讀

摘要：在離開過渡被觸發(fā)時(shí)生效，在完成之后移除?？梢枣?zhǔn)降亩啻问褂煤陀梅ㄏ嗤?，但是的元素會始終渲染并保存在中，只是改變值。用法如下對應(yīng)前面的數(shù)據(jù)

在我一生的黃金時(shí)代,我有好多奢望。我想愛,想吃,還想在一瞬間變成天上半明半暗的云。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——王小波
上一章研究了vue中組件的通信，算是對vue的組件通信有了大致的了解。綜合上三章對搭建項(xiàng)目也算是心有成竹了，這一章我將把自己在開發(fā)整個(gè)項(xiàng)目時(shí)的一些總結(jié)分享給大家。

X-chat項(xiàng)目github地址：https://github.com/ermu592275...
X-chat是我仿照別人項(xiàng)目的UI純手打的，在這里表示感謝，同時(shí)貼上CookIM(我仿照的項(xiàng)目)的地址：
碼云地址：http://git.oschina.net/cookee...
演示地址：https://im.cookeem.com/chat/#...

一、關(guān)于CSS
眾所周知，vue組件的css樣式可以寫在中，當(dāng)然也可以寫成一個(gè)css文件然后link進(jìn)去。
我在項(xiàng)目中對于CSS的寫法如下：

1.使用bootstarp.css

安裝npm install bootstarp --save
引入有兩種方法：在index.html中l(wèi)ink或者main.js也就是入口文件中improt，需要注意的是import不支持使用cdn，所以如果是cdn可以在index.html中l(wèi)ink進(jìn)來
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目錄下創(chuàng)建了base.css將reset樣式以及公共的樣式都放在了base.css中，也在main.js中引入

import "./base.css"

3.在每個(gè)組件中聲明對應(yīng)的樣式
在每個(gè)組件中寫對應(yīng)的樣式，并且加上scoped顯示樣式的作用域，能有效的防止樣式?jīng)_突，從此不再為css樣式的命名而頭疼。

如果要使用sass或less語法，請參考：https://segmentfault.com/a/11...

4.過渡效果

組件的切換，要是能加上過渡效果就更好了。在vue中可以通過一下方式實(shí)現(xiàn)過渡效果：

在 CSS 過渡和動畫中自動應(yīng)用 class

可以配合使用第三方 CSS 動畫庫，如 Animate.css

在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

我在項(xiàng)目中使用了animate.css，用法和bootstarp十分相似，只需要安裝之后在main.js中引入就可以了。

npm install animate.css --save

main.js

import "animate.css/animate.css"

也使用了Vue提供的transition封裝組件，transition多用在條件渲染(v-if)，動態(tài)數(shù)組等情形下。
我在項(xiàng)目中的使用如下：
APP.vue

transition有四個(gè)類名，用于定義enter/leave的過渡效果：

v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除。

v-enter-active: 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時(shí)生效，在 transition/animation 完成之后移除。

v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除。

v-leave-active: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在 transition/animation 完成之后移除。

在項(xiàng)目中使用到的CSS相關(guān)暫時(shí)是這些，其他坑留著以后踩。

二、關(guān)于template
template包含了html的代碼，vue和angular一樣，也有自己的模版語法，可大致分為以下幾類：

賦值 包括{{}} v-html v-bind等

控制 包括 v-if v-on等

過濾 vue2.0廢棄了自帶的fitler，現(xiàn)在只能自己寫了

首先聲明，以下內(nèi)容大多是從vue官網(wǎng)中copy過來的，只是為了做一個(gè)總結(jié)性的概述，滿足喜歡快速閱讀的朋友，更詳細(xì)的內(nèi)容請移步到官網(wǎng)中。
賦值
所謂賦值，就是把Vue實(shí)例中的數(shù)據(jù)（data聲明的部分）渲染到html中。vue相比angular沒有臟檢查機(jī)制，而是用了基于依賴追蹤的觀察系統(tǒng)。不會像angular那樣watcher越多，越來越慢。
賦值有一下幾種方式：

{{}} 最常見的方式

Message: {{ msg }}

v-once一次性插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會改變

This will never change: {{ msg }}

v-html 插入html文本的時(shí)候用此方式

v-bind 為屬性賦值時(shí)使用此方式，可以簡寫為:

其中css的綁定如下：

v-for用于以數(shù)組的形式渲染html

    
  
  • 
    {{ item.message }}
  
    •

v-model 雙向數(shù)據(jù)綁定，不同的類型綁定的方式個(gè)有不同，下面是一個(gè)input類型的簡單事例，其他類型請看文檔：http://cn.vuejs.org/v2/guide/...



Message is: {{ message }}

以上就是賦值操作的簡單介紹，更多復(fù)雜的操作（特別是v-bind:class和v-for）請閱讀官網(wǎng)http://cn.vuejs.org/v2/guide/...

控制
我在這里將條件渲染和事件監(jiān)聽歸于控制一類，其實(shí)不太好，但是又不知道該怎么分。有點(diǎn)牽強(qiáng)，厚著臉皮往下寫

條件渲染
v-if根據(jù)條件顯示或隱藏組件

Yes

v-else放在v-if的后面，表示當(dāng)v-if為false時(shí)，要顯示的內(nèi)容。

Yes


No

v-else-if，顧名思義，用作 v-if 的 else-if 塊。可以鏈?zhǔn)降亩啻问褂茫?/p> 


  A




  B




  C




  Not A/B/C

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

Hello!
v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。

事件監(jiān)聽
v-on: 監(jiān)聽DOM事件觸發(fā)綁定的methods。


  
  
這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。


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

可以簡寫為@click="counter += 1"。vue還提供了事件修飾符和按鍵修飾符.
事件修飾符比如阻止冒泡：

按鍵修飾符指按下鍵盤上的某個(gè)鍵觸發(fā)此methods，比如enter鍵：

還可以自定義按鍵修飾符：

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

過濾
改變數(shù)據(jù)顯示的方式而不改變數(shù)據(jù)原本的值，不如時(shí)間顯示格式改為yyyy-MM-dd但原本的date對象不會改變。vue2.0廢棄了之前1.0上的所有自帶過濾器，現(xiàn)在要自己寫了。用法如下：


{{ msg| capitalize }}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81078.html

相關(guān)文章

  • vue2.0開發(fā)聊天程序(四) 完整體驗(yàn)一次Vue開發(fā)（下）

    摘要：用法如下注冊全局的指令注冊一個(gè)全局自定義指令當(dāng)綁定元素插入到中。具體代碼如下當(dāng)組件中需要用到其他的組件時(shí)，需要使用屬性去創(chuàng)建一個(gè)哈希表。具體用法如下包含組件引入組件在中添加組件的哈希表收尾除了上面這些屬性，還有一些雜項(xiàng)詳情請看官網(wǎng) 后來我才知道，生活就是個(gè)緩慢受錘的過程，人一天天老下去，奢望也一天天消失，最后變得像挨了錘的牛一樣?！　　　　　　　　　　　　　　　　　　　　　　　　　　　?..

    tinyq 評論0 收藏0

  • vue2.0開發(fā)聊天程序（三）組件的通信

    摘要：我在中寫了這段代碼在組件被創(chuàng)建時(shí)候?qū)?zhí)行此函數(shù)相當(dāng)于進(jìn)入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個(gè)回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候，會將監(jiān)聽到的值賦給并且打印。 天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻　　　　　　　　　　　　　　　　　　——蕭鼎和我 上一節(jié)列出了５個(gè)關(guān)鍵點(diǎn)，第一個(gè)路由已經(jīng)解決了，接下來解決第二個(gè)問題： 組件的通信問題 一、組件的關(guān)系 組件之間的關(guān)系無非就是兩種父子關(guān)系...

    ddongjian0000 評論0 收藏0

  • vue2.0開發(fā)聊天程序(五) 客戶端的webScoket

    摘要：先看看兼容性創(chuàng)建連接構(gòu)造函數(shù)接收兩個(gè)參數(shù)這里的不能是或者而是對應(yīng)的或者和是定義的兩種方案，類似于類似于協(xié)議名稱，是可選的。服務(wù)端和客戶端的協(xié)議名稱必須一致。協(xié)議有三種注冊協(xié)議，開放協(xié)議，自定義協(xié)議。限制以內(nèi)就是在構(gòu)造函數(shù)中選傳的參數(shù)。 愿天下所有的情侶，都是失散多年的兄妹　　　　　　　　　　　　　　　　　　——好妹妹webScoket是html5提出的一個(gè)協(xié)議，咱們用的http是無狀態(tài)...

    meteor199 評論0 收藏0

  • vue2.0開發(fā)聊天程序(六) 搞定mongodb

    摘要：為安裝文件，無需再配置環(huán)境變量。連接操作有以下包作者并未查到除此之外的包，但不代表沒有。等于是每個(gè)默認(rèn)配置的主鍵屬性，屬性名為可自己定義一個(gè)來覆蓋此屬性。需要注意的是，在新版本的文檔中，為。通過創(chuàng)建限于篇幅，本小節(jié)暫時(shí)寫到這里。 我的琴聲嗚咽，我的淚水全無。我把遠(yuǎn)方的遠(yuǎn)歸還草原。　　　　　　　　　　　　　　　　　　　- 海子《九月》 mongodb安裝 什么是Mongodb？就是一個(gè)基...

    Dr_Noooo 評論0 收藏0

  • vue2.0開發(fā)聊天程序(八) 初步完成

    摘要：主要表現(xiàn)在復(fù)雜的語句事務(wù)支持等。僅支持，在等瀏覽器中，會出現(xiàn)樣式布局混亂的情況。將群群對應(yīng)的聊天記錄保存在數(shù)據(jù)庫。用戶進(jìn)入群聊，則將其加入到對應(yīng)的中。文件大小不能超過通過模塊操作登錄注冊將用戶名作為唯一值。登錄支持自動登錄，將密碼保存在中。 showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...

    wmui 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<