成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

zhaochunqi / 2363人閱讀

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

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

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中l(wèi)ink或者main.js也就是入口文件中improt，需要注意的是import不支持使用cdn，所以如果是cdn可以在index.html中l(wèi)ink進來
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.在每個組件中聲明對應的樣式
在每個組件中寫對應的樣式，并且加上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)，動態(tài)數組等情形下。
我在項目中的使用如下：
APP.vue

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

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

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

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

v-leave-active: 定義離開過渡的結束狀態(tài)。在離開過渡被觸發(fā)時生效，在 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沒有臟檢查機制，而是用了基于依賴追蹤的觀察系統(tǒng)。不會像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/...

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

條件渲染
v-if根據條件顯示或隱藏組件

Yes

v-else放在v-if的后面，表示當v-if為false時，要顯示的內容。

Yes


No

v-else-if，顧名思義，用作 v-if 的 else-if 塊?？梢枣準降亩啻问褂茫?/p> 


  A




  B




  C




  Not A/B/C

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

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

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


  
  
這個按鈕被點擊了 {{ counter }} 次。


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

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

按鍵修飾符指按下鍵盤上的某個鍵觸發(fā)此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 }}




           
               
                                           
                       
                 

            
                     
             
               

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

                 
                   
轉載請注明本文地址：http://m.hztianpu.com/yun/81078.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    vue2.0開發(fā)聊天程序(四) 完整體驗一次Vue開發(fā)（下）
    
                                                     
    摘要：用法如下注冊全局的指令注冊一個全局自定義指令當綁定元素插入到中。具體代碼如下當組件中需要用到其他的組件時，需要使用屬性去創(chuàng)建一個哈希表。具體用法如下包含組件引入組件在中添加組件的哈希表收尾除了上面這些屬性，還有一些雜項詳情請看官網

后來我才知道，生活就是個緩慢受錘的過程，人一天天老下去，奢望也一天天消失，最后變得像挨了錘的牛一樣?！　　　　　　　　　　　　　　　　　　　　　　　　　　　?..
    
                                                   
                          
    
                                
    
                                    tinyq
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    vue2.0開發(fā)聊天程序（三）組件的通信
    
                                                     
    摘要：我在中寫了這段代碼在組件被創(chuàng)建時候將會執(zhí)行此函數相當于進入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個回調函數按道理在元素被創(chuàng)建的時候，會將監(jiān)聽到的值賦給并且打印。

天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻　　　　　　　　　　　　　　　　　　——蕭鼎和我
上一節(jié)列出了５個關鍵點，第一個路由已經解決了，接下來解決第二個問題：
組件的通信問題
一、組件的關系
組件之間的關系無非就是兩種父子關系...
    
                                                   
                          
    
                                
    
                                    ddongjian0000
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue2.0開發(fā)聊天程序(五) 客戶端的webScoket
    
                                                     
    摘要：先看看兼容性創(chuàng)建連接構造函數接收兩個參數這里的不能是或者而是對應的或者和是定義的兩種方案，類似于類似于協(xié)議名稱，是可選的。服務端和客戶端的協(xié)議名稱必須一致。協(xié)議有三種注冊協(xié)議，開放協(xié)議，自定義協(xié)議。限制以內就是在構造函數中選傳的參數。

愿天下所有的情侶，都是失散多年的兄妹　　　　　　　　　　　　　　　　　　——好妹妹webScoket是html5提出的一個協(xié)議，咱們用的http是無狀態(tài)...
    
                                                   
                          
    
                                
    
                                    meteor199
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue2.0開發(fā)聊天程序(六) 搞定mongodb
    
                                                     
    摘要：為安裝文件，無需再配置環(huán)境變量。連接操作有以下包作者并未查到除此之外的包，但不代表沒有。等于是每個默認配置的主鍵屬性，屬性名為可自己定義一個來覆蓋此屬性。需要注意的是，在新版本的文檔中，為。通過創(chuàng)建限于篇幅，本小節(jié)暫時寫到這里。

我的琴聲嗚咽，我的淚水全無。我把遠方的遠歸還草原。　　　　　　　　　　　　　　　　　　　- 海子《九月》
mongodb安裝
什么是Mongodb？就是一個基...
    
                                                   
                          
    
                                
    
                                    Dr_Noooo
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue2.0開發(fā)聊天程序(八)  初步完成
    
                                                     
    摘要：主要表現在復雜的語句事務支持等。僅支持，在等瀏覽器中，會出現樣式布局混亂的情況。將群群對應的聊天記錄保存在數據庫。用戶進入群聊，則將其加入到對應的中。文件大小不能超過通過模塊操作登錄注冊將用戶名作為唯一值。登錄支持自動登錄，將密碼保存在中。

showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...
    
                                                   
                          
    
                                
    
                                    wmui
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<