2. 程式人生 > 實用技巧 >VUE學習筆記——基礎標籤，函式

VUE學習筆記——基礎標籤，函式

阿新 • • 發佈：2020-12-16

VUE入門

第一個VUE程式

使用！tab建立標準html模板，嵌入vue例項化

<!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

插入模板語法

<div id="app">
  {{ message }}
</div>


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    {{ message }}

    <h2 id="app" class = "app">
        {{ message }}
        <span> {{message}} </span>>
    </h2>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
           //el:".app",
           
           //el:"div",
            data:{
                message:"VUE hell"
            }



        })

    </script>
</body>
</html>

el:掛載點

Vue例項作用範圍

Vue會管理el選項命中的元素及內部的後代元素

可以使用其他的選擇器

如ID、DIV等，建議使用id

雙標籤

可以使用其他的雙標籤，不能使用HTML和BODY雙標籤

data：資料物件

  • Vue中用到的資料定義在data中
  • data中可以寫複雜型別的資料
  • 渲染複雜型別的資料時，遵守js的語法

本地應用

使用vue實現簡單的網頁

Vue指令

1、內容繫結，事件繫結

v-text

<body>

    <div id = "app">
        <h2 v-text="message+'!'"></h2>
        <h2 v-text="info"></h2>
        
        <h2>學院路{{message}}</h2>




        {{message}}
            <div>   {{ school.name}} {{school.mobile}} </div>
    
            <ul>
                <li> {{campus[0]}} </li>
                <li> {{campus[1]}} </li>

            </ul>
    
        </div>

  • 設定標籤內容--content

  • 插值表示式替換內容

  • 可以寫表示式

v-html

設定innerHTML

  • 設定元素的innerHTML
  • 內容中有html結構的會被解析為標籤
  • v-text指令只會解析為文字
data:{
            content : "<a href='https://www.bilibili.com/'>link </a>"

               }

v-on

  • v-on指令的作用：為元素繫結事件
  • 事件名不需要寫on
  • 指令可以寫為@
  • 繫結的方法定義在methods中
<input type="button" value = "v-on指令" v-on:click = "makenoise">
<input type="button" value = "v-on簡寫" @click = "makenoise">
<input type="button" value = "雙擊"     @dblclick = "makenoise">

實現網頁計數器

  • 建立Vue例項時：el（掛載點），data（資料），methods（方法）
  • v-on
  • this 獲取資料

2、顯示切換，屬性繫結

v-show

  • v-show指令作用：根據真假切換元素的顯示狀態
  • 原理是修改元素的display，實現隱藏
  • 指令後面內容解析為布林值
  • 值為true顯示，值為false隱藏

v-if

基本和v-show相同

  • V-if指令：更具表示式真假切換元素的顯示狀態
  • 操縱dom元素切換顯示狀態
  • 表示式值為true，元素存在於dom樹中，為false，從dom樹中移除
  • 頻繁切換v-show否則v-if，前者消耗小

v-bind

  • 為元素繫結屬性

  • 完整寫法v-bind：屬性名

  • 簡寫省略v-bind，只保留：屬性名

3、列表迴圈，表單元素繫結

v-for

  • v-for：根據資料生成列表結構
  • 陣列經常和v-for一起使用
  • 語法是（item，index）in資料
  • item和index可以結合其他指令一起使用
  • 陣列長度的更新會同步到頁面上，是響應式的

v-on-補充

<body>
    <div id ="app">
        <input type ="button" value="點選"  @click="doit(233,'bili')">  
        <input type="text" @keyup.enter="sayhi" >
    </div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el:"#app",

    methods:{
        doit:function(p1,p2){
            console.log("test");
            console.log(p1);
            console.log(p2 );
        },
        sayhi:function(){
                alert ("success");
            },   
    }
})
</script>
</body>
</html>
  • 事件繫結，函式呼叫傳形參
  • 定義方法時定義形參接收實參
  • 事件後跟.修飾符 可以進行限制
  • .enter可以限制觸發 的按鍵 為回車鍵
  • 事件修飾符有多種。

v-module

雙向資料繫結

<body>
    <div id ="app"> 
        <input type = "button" value = "修改message" @click="setM">
        <input type ="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 var app = new Vue({
    el:"#app",
    data:{
        message :"test"
    },
    methods:{
        getM:function(){
            alert(this.message)
        },
        setM:function(){
            this.message="函式";
                }
    },
 })
</script>
</body>
</html>
  • v-module指令：便捷 的設定和獲取表單元素的值
  • 繫結的資料會和表單元素的值相關聯
  • 繫結的資料和表單元素值一一對應

前後端分離

經典的JSP+Servlet+JavaBean的MVC時代

