Vue之數據綁定

来源:https://www.cnblogs.com/mingqi-420/archive/2019/08/13/11345594.html
-Advertisement-
Play Games

數據綁定是將視圖和數據相關聯，當數據發生變化時，可以自動更新視圖，本文介紹vue,js中數據綁定的語法 （1）插值 文本插值是最基本的形式 使用雙大括弧{{}}，例如<span>數據：{{text}}</span>，當text的值改變時，文本中的值也會聯動的發生變化。例如： 大括弧裡面的值被替換為《 ...


 數據綁定是將視圖和數據相關聯，當數據發生變化時，可以自動更新視圖，本文介紹vue,js中數據綁定的語法

（1）插值
       文本插值是最基本的形式 使用雙大括弧{{}}，例如<span>數據：{{text}}</span>，當text的值改變時，文本中的值也會聯動的發生變化。例如：

<div  id="app">
         {{book}}
</div>
<scrip>
       var app=new Vue({
             el:"#app"
             data:{
                   book:'《天涯明月刀》'
             }
})
</scrip>

   大括弧裡面的值被替換為《天涯明月刀》，通過任何方式修改book，大括弧裡面的值都會被實時替換，比如下麵這個例子，實時顯示當前的時間 每秒顯示

<div id="Date">
          {{datetime}}
 </div>
<scrip>
       var date = new Vue({
           el: "#Date",
           data: {
               datetime:new Date()
           },
           mounted: function ()
           {
               var _this = this;//聲明一個變數指向當前Vue實例
               this.timer=setInterval(function(){
                 _this.datetime=new Date();//修改數據date
               },1000)
           },
           beforeDestroy: function ()
           {
               if (this.timer)
               {
                   setInterval(this.timer);//在Vue實例銷毀前，清除我們的定時器
               }
           }
       })
</scrip>

　這裡的{{datetime}}輸出的是瀏覽器預設的時間格式，大家可以通過一些函數進行格式化轉換，稍後會通過Vue的過濾器（filter）或計算屬性（computed）也可以實現，以後我會介紹到　

     如果有時候就是想輸出html，而不是將數據解釋後的純文本，可以使用v-html

<div id="html">
          <span v-html="link"></span>
 </div>
<script>
       var html = new Vue({
           el: "#html",
           data: {
               link:"<a href='#'>這是一個連接</a>"
           }
       })
</script>

     link的內容將會被渲染成一個基友點擊功能的a標簽，而不是純文本。這裡需要註意，如果將用戶產生的內容使用v-html輸出後，可能導致XSS攻擊，所以要在服務端對用戶提交的內容進行處理，一般可將'<>'尖括弧轉義。

    如果想顯示{{}}標簽，而不進行替換，使用v-pre即可跳過這個元素和他子元素的編譯過程，例如：<span v-pre＞{{這裡的內容是不會被編譯的門}}＜/span>

有時候只需渲染一次數據，後續數據變化不再關心，可以通過“*”實現 ，<span>數據：{{*text}}</span>，雙大括弧標簽會把裡面的值全部當做字元串來處理，如果是html片段，則可以使用三個大括弧來綁定：<div>Logo:{{{logo}}}</div> logo:'<span>ddfe</span>'
雙大括弧標簽還可以放進html標簽中
<li data-id='{{id}}'></li>
註意 ：vue指令和自身特性內是不可以插值的，如果用錯了地方，vue.js會發出警告
（2）表達式
可有js表達式和過濾器構成，過濾器可以沒有，也可以有多個
{{cents/100}}//在原始值上除以100
{{true？1:0}}//三元表達式
{{example.split(",")}}//js 函數
（2）、過濾器：

   Vue.js支持在{{}}插值的尾部添加一個“（|）”管道符對數據進行過濾，經常用於格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。過濾規則是自定義的，通過給Vue實例添加選項filters來設置，例如在之前實時顯示當前時間的示例，可以對時間進行格式化處理

  <div id="formatDate">
          {{datetime|formatDate}}
  </div>
<script>
       var padDate = function (value) {
           return value < 10 ? '' + value : value;
       };
       var formatDate = new Vue(
           {
               el: '#formatDate',
               data: {
                   datetime: new Date()
               },
               filters: {
                   formatDate: function (value)//這裡的value是需要過濾的數據
                   {
                       var date = new Date();
                       var year = date.getFullYear();
                       var month = padDate(date.getMonth() + 1);
                       var date1 = padDate(date.getDate());
                       var hours = padDate(date.getHours());
                       var minutes = padDate(date.getMinutes());
                       var Seconds = padDate(date.getSeconds());
                       return year + '-' + month + '-' + date1 + ' ' + hours + ':' + minutes + ':' + Seconds;

                   }
               },
               mounted: function () {
                   var _this = this;//聲明一個變數指向當前Vue實例
                   this.timer = setInterval(function () {
                       _this.datetime = new Date();//修改數據date
                   }, 1000)
               },
               beforeDestroy: function () {
                   if (this.timer) {
                       setInterval(this.timer);//在Vue實例銷毀前，清除我們的定時器
                   }
               }
       })
