vue起步

来源:https://www.cnblogs.com/crazy-lc/archive/2019/12/23/12084136.html
-Advertisement-
Play Games

1.vue構造器: var v=new Vue({ ......... }) <div id="d1"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/ ...


1.vue構造器:

var v=new Vue({

.........

})

<div id="d1">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript"> var vm = new Vue({ el: '#d1', data: { site: "哈哈", url: "www.baidu.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 你就知道!"+this.alexa; } } }) </script>

在 Vue 構造器中有一個el 參數,它是 DOM 元素中的 id。在上面實例中 id 為 d1,在 div 元素中:

<div id = "d1"></div>

這意味著我們接下來的改動全部在以上指定的 div 內,div 外部不受影響。

如何定義數據對象:

1.data 用於定義屬性,實例中有三個屬性分別為:site、url、alexa。

2.methods 用於定義的函數,可以通過 return 來返回函數值。

3.{{ }} 用於輸出對象屬性和函數返回值。

運行結果:


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

-Advertisement-
Play Games
更多相關文章
  • 場景 Android Studio 中文社區: http://www.android-studio.org/ 下載安裝包,這裡選擇64位Windows 等待下載完成。 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程 ...
  • 普通的相機調用,在 intent 傳進去一個路徑,然調用這個意圖。 在測試機 榮耀 8X 上是沒有問題的,能獲取到拍的照片。 在小米系統和 華為麥芒4上就不行,路徑上就沒有照片。 ...
  • <EditText android:id="@+id/et_2" android:layout_width="match_parent" android:layout_height="50dp" android:textColor="#FFC107" android:layout_below="@i ...
  • iOS核心動畫高級技巧 - 1 iOS核心動畫高級技巧 - 2 iOS核心動畫高級技巧 - 3 iOS核心動畫高級技巧 - 4 iOS核心動畫高級技巧 - 5 iOS核心動畫高級技巧 - 6 iOS核心動畫高級技巧 - 7 15. 圖層性能 圖層性能 要更快性能,也要做對正確的事情。 ——Steph ...
  • 1 function GetTime(firstDate, secondDate) { 2 // 1.對事件進行處理 3 var firsttime = Date.parse(firstDate + " 00:00:00"); 4 var secondtime = Date.parse(second ...
  • jstree設置插件checkbox只允許單選 jstree version 3.3.8 單選配置參數: $.jstree.defaults.core.multiple 示例: ...
  •  HTML基本語法 認識網頁 網頁主要由文字、圖像和超鏈接等元素構成。當然,除了這些元素,網頁中還可以包含音頻、視頻以及Flash等。 常見瀏覽器內核介紹 瀏覽器是網頁運行的平臺,常用的瀏覽器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我們平時稱為五大瀏覽器。 ...
  • 內網穿透 相信很多人都會想把自己的電腦做成伺服器,然後掛上網站,讓別人可以訪問自己的網站。的這種想法,恰好,我前幾天學會了個可以把自己電腦做成伺服器,把網頁發佈到外網可以讓別人訪問的方法。 前幾天在弄支付寶掃碼支付,因為一直看不懂官方寫的引用文檔,百度的教程也看不懂,然後就去騰訊課堂看關於支付寶掃碼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...