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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類