Vue.js下載方式及基本概念

来源:https://www.cnblogs.com/zqlboke/archive/2018/05/10/9021671.html
-Advertisement-
Play Games

Vue.js 簡介 說明及下載 Vue.js使用文檔已經寫的很完備和詳細了,通過以下地址可以查看: https://cn.vuejs.org/v2/guide/ vue.js如果當成一個庫來使用,可以通過下麵地址下載: https://cn.vuejs.org/v2/guide/installati ...


Vue.js 簡介

說明及下載

Vue.js使用文檔已經寫的很完備和詳細了,通過以下地址可以查看: https://cn.vuejs.org/v2/guide/

vue.js如果當成一個庫來使用,可以通過下麵地址下載: https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

我們下載了vue.js後,需要在頁面上通過script標簽引入vue.js,開發中可以使用開發版本vue.js,產品上線要換成vue.min.js。

script type="text/javascript" src="js/vue.min.js"></script

Vue代碼實例(創建)

<!DOCTYPE html>

 

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">


    var vm=new Vue({
        //el屬性對應一個標簽 當el對象創建後,這個標簽內的區域就被Vue對象接管,
        //接下來就可用Vue來做一些為所欲為的事情啦
        el:'#app',
        data : {message:'好濕呀'}
    });
    </script>

數據與方法

當一個 Vue 實例被創建時,它向 Vue 的響應式系統中加入了其data對象中能找到的所有的屬性。當這些屬性的值發生改變時,視圖將會產生“響應”,即匹配更新為新的值。還可以在Vue實例中定義方法,通過方法來改變實例中data對象中的數據,數據改變了,視圖中的數據也改變。

Vue實例代碼(方法)

window.onload = function(){

var vm = new Vue({
    el:'#app',
    data:{message:'hello world!'},
    methods:{
        fnChangeMsg:function(){
            this.message = 'hello Vue.js!';
        }
    }
});

} 

div id="app"

<p>{{ message }}</p>
<button @click="fnChangeMsg">改變數據和視圖</button>

/div

Vus.js模板語法

模板語法指的是如何將數據放入html中

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括弧) 的文本插值,例如:

{{ msg }}

插入的值當中還可以寫表達式:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<a v-bind:href="url">鏈接文字

指令

指令 (Directives) 是帶有“v-”首碼的特殊屬性。指令屬性的值預期是單個JavaScript表達式,指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於DOM。常見的指令有v-bind、v-if、v-on。

<-- 根據ok的布爾值來插入/移除 p元素 -->

<p v-if="ok">是否顯示這一段

 

<-- 監聽按鈕的click事件來執行fnChangeMsg方法 -->

<button v-on:click="fnChangeMsg">按鈕

我的小boby ,有不懂的,歡迎下方評論!!!


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

-Advertisement-
Play Games
更多相關文章
  • android的selector對於android開發者而言再熟悉不過了,只要定義一個drawable目錄下定義一個selector的xml文件,在佈局文件中引用這個xml文件或者在代碼中setBackgroundDrawable的時候使用此xml就可以實現控制項按下或有焦點等不同狀態的效果。 那麼s ...
  • 外國友人錄製的ARDC的使用簡介,非常不錯,介紹得很詳盡。 ...
  • ARDC連接設備異常之ADB version mismatch的處理,主要是解決adb server version doesn't match this client的問題。 ...
  • 參考了https://blog.csdn.net/zi413293813/article/details/50074239 然後自己重新整理補充 我用的ndk-r10d ndk下載地址http://developer.android.com/sdk/ndk/index.html eclipse 開發 ...
  • 方法一:設置BarButtonItem的文本樣式為透明顏色,代碼如下: 此外這種方法會導致title不能居中,被偏移很多,如下所示(雖然不被顯示,也占了導航欄左邊很大一部分位置) 方法二:給UIViewController添加類別,然後在load方法裡面用Method Swzilling方法替換 交 ...
  • 收藏 - android開發 2018-05-04 16:39:36 介紹:這篇文章是收藏系列的開山第一篇,主要收藏了跟android開發有關的一些內容,也算是內容彙總,後期會持續更新; 內容目錄 1. 開發工具 - 工具 + 插件2. 網站收藏 3. 大佬 4. 書 5. 常用工具類 6. and ...
  • 關於 微信公眾號:前端呼啦圈(Love-FED) 我的博客:勞卜的博客 知乎專欄:前端呼啦圈 前言 在實際編碼中,我們經常會遇到Javascript代碼非同步執行的場景,比如ajax的調用、定時器的使用等,在這樣的場景下也經常會出現這樣那樣匪夷所思的bug或者糟糕的代碼片段,那麼處理好你的Javasc ...
  • 一、該模式優缺點1、優點:該模式可以使腳本語法更加一致,在模塊代碼底部,它很容易指出哪些函數和變數可以被公開訪問,從而改善可讀性。 2、缺點:如果一個私有函數引用一個公有函數,公有函數是不能被覆蓋的。相對脆弱,謹慎使用 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...