</script>

過濾器也可以串聯，也可以接受參數，例如：{{message|filterA|FilterB}}，{{message|filterA（'arg1','arg2'）},這裡的arg1和arg2將分別傳給過濾器第二個參數和第三個參數，因為第一個參數是數據本身。過濾器應當用於處理簡單的文本轉換，如果實現更為複雜的數據變換，應使用計算屬性
（3）指令
帶有v-首碼的特殊特性，其值限定為綁定表達式，也就是js表達式和過濾器。作用 是當表達式的值發生變化時，將這個變化也反應到DOM上。例如<div v-if="show">DDEF</div> ,當show為true時，展示DDEF字樣，否則不展示。還有一些指令語法稍有不同，在指令和表達式之間插一個參數，用：隔開，如v-blind指令，基本用途是動態更新html上的元素，比如id、class 等
<a v-blind:href="url"></a>
<div v-on:click="action"></div>  他用來綁定時間監聽器，這樣我們就可以做一些交互了，例如

<div id="app">
            <ul>
               <!-- <li v-for="book in books">{{book.name}}</li>-->

            </ul>
          <!--  <input type="text" v-model="name" placeholder="你的名字"/>
            <h1>你好，{{name}}</h1>-->
            <a v-bind:href="url">百度一下</a>
            <p v-if="show">這是一段文本</p>
            <button v-on:click="HandleClose">點擊隱藏</button>
  </div>
<script>
       var app= new Vue({
            el: '#app',
            data: {
                name: 2,
                url: "https:baidu.com",
                show: true
            },
            methods:
                {
                    HandleClose: function ()
                    {
                        //alert(44);
                        this.show = false;
                    }
                }
       });
</script>

         在button 按鈕上，使用v-on給該元素綁定了一個點擊時間，在普通元素上，v-on可以監聽原生的dom事件，除啦click外，還有dblclick，keyup、mouseove等，表達式可以是一個方法名，這些方法都是卸載Vue實例的methods屬性內，並且是函數的形式，函數內的this指向的是當前Vue實例本身，因此可以直接使用this.XXX的形式來訪問或修飾數據，如例子中的this.show=false;把數據show修改為了false，所以點擊按鈕時，文本p元素也就被移除了

        表達式除了方法名，也可以直接是內聯語句，如果綁定的事件要處理複雜的業務邏輯，建議還是在methods里聲明一個方法，這樣可讀性更強，也更好維護。Vue.js將method里的方法也代理了，所以也可以像訪問數據一樣來調用方法

    var app= new Vue({
            el: '#app',
            data: {
                name: 2,
                url: "https:baidu.com",
                show: true
            },
            methods:
                {
                    HandleClose: function ()
                    {
                        //alert(44);
                       this.close()
                    }
                    close:function（）
                    {
                       this.show = false;
                   }
                }
       });

（4）分隔符
vue.js中的數據綁定的語法被設計成可配置的，如果不習慣預設的風格的語法，可以自己設置
我們可以在Vue.config中配置的語法Vue.config是一個對象，包含了所有vue.js的全局配置，可以在實例化Vue前修改其中的屬性。分隔符在Vue.config中的源碼定義如下：
let delimiters=['{{','}}']
let unsafeDelimiters=['{{{','}}}']
delimiters
Vue.config.delimiters=["<%","%>"],如果修改了預設文本插值的分隔符，則文本的插值語法有{{example}}變更為<%example%>
unsafeDelimiters
Vue.config.unsafeDelimiters=["<$","$>"],如果修改了預設html插值的分隔符，則文本的插值語法有{{{example}}}變更為<$example$>

(5)語法糖

   語法糖是在不影響功能的前提下，添加某種方法實現同樣的效果，從而方便程式開發

   Vue.js的v-blind和v-on指令都提供了語法糖，也可以說是縮寫，比如v-bind可以省略v-blind直接用一個冒號“：”

    <a v-blind:href="url">鏈接</a>         

     <img v-blind:src="ImgUrl">鏈接</img >縮寫為     

    <a :href="url">鏈接</a>         

    <img :src="ImgUrl">鏈接</img >

v-on可以直接用“@”代替

<button v-on:click="HandleClose">點擊隱藏</button> 縮寫為<button @click="HandleClose">點擊隱藏</button>
使用語法糖可以簡化代碼的書寫，以後的學習中會儘量的使用這種語法糖的寫法

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • React 練習項目，仿簡書博客寫作平臺
    Introduction 技術棧：react + redux + react router + express + Nginx 練習點： redux 連接 react router 路由跳轉 scss 樣式書寫 容器組件與展示組件的設計 express 腳手架項目結構設計 用戶信息持久化（cooki ...
  • 兩張圖解釋原型與原型鏈
    上面這張圖出自 "冴羽的博客" ，這張圖已經能很好地解釋原型與原型鏈了，其涉及到的屬性如下： : 每個函數都有一個 prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共用的屬性和方法，如果使用這個函數生成了實例，那麼稱這個對象為所有實例的 ...
  • 淺談前端模塊化規範
    @[toc] 推薦閱讀 "掘金 前端模塊化" "模塊化七日談" 部分內容摘自《移動 Web 前端高效開發實踐》 iKcamp 著 為什麼需要模塊化？ JavaScript 發展初期，代碼簡單地堆積在一起，只要能順利地從上往下一次執行即可。但隨著網站越來越複雜，實現網站功能的 JavaScript 代 ...
  • 實現ssr服務端渲染demo
    最近在研究SSR伺服器端渲染，自己寫了的小demo。 項目佈局 註：以防版本不對應產生的問題。package.json我也把放出來了，不過在文章的最後面 上圖是Vue官方的SSR原理介紹圖片。從這張圖片，我們可以知道：我們需要通過Webpack打包生成兩份bundle文件： Client Bundl ...
  • 前端開發HTML&CSS入門——具體是做什麼的
    軟體開發，一提起來感覺這個感覺這個詞範圍很大很廣，說起來也很籠統。不知所云，開發的到底是什麼？或者說開發的具體內容是什麼？以前我們講軟體開發主要是分前端和後端，那前端和後端又是什麼那？你可以這麼通俗的理解，前端就是用戶可以看到的界面，而後端就是客戶看不到的模塊。現在我們已經摒棄了這種說法，因為這種說 ...
  • 用js傳遞當前頁面的url，丟失了&後面的參數 解決辦法
    問題：因為登陸是用ajax傳值的，在哪個頁面點擊登陸的，登陸成功跳到再跳回那個頁面，之前直接傳遞的是 解決方法： 用js的函數 返回值 URIstring 的副本，其中的某些字元將被十六進位的轉義序列進行替換。 說明 該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進 ...
  • web前端面試題總結（html、css）
    1.對 WEB 標準以及 W3C 的理解與認識？ 參考： 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈 css 和 js 腳本、 結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更 廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動 ...
  • JavaScript事件的基本學習
    ...
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統學習（BaseCity頁面）
    C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手，剛進公司跟領導報道，我說我是java全棧，他問我會不會C#，我說大學學過，他說這個TMS系統就給你來管了。外包已經把代碼給我了，這幾天先把增刪改查的代碼背一下，說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • C# - 委托與事件
    委托與事件 委托 委托的定義 委托是C#中的一種類型，用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法，實現回調、事件處理和動態調用等功能。通俗來講，就是委托包含方法的記憶體地址，方法匹配與委托相同的簽名，因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法：委托允許存儲對方法的引用， ...
  • 解析 ABP vNext 依賴註入實現【屬性註入】的原理
    前言 這幾天閑來沒事看看ABP vNext的文檔和源碼，關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式，構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下： 這時候我就開始疑惑了，因為我知道 ...
  • C#TMS系統學習（ShippingNotice頁面）
    C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面，ok，領導開完會就被裁掉了，很突然啊，他收拾東西的時候我還以為他要旅游提前請假了，還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走，怕被偷嗎？還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多，這邊的 ...
  • C#動態查詢：巧用Expression組合多條件表達式
    概述：在C#中，通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`，實現多條件動態查詢。通過創建表達式樹，可輕鬆構建複雜的查詢條件。 在C#中，可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 在Biwen.QuickApi中整合一個極簡的發佈訂閱(事件匯流排)
    閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • WPF 穩定的全屏化視窗方法
    1. 案例 成某三甲醫預約系統， 該項目在2024年初進行上線測試，在正常運行了兩天後，業務系統報錯：The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用
    背景 我們有些工具在 Web 版中已經有了很好的實踐，而在 WPF 中重新開發也是一種費時費力的操作，那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF？莫問為什麼，老 C# 開發的堅持，另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • C#事件
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 發佈到 Win7+
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
所有分類