vue.js小總結

来源:https://www.cnblogs.com/staycat/archive/2018/05/21/9068413.html
-Advertisement-
Play Games

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統; 指令帶有首碼 v-，以表示它們是 Vue 提供的特殊特性; v-for 指令可以綁定數組的數據來渲染一個項目列表; 為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vu ...


Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統;

 

指令帶有首碼 v-，以表示它們是 Vue 提供的特殊特性;

 

v-for 指令可以綁定數組的數據來渲染一個項目列表;

 

為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法;

 

Vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。

 

可以使用 v-bind 指令將待辦項傳到迴圈輸出的每個組件中;

 

一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。

 

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有首碼 $，以便與用戶定義的屬性區分開來。

 

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

 

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。

 

<div v-for="item in items" :key="item.id">

  <!-- 內容 -->

</div>

建議儘可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取性能上的提升。

 

 

可以用 v-on 指令監聽 DOM 事件，併在觸發時運行一些 JavaScript 代碼。

 

示例：

 

<div id="example-1">

  <button v-on:click="counter += 1">Add 1</button>

  <p>The button above has been clicked {{ counter }} times.</p>

</div>

var example1 = new Vue({

  el: '#example-1',

  data: {

    counter: 0

  }

})

 

 

v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

 

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

 

 

<div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的性能。

不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你_不_想阻止事件的預設行為。

 

 

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->

<input v-on:keyup.13="submit">

 

 

 

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>

 

數據顯示綁定：

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

 

 

 

多行文本：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

（js代碼 省略）

 

 

單個覆選框，綁定到布爾值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

 

 

多個覆選框，綁定到同一個數組：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

 

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

 

 

單選按鈕：

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

 

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

 

 

選擇框：

單選時：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

 

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

 

<select> 標簽的 multiple 屬性規定可同時選擇多個選項。

 

多選時 (綁定到一個數組)：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

 

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

 

 

用 v-for 渲染的動態選項：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

 

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

 

 

對於單選按鈕，覆選框及選擇框的選項，v-model 綁定的值通常是靜態字元串 (對於覆選框也可以是布爾值)：

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：

<input v-model.number="age" type="number">

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字元串。

 

 

如果要自動過濾用戶輸入的首尾空白字元，可以給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">

 

 

size.trim().toLowerCase()  trim(): 它的作用是:去除字元串前後的空格.

toLowerCase 方法 (JavaScript): 將字元串中的所有字母字元轉換為小寫形式。

 

 

自 2.3.0 起，非同步組件的工廠函數也可以返回一個如下的對象：

const AsyncComp = () => ({
  // 需要載入的組件。應當是一個 Promise
  component: import('./MyComp.vue'),
  // 載入中應當渲染的組件
  loading: LoadingComp,
  // 出錯時渲染的組件
  error: ErrorComp,
  // 渲染載入中組件前的等待時間。預設：200ms。
  delay: 200,
  // 最長等待時間。超出此時間則渲染錯誤組件。預設：Infinity
  timeout: 3000
})

註意，當一個非同步組件被作為 vue-router 的路由組件使用時，這些高級選項都是無效的，因為在路由切換前就會提前載入所需要的非同步組件。另外，如果你要在路由組件中使用上述寫法，需要使用 vue-router 2.4.0 以上的版本。

 

 

在 HTML 模板中，請使用 kebab-case：

<!-- 在 HTML 模板中始終使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

 

 

組件在它的模板內可以遞歸地調用自己。不過，只有當它有 name 選項時才可以這麼做：

name: 'unique-name-of-my-component'

當你利用 Vue.component 全局註冊了一個組件，全局的 ID 會被自動設置為組件的 name。

Vue.component('unique-name-of-my-component', {
  // ...
})

如果稍有不慎，遞歸組件可能導致死迴圈：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

上面組件會導致一個“max stack size exceeded”錯誤，所以要確保遞歸調用有終止條件 (比如遞歸調用時使用 v-if 並最終解析為 false)。

 

 

假設你正在構建一個文件目錄樹，像在 Finder 或資源管理器中。你可能有一個 tree-folder 組件, 以及一個 tree-folder-contents 組件

 

 

另一種定義模板的方式是在 JavaScript 標簽里使用 text/x-template 類型，並且指定一個 id。例如：

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

 

Vue.component('hello-world', {
  template: '#hello-world-template'
})

這在有很多大模板的演示應用或者特別小的應用中可能有用，其它場合應該避免使用，因為這將模板和組件的其它定義分離了。

我也是初學vue，新人總結不全滿，還望諒解~

 


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

-Advertisement-
Play Games
更多相關文章
  • canvas之背景特效
    需具備js基礎知識以及canvas相關方法(可查閱相關文檔) 下麵是一篇有關js與canvas的背景特效 基於面向過程的思維 ...
  • Vue.js 相關知識（路由）
    1. 簡介 路由，工作原理與路由器相似（路由器將網線匯流排的IP分發到每一臺設備上），Vue中的路由根據用戶在網頁中的點擊，將其引導到對應的頁面。 2. 使用步驟 安裝vue-router或者直接引入vue-router.js（下載地址：https://router.vuejs.org/） 例：SPA ...
  • 初識HTML和WEB標準
    什麼是 HTML？ * HTML 超文本標記語言的縮寫(**H**yper **T**ext **M**arkup **L**anguage) * HTML 並不是編程語言，而是一種標記語言(markup language) * 標記 <英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組... ...
  • jquery方法.serializeArray()獲取name和value並轉為json數組
    jquery的.serializeArray()方法可以獲取形如以下 name value組成的對象數組，如果我們想得到key為name,value為value的json對象，則如下轉換： 但是這麼轉換有一個弊端，就是checkbox，覆選框有多個name相同的值，最後只留下了最後一個，如果想把覆選 ...
  • 【百度地圖API】如何給自定義覆蓋物添加事件
    摘要： 給marker、lable、circle等Overlay添加事件很簡單，直接addEventListener即可。那麼，自定義覆蓋物的事件應該如何添加呢？我們一起來看一看~ 一、定義構造函數並繼承Overlay 二、初始化自定義覆蓋物 三、繪製覆蓋物 四、添加覆蓋物 五、給自定義覆蓋物添加事 ...
  • Vue.js 相關知識（動畫）
    1. 簡介 Vue 在插入、更新或移除 DOM 時，提供多種不同方式的過渡效果，並提供 transition 組件來實現動畫效果（用 transition 組件將需執行過渡效果的元素包裹） 語法：<transition name=””>元素或組件（進入或離開時會有動畫效果）</transition> ...
  • JavaScript 變數和函數提升問題總結
    一　什麼是JavaScript 變數提升？ -- JS程式運行時， （a）變數的聲明會被解釋器"提升"到方法體內的頂部，初始化賦值操作不提升按順序執行 （b）函數體內未聲明的變數，解釋器會在函數體外聲明變數，成為全局變數 （c）聲明過的函數，整個函數體會被解釋器提升到方法體的頂部，初始化賦值操作按順 ...
  • EJS-初識
    項目中使用了EJS，因此，也開始接觸了EJS。 EJS官方定義：it's just plain JavaScript。 總的來說，上手較快（畢竟我是個菜鳥）。 第一步：安裝： 第二部使用： 在html中，嵌套ejs標簽。 使用較多的是：<%，這個的作用是控制流。代碼實例： 其實很簡單，就是正常的ht ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類