Vue--數據傳輸

王偉廷發布于2019-08-19 18:11 / 1479人閱讀

摘要：本文需要對有一定的基礎，可以通過查看文檔初步了解，以下是自己對數據綁定的總結模板都是可解析的有效的，從根本上不同于基于字符串的模板插值綁定表達式指令帶有前綴的特性參數，用冒號隔開修飾符，用分割值為綁定表達式職責一給特性綁

本文需要對Vue有一定的基礎，可以通過查看文檔初步了解，以下是自己對數據綁定的總結：

Vue.js 模板都是可解析的有效的 HTML，從根本上不同于基于字符串的模板；

插值：

{{綁定表達式}}

指令：

帶有前綴v-的特性；------參數，用冒號":"隔開；---修飾符，用"."分割；

值為 綁定表達式；

//職責一：給DOM特性綁定表達式；
        --------v-bind
        --------參數為DOM特性；
        ---使用指令綁定樣式會自動添加前綴；
        
//職責一：當其表達式的值改變時，把某些特殊的行為應用到DOM上；
    ---無參數
    ---條件指令
    
//職責二：監聽事件
    ---參數為事件類型；
    ---值為方法名；
    ---v-on 提供兩個 事件修飾符：.prevent 與 .stop

過濾器：

添加到表達式的后面，用管道符"|"隔開；

//職責：將表達式的值管輸到過濾器中進行處理并發揮處理結果；
始終以表達式的值為第一個參數；

計算屬性：

當一個數據依賴于其他數據時；

 computed: {
  數據鍵名: {
    get: function () {
      return 表達式
    },
    set: function (newValue) {
        
    }
  }
}

通過組件綁定數據-------父與子之間的通信

子組件用props來定義如何接收外部（父組件）數據；--------父傳子

//子組件需要顯示地用props選項聲明props；------格式類似于data
//prop默認是單向綁定的；
//通過修飾符.sync顯示強制雙向綁定或修飾符.once強制單次綁定；

子組件用自定義事件來向外（父組件）傳遞消息；----------子傳父

//不同于 DOM 事件，Vue 事件在冒泡過程中第一次觸發回調之后自動停止冒泡，除非回調明確返回 true

使用 $dispatch("eventName",this.msg) 派發事件，事件沿著父鏈冒泡；
父組件通過handleIt方法處理數據；

子組件用來將外部（父組件）動態傳入的內容（其它組件或是HTML）和自身模板進行組合；------------父傳子

//命令slot
父組件中顯示地聲明slot特性賦予值-----作為子組件slot標簽的name特性的值；
子組件中命名slot匹配對應的slot特性的內容片段，未命名的slot作為父組件找不到匹配的內容掛載點；
---如果沒有未命名slot，不匹配內容將被拋棄；

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79298.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vue總結系列--數據驅動和響應式

摘要：由于是需要兼容的后臺系統，該項目并不能使用到等技術，因此我在上的經驗大都是使用原生的編寫的，可以看見一個組件分為兩部分視圖部分，和數據部分。在公司里幫項目組里開發后臺系統的前端項目也有一段時間了。 vue這種數據驅動，組件化的框架和react很像，從一開始的快速上手基本的開發，到后來開始自定義組件，對element UI的組件二次封裝以滿足項目需求，期間也是踩了不少坑。由于將來很長一...

AbnerMing 2019-08-22 18:26 評論0 收藏0
Vue組件基礎與通信

摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。 Vue組件基礎與通信一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的...

I_Am 2019-08-26 10:48 評論0 收藏0
前端開發之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0