半分離

SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java 框架時代

步驟如下：
（1）瀏覽器請求，CDN返回HTML頁面；
（2）HTML中的JS程式碼以Ajax方式請求後臺的Restful介面；
（3）介面返回Json資料，頁面解析Json資料，通過Dom操作渲染頁面；

後端提供的都是以JSON為資料格式的API介面供Native端使用，同樣提供給WEB的也是JSON格式的API介面。

那麼意味著WEB工作流程是：
1、開啟web，載入基本資源，如CSS，JS等；
2、發起一個Ajax請求再到服務端請求資料，同時展示loading；
3、得到json格式的資料後再根據邏輯選擇模板渲染出DOM字串；
4、將DOM字串插入頁面中web view渲染出DOM結構；

這些步驟都由使用者所使用的裝置中逐步執行，也就是說使用者的裝置效能與APP的執行速度聯絡的更緊換句話說就是如果使用者的裝置很低端，那麼APP開啟頁面的速度會越慢。

為什麼說是半分離的？因為不是所有頁面都是單頁面應用，在多頁面應用的情況下，前端因為沒有掌握controller層，前端需要跟後端討論，我們這個頁面是要同步輸出呢，還是非同步Json渲染呢？而且，即使在這一時期，通常也是一個工程師搞定前後端所有工作。因此，在這一階段，只能算半分離。

首先，這種方式的優點是很明顯的。前端不會嵌入任何後臺程式碼，前端專注於HTML、CSS、JS的開發，不依賴於後端。自己還能夠模擬Json資料來渲染頁面。發現Bug，也能迅速定位出是誰的問題。

然而，在這種架構下，還是存在明顯的弊端的。最明顯的有如下幾點：
1）JS存在大量冗餘，在業務複雜的情況下，頁面的渲染部分的程式碼，非常複雜；
2）在Json返回的資料量比較大的情況下，渲染的十分緩慢，會出現頁面卡頓的情況；
3）SEO（ Search Engine Optimization，即搜尋引擎優化）非常不方便，由於搜尋引擎的爬蟲無法爬下JS非同步渲染的資料，導致這樣的頁面，SEO會存在一定的問題；
4）資源消耗嚴重，在業務複雜的情況下，一個頁面可能要發起多次HTTP請求才能將頁面渲染完畢。可能有人不服，覺得PC端建立多次HTTP請求也沒啥。那你考慮過移動端麼，知道移動端建立一次HTTP請求需要消耗多少資源麼？

正是因為如上缺點，我們才亟需真正的前後端分離架構。

前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）為主的MV*時代

大家一致認同的前後端分離的例子就是SPA(Single-page application)，所有用到的展現資料都是後端通過非同步介面(AJAX/JSONP)的方式提供的，前端只管展現。從某種意義上來說，SPA確實做到了前後端分離，但這種方式存在兩個問題：

  • WEB服務中，SPA類佔的比例很少。很多場景下還有同步/同步+非同步混合的模式，SPA不能作為一種通用的解決方案；

  • 現階段的SPA開發模式，介面通常是按照展現邏輯來提供的，而且為了提高效率我們也需要後端幫我們處理一些展現邏輯，這就意味著後端還是涉足了view層的工作，不是真正的前後端分離。

    SPA式的前後端分離，從物理層做區分（認為只要是客戶端的就是前端，伺服器端就是後端）這種分法已經無法滿足前後端分離的需求，我們認為從職責上劃分才能滿足目前的使用場景：

  • 前端負責view和controller層

  • 後端只負責model層，業務處理與資料持久化等

    controller層與view層對於目前的後端開發來說，只是很邊緣的一層，目前的java更適合做持久層、model層的業務。

    在前後端徹底分離這一時期，前端的範圍被擴充套件，controller層也被認為屬於前端的一部分。在這一時期：
    前端：負責View和Controller層。
    後端：只負責Model層，業務/資料處理等。

    可是服務端人員對前端HTML結構不熟悉，前端也不懂後臺程式碼呀，controller層如何實現呢？這就是node.js的妙用了，node.js適合運用在高併發、I/O密集、少量業務邏輯的場景。最重要的一點是，前端不用再學一門其他的語言了，對前端來說，上手度大大提高。

可以就把Nodejs當成跟前端互動的api。總得來說，NodeJs的作用在MVC中相當於C（控制器）。Nodejs路由的實現邏輯是把前端靜態頁面程式碼當成字串傳送到客戶端（例如瀏覽器），簡單理解可以理解為路由是提供給客戶端的一組api介面，只不過返回的資料是頁面程式碼的字串而已。

用NodeJs來作為橋樑架接伺服器端API輸出的JSON。後端出於效能和別的原因，提供的介面所返回的資料格式也許不太適合前端直接使用，前端所需的排序功能、篩選功能，以及到了檢視層的頁面展現，也許都需要對介面所提供的資料進行二次處理。這些處理雖可以放在前端來進行，但也許資料量一大便會浪費瀏覽器效能。因而現今，增加Node中間層便是一種良好的解決方案。

瀏覽器(webview)不再直接請求JSP的API，而是：
1）瀏覽器請求伺服器端的NodeJS；
2）NodeJS再發起HTTP去請求JSP；
3）JSP依然原樣API輸出JSON給NodeJS；
4）NodeJS收到JSON後再渲染出HTML頁面；
5）NodeJS直接將HTML頁面flush到瀏覽器；

這樣，瀏覽器得到的就是普通的HTML頁面，而不用再發Ajax去請求伺服器了。

Nodejs引領的全棧時代

Apache Tomcat

Ajax

相關推薦

VUE學習筆記——基礎標籤，函式

VUE入門 第一個VUE程式 使用！tab建立標準html模板，嵌入vue例項化 <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>

VUE學習筆記--基礎標籤

本筆記僅用作學習vue過程中的知識記錄，亦用作知識溫習查詢的綱要。 a、一些稱呼

[Vue學習筆記] 插值 - HTML 標籤

技術標籤：webhtml5 使用 {{ 變數 }} 的方式在HTML 中新增值， 此時變數會以字串的形式顯示，那麼如果我們想新增的變數對應的是一個 HTML 標籤，應該如何操作呢？

vue學習筆記，做處很認真那種

vue主要是資料驅動，非傳統的操作dom 這和以前的web開發工具不同，所以之前js 學得不好，可以在web從新得到靈感

vue學習筆記之slot插槽基本用法例項分析

本文例項講述了vue學習筆記之slot插槽基本用法。分享給大家供大家參考，具體如下：

vue學習筆記之過濾器的基本使用方法例項分析

本文例項講述了vue學習筆記之過濾器的基本使用方法。分享給大家供大家參考，具體如下：

vue學習筆記之作用域插槽例項分析

本文例項講述了vue學習筆記之作用域插槽。分享給大家供大家參考，具體如下：

vue學習筆記之給元件繫結原生事件操作示例

本文例項講述了vue學習筆記之給元件繫結原生事件操作。分享給大家供大家參考，具體如下：

vue學習筆記之動態元件和v-once指令簡單示例

本文例項講述了vue動態元件和v-once指令。分享給大家供大家參考，具體如下：

vue學習筆記之slot插槽用法例項分析

本文例項講述了vue slot插槽用法。分享給大家供大家參考，具體如下： 不使用插槽，在template中用v-html解析父元件傳來的帶有標籤的content

vue學習筆記之Vue中css動畫原理簡單示例

本文例項講述了Vue中css動畫原理。分享給大家供大家參考，具體如下： 當transition包裹了一個元素之後，vue會自動分析元素的css樣式，構建動畫流程。

Vue學習筆記5-前端工程化

傳統開發模式的主要問題 命名衝突 檔案依賴 通過模組化解決上述問題 模組化就是把單獨的一個功能封裝到一個模組（檔案）中，模組之間相互隔離，但是可以通過特定的介面公開內部成

Vue學習筆記（二）

1 條件判斷 1.1 普通if 條件判斷使用v-if指令： <div id="app"> <p v-if="seen">看到了</p>;

java學習筆記 基礎篇01

註釋 平時我們編寫程式碼，在程式碼量還比較少的時候，我們還可以看懂自己寫的，但是當專案一旦複雜起來，我們就需要用到註釋了。

java學習筆記 基礎篇02

型別轉換 由於Java是強型別語言，所以要進行有些運算的時候，需要用到型別轉換。

Java學習筆記基礎篇-面向物件基礎

Java基礎-面向物件基礎 類和物件 什麼是物件 萬物皆物件,客觀存在的事物皆為物件

【學習筆記】多項式對數函式

求： \\[G(x)\\equiv \\ln F(x)(\\bmod x^n) \\] 解： 令\\(f(x)=\\ln x\\) \\[G(x)\\equiv \\ln f(F(x))(\\bmod x^n)

Vue 學習筆記1 Hello_Vue

第一步：匯入Vue <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>

Vue 學習筆記2 data資料物件

知識點 支援三種類型：變數、陣列、物件，訪問方式與JavaScript語法相同。 完整程式碼

Vue 學習筆記3 Vue指令 v-text v-html

v-text 設定標籤的文字值（textContent） <h3 v-text="message"></h3> 可以進行拼接操作，如：