Vuejs 基礎與語法

来源:https://www.cnblogs.com/evenyao/archive/2018/09/06/9596714.html
-Advertisement-
Play Games

Vue 實例 創建第一個實例 {{}} 被稱之為插值表達式。可以用來進行文本插值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...


Vue 實例

創建第一個實例

{{}} 被稱之為插值表達式。可以用來進行文本插值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue入門</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">{{msg}}</div>

  <script>
    new Vue({
      el: "#root",
      data: {
        msg: "hello world"
      }
    })
  </script>
</body>
</html>
View Code

JSbin 預覽

實例、掛載點、模板

實例里，需指定掛載點，模板

 

模板指的是掛載點內部的內容：

  • 可以卸載掛載點內部
  • 也可以卸載實例的 template 屬性裡面
<script src="./vue.js"></script>
  <div id="root"></div>
  <script>
    new Vue({
      el: "#root",
      template: '<h1>hello {{msg}}</h1>',
      data: {
        msg: "world"
      }
    })
  </script>
View Code

JSbin 預覽

 

數據展示 事件綁定 方法定義

v-text / v-html

類似於原生JS中的 innerText 與 innerHtml

JSbin 預覽

<script src="./vue.js"></script>
  <div id="root">
    <div v-text="content"></div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </script>
View Code 



 

JSbin 預覽

<script src="./vue.js"></script>
  <div id="root">
    <div v-html="content"></div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </script>
View Code

 

v-on 事件

通過 v-on 給元素綁定事件，事件觸發之後執行的方法寫在 Vue 實例裡面的 methods 方法里，這樣方法裡面的事件就可以執行了。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div>   <!-- 添加v-on:click事件 -->
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert(123)
        }
      }
    })
  </script>
</body>
View Code

JSbin 預覽

Vue 中的 DOM 改動

在Vuejs中想要改變數據的顯示，不要去改變 DOM。直接改變數據即可。當數據發生變化的時候，Vue會自己去改變 DOM。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div> 
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert('yes')
          this.content = "clicked"    //改變數據
        }
      }
    })
  </script>
</body>
View Code

JSbin 預覽
從這個案例可以看出 Vuejs 不再面向 DOM 進行操作，而是面向數據進行操作。

@

v-on: 可以簡寫成 @，即

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div @click="handleClick">{{content}}</div> 
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert('yes')
          this.content = "clicked"    //改變數據
        }
      }
    })
  </script>
</body>
View Code

 

屬性綁定和雙向數據綁定

屬性綁定 v-bind:

當滑鼠放置到這個div上的時候，會顯示出title，內容是 this is hello world

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div title="this is hello world">hello world</div>
  </div>

  <script>
    new Vue({
      el: "#root"
    })
  </script>
</body>
View Code

 

我們希望title可變，所以我們在實例裡面，去定義一個 title。並使用 v-bind:將 title與 title 數據項做一個綁定。 如果想改變內容，只需要改變title的數據就可以了。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div v-bind:title="title">hello world</div>     <!-- 使用v-bind:進行綁定 -->
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world"
      }
    })
  </script>
</body>
View Code

JSbin 預覽

 

當使用類似於 v-bind:title 的模板指令，相應的=後面的內容就不再是一個字元串，而是一個 JS 的表達式。
即v-bind:title="title" 後面的"title" 表示實例中 data 裡面的 title。

：

v-bind:可以簡寫成:，即

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>     <!-- 使用 :title 進行綁定 -->
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world"
      }
    })
  </script>
</body>
View Code

 

雙向數據綁定 v-model

在這個案例中，有一個input標簽，使用 :value="content" 數據進行綁定

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>
    <input :value="content"/>
    <div>{{content}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world",
        content: "this is content"
      }
    })
  </script>
</body>
View Code

 

但是數據並沒有發生同步變化，因為如果數據發生改變，下麵展示的內容，也會根據輸入的內容發生相應的變化。所以這裡的改變，僅僅是改變了input標簽中的value值，並沒有使data中的content發生變化。

 

 

 

所以我們使用 v-model 這個模板指令，進行數據雙向綁定。

<script src="./vue.js"></script>
<body>
  <div id="root">
    <div :title="title">hello world</div>
    <input v-model="content"/>
    <div>{{content}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        title: "this is hello world",
        content: "this is content"
      }
    })
  </script>
</body>
View Code

 

JSbin 預覽
在input標簽中，使用v-model就可以完成雙向數據的綁定，效果如下圖。

計算屬性和偵聽器

計算屬性 computed

在這個案例中，使用上面已經提到過的v-model進行雙向數據綁定之後，在input標簽中輸入相應的數據，會把firstName和lastName拼裝好了之後在div中一起展現出來。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{firstName}}{{lastName}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: ''
      }
    })
  </script>
</body>
View Code

JSbin 預覽


我們通過改造，將firstName和lastName糅合成一個變數，取名為fullName。即fullName是通過firstName和lastName計算而成的一個新的變數。遇到這種情況，通過計算屬性解決。

在Vue的實例配置對象裡面，配置computed對象屬性，在裡面定義一個fullName函數，返回值是 this.firstName + ' ' + this.lastName

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: ''
      },
      computed: {  //定義一個computed對象，在裡面定義fullName函數
        fullName: function(){
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>
</body>
View Code

JSbin 預覽

computed 值的是一個屬性，通過其他屬性計算而來。優點是 computed 中參與計算的值如果都沒有改變，會使用上一次計算得到的緩存結果，不會重新計算。只有參數計算的值發生變化的時候，才會重新計算。

偵聽器 watch

監聽某一個數據的變化，一旦數據發生變化，就可以在偵聽器中實現某個業務邏輯。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>

  <script>
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: '',
        count: 0  //定義變數 count，預設值為 0
      },
      computed: {
        fullName: function(){
          return this.firstName + ' ' + this.lastName
        }
      },
      watch: {  //定義偵聽器
        firstName: function(){   //監聽 firstName 的變化
          this.count ++
        },
        lastName: function(){   //監聽 lastName 的變化
          this.count ++
        }
      }
    })
  </script>
</body>
View Code

JSbin 預覽

通過watch的形式進行偵聽器的定義。
當對fristName或lastName做任意的變更，count 數值 +1

當然我們也可以只對 fullName 做監聽，即針對計算屬性做監聽。

<script src="./vue.js"></script>
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 快速配置webpack
    區分開發模式和生產模式： npm run start——開發模式，啟用devServer，文件的改動實時更新、刷新 npm run build——生產模式，打包文件到dist文件夾 ...
  • 用原生js對錶格排序
    阿裡的模擬筆試題，當時時間有限沒寫出來，其實是因為自己對原生dom操作不熟悉，這裡補一下。 題目的大意是有一個表格，如代碼所示 大概長這樣吧，註意有表頭，然後讓你寫一個函數對錶中的記錄，比如按idx升序排序 思路：就將表中的數據全都取出來，排序之後重新建表。 代碼 要記住的點就是，querySele ...
  • css居中那些事
    一、css垂直居中 1.line-height(適用於單行文本居中) eg: html:<p class="wordp">123</p>- css: .wordp{width:100px;line-height:50px;background:yellow;color:#fff} 2.:befor+ ...
  • es6之Object擴展及內部屬性的總結
    對象擴展： 1、Object.is(A,B) :比較兩個值是否相等,取代 運算；只要值相等代表相等；其中NAN和NAN相等；+0和-0不相等； 2、Object.assign(target,source1,source2.......) :合併源對象的所有可枚舉屬性到目標對象；同名屬性後覆蓋前；ju ...
  • html5中如何去掉input type date預設
    html5中如何去掉input type date預設樣式 2.對日期時間控制項的樣式進行修改目前WebKit下有如下9個偽元素可以改變日期控制項的UI：::-webkit-datetime-edit – 控制編輯區域的::-webkit-datetime-edit-fields-wrapper – 控 ...
  • 【Node】node.js 模塊和其下載資源的鏡像設置
    以前安裝 時總是失敗，然後就在 上下載好相應版本的文件放到用戶目錄來解決問題。 後來研究發現 不僅可以設置 模塊倉庫的代理， 同樣可以設置像 "electron" 、 "phantomjs" 、 "node sass" 等模塊的鏡像代理 <! more 一、設置淘寶鏡像 （共三種方法） 1.環境變數 ...
  • webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架
    VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這裡分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務，也集成在裡面，整體初現雛形，還有很多需要優化和改善的地方。。。 ...
  • Vue表格中，對數據進行轉換、處理
    眾所周知，後端從Mysql取出的數據，一般是很難單獨處理某一個Key的數據的（需要處理的話，可能會浪費大量的性能。而且對頁面載入時間有很大的影響），所以，從資料庫取出的數據。只能由前端進行處理。但是在Vue中，如果採用了element等組件，利用數據綁定的特性，也是很難對錶格遍歷的數據進行單獨行的處 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類