vue初級使用

来源:https://www.cnblogs.com/wanghj-15/archive/2019/07/11/11167515.html
-Advertisement-
Play Games

一、Vue是什麼? Vue（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。採用自底向上增量開發的設計。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。 Vue漸進式的理解:http://www.bslxx.com/a/vu ...


一、Vue是什麼?

　　Vue（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。採用自底向上增量開發的設計。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

 

　　Vue漸進式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

 

　　Vue只關註視圖層。

　　Vue通過新的屬性（自定義）和{{表達式}}擴展了 HTML。

　　Vue的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

　　Vue學習起來非常簡單。

　　官網：https://cn.vuejs.org/

 

二、Vue特性

l  輕量

　　Vue.js庫的體積非常小的，並且不依賴其他基礎庫。

l  數據綁定

　　對於一些富交互、狀態機類似的前端UI界面，數據綁定非常簡單、方便。

l  指令

　　內置指令統一為(v-*)，也可以自定義指令，通過對應表達值的變化就可以修改對應的DOM。

l  插件化

　　Vue.js核心不包含Router、AJAX、表單驗證等功能，但是可以非常方便地根據需要載入對應插件。

l  組件化

　　組件可以擴展 HTML 元素，封裝可重用的代碼。允許我們使用小型、自包含和通常可復用的組件構建大型應用

l  相容性

　　Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有相容 ECMAScript 5 的瀏覽器。

 

三、Vued的使用：

       它有兩個版本：開發版本和生產版本（由於代碼太多，具體的vue.js文件需要到vue官網複製）。

 

<!-- 引入vue開發版文件 -->

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

 

四、Vue實例講解

　　1、vue實例掛在（el）的標簽

　　每個Vue實例通過el配置掛載的標簽，該標簽可以通過id或者是class掛載。  實例上的屬性和方法只能夠在當前實例掛載的標簽中使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h3> {{messge}}</h3>
            姓名：{{user.name}}；年齡：{{user.age}}；性別：{{user.sex}}
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    messge:"變形金剛",
                    user:{
                        name:"張三",
                        age:18,
                        sex:"男"
                    }
                }
            });
            // 通過Vue實例可以直接修改data對象中的數據
            app.messge="修改後的變形金剛";
            app.user.name="王小二";
        </script>
    </body>
</html>

 

　　2、Vue中的數據(data)

　　1 、Vue實例的數據保存在配置屬性data中, data自身也是一個對象.

　　2、通過Vue實例直接訪問和修改data對象中的數據,及時同步的頁面上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h3> {{messge}}</h3>
        </div>
        <div class="cla">
            <h3> {{messge}}</h3>
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    messge:"變形金剛"
                }
            });
            
            var ha= new Vue({
                el:".cla",
                data:{
                    messge:"搬磚的程式員"
                }
            });
        </script>
    </body>
</html>

 

　　3、Vue中的方法(methods)

　　1、Vue實例的方法保存在配置屬性methods中,methods自身也是一個對象. 該對象中值都是方法體

　　2、方法都是被Vue對象調用,所以方法中的this代表Vue對象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h3> {{messge}}</h3>
            {{haa()}}
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    messge:"變形金剛",
                    user:{
                        name:"張三",
                        age:18,
                        explain:"過來啊！"
                    }
                },
                methods:{
                    //方法寫法一：
                    haa:function(){
                        return this.user.name+this.user.explain+"我請你吃糖果";
                    },
                    //方法寫法二：
                    yaa(){
                        //跳出一個彈窗
                        alert(this.messge+"是鋼鐵直男");
                    }
                }
            });
            app.yaa();
        </script>
    </body>
</html>

 

　　4、vue數據雙向綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--監聽input中值的改變同步到data中的message上:
                v-model:數據的綁定；
                將app對象中的message值綁定到input中，同時輸入input值後，也作用於app的message值。
            -->
            <h3> {{messge}}</h3>
            <input type="text" v-model="messge" />
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    messge:"變形金剛",
                }
            });
            
        </script>
    </body>
</html>

 

五、Vue架構的認識：

　　Vue是一款開源的JavaScript MV*（MVVM、MVC）框架。

　　Vue引入了MVVM (Model-View-ViewModel)模式，他不同於MVC架構.

 

　　MVC模式：

　　Model： 數據模型，一些JavaScript 對象，比如 {name : "小小強",age : 16};

　　View:   視圖，網頁中的內容，一般由HTML模板生成。

　　Controller : 控制器（路由），視圖和模型之間的膠水。

 

　　MV VM模式：

　　Model：它是與應用程式的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操作，所以模型也不會包含任何界面顯示相關的邏輯。在web頁面中，大部分Model都是來自Ajax的服務端返回數據或者是全局的配置對象。


       View：它專註於界面的顯示和渲染，在Vue中則是包含一堆聲明式Directive和Component的視圖模板。

 

　　ViewModel：它是View和Model的粘合體，負責View和Model的交互和協作，它負責給View提供顯示的數據，以及提供了View中Command事件操作Model的途徑；在vue中“Vue對象實例”充當了這個ViewModel的角色；

 

　　View不能直接與Model交互，而是通過Vue實例這個ViewModel來實現與Model的交互。對於界面表單的交互，通過v-model指令來實現View和ViewModel的同步。對於View而言，ViewModel中的DOM Listeners工具會幫助我們監聽頁面上DOM元素的變化，一旦發生變化，Model中的數據也會發生改變；

　　對於Model而言，當我們添加或修改Model中的數據時，ViewModel中的Data Bindings工具會幫助我們更改View中的DOM元素。從而實現View和Model的分離，達到對前端邏輯MVVM的分層架構。

 

六、VueJS表達式

　　語法：

　　VueJS表達式寫在雙大括弧內：{{ expression }}。

　　VueJS表達式把數據綁定到 HTML。

　　VueJS將在表達式書寫的位置"輸出"數據。

　　VueJS表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變數。

　　實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

　　案例：

　　1、簡單表達式

　　在{{ }}中可以進行簡單的運算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="app">
             <!--簡單表達式  -->
        <h1>{{5+5}}</h1>
        <!-- +:運算，字元串連接 -->
        <h1>{{5+"v5"}}</h1>
        <h1>{{5+"5"}}</h1>
        <!-- -：減法 -->
        <h1>{{"5"-"5"}}</h1>
        <h1>{{5*5}}</h1>
        <!-- *:乘 法 -->
        <h1>{{"5"*"5"}}</h1>
        <!-- / 除法-->
        <h1>{{5/5}}</h1>
        <h1>{{5/5}}</h1>

        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app"
            });
            
        </script>
    </body>
</html>

 

　　2、三目表達式

　　在{{}}中的表達式可以使用三元運算符,但是不能夠使用其他語句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--三目運算  -->
            {{ show?"真":"假"}}
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    show:true,
                }
            });
            
        </script>
    </body>
</html>

 

　　3、字元串表達式

　　1、直接使用字元串字面值作為字元串對象
    　2、使用data中的字元串對象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{"這是字面值"}}<br/>
            {{"這是字面值".length}}<br/>
            {{message.length}}<br/>
            <!--從字元串索引1開始獲取，到索引5之前結束-->
            {{message.substring(1,5)}}<br/>
            <!--從字元串索引2開始獲取，到索引6之前結束；toUpperCase():將小寫變為大寫-->
            {{message.substring(2,6).toUpperCase()}}<br/>
            <!--substr(index,length):從index開始截取，截取length個字元串 -->
            {{message.substr (1,3)}}<br/>
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    message:"我在data裡面"
                }
            });
        </script>
    </body>
</html>

 

　　4、對象表達式

         在表達式中可以使用data中定義的對象的各種用法.像使用js對象中的方法和屬性一樣

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{messge}}<br/>
            {{JSON.stringify(messge)}}<br/>
            {{messge.toString()}}<br/>
            {{messge.name}}<br/>
            {{messge.age}}<br/>
            {{messge.getAge()}}<br/>
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var user ={
                name:"張三",
                age:19,
                getAge:function(){
                    return this.age;
                },
                toString:function(){
                    return "姓名:"+this.name+",年齡:"+this.age;
                }
            }
            var app=new Vue({
                el:"#app",
                data:{
                    messge:user
                }
            });
            
        </script>
    </body>
</html>

 

　　5、數組表達式

　　在表達式中可以使用JavaScript數組中的任何語法來操作數組.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{hobbys}}<br/>
            {{hobbys[0]}}<br/>
            {{hobbys.length}}<br/>
            {{hobbys.toString()}}<br/>
            <!--用“-----”將每個元素分隔開顯示-->
            {{hobbys.join("------")}}<br/>
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                     hobbys:["打游戲","踢足球",'看電視',"游泳"]
                }
            });
        </script>
    </body>
</html>

 

七、Vue指令

　　1、什麼是指令

    　指令是一個帶有v-首碼的特殊標簽屬性, 指令屬性的值預期是單個JavaScript表達式.

　　2、常見的指令

　　v-text=“表達式”  設置標簽中的文本
　　v-html=“表達式”  設置標簽中的html
　　v-if=“表達式”    判斷條件   
　　v-for=“表達式”   迴圈
　　v-model=“表達式” 數據雙向綁定
　　v-on=“表達式”    註冊事件

　　3、指令的作用

　　1、作用:  當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。

　　2、一個標簽元素上可以出現多個指令屬性

　　3、指令只能夠出現在Vue對象所掛載的標簽範圍內的標簽中

　　4、v-text指令

　　註意事項:
   　1、如果值是html的值,也不會作為普通的文本使用.
       2、標簽中的屬性值必須是data中的一個屬性.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <span v-text="message"></span><br/>
            <span v-text="user.username"></span><br/>
        </div>
        <!--開發版本(項目上線之後要替換成生產版本)；生產版本：vue.min.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    message: "<h1>這是一個Span!</h1>",
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • python資料庫-MySQL資料庫的增刪改查基本操作(49)
    一、資料庫基礎 表 table：數據是保存在表內，保存在一個表內的數據，應該具有相同的數據格式 行：行用於記錄數據 記錄：行內的數據 列：列用於規定數據格式 欄位：數據的某個列 主鍵：唯一地標識表中的某一條記錄，不能空，不能重覆 表 table：數據是保存在表內，保存在一個表內的數據，應該具有相同的 ...
  • mysql 多表查詢 以及 concat 、concat_ws和 group_concat
    left join(左聯接) 返回包括左表中的所有記錄和右表中聯結欄位相等的記錄right join(右聯接) 返回包括右表中的所有記錄和左表中聯結欄位相等的記錄inner join(等值連接) 只返回兩個表中聯結欄位相等的行 舉例如下： 表A記錄如下：aID aNum1 a200501112 a2 ...
  • python資料庫-MySQL安裝問題總結(48)
    一、ERROR 1698(28000):Access denied for user root@localhost錯誤 我的操作系統是ubuntu： 我的MySQL版本是： 安裝完成後，登錄mysql的時候就出現瞭如下錯誤： 因為安裝的過程中沒讓設置密碼，可能密碼為空，但無論如何都進不去mysql。 ...
  • Flutter學習筆記（4）--Dart函數
    Dart是一個面向對象的語言，所以函數也是對象，函數屬於Function對象，函數可以像參數一樣傳遞給其他函數，這樣便於做回調處理； ...
  • iOS13中presentViewController的問題
    iOS13中presentViewController的問題 更新了Xcode11.0 beta之後，在iOS13中運行代碼發現 和之前彈出的樣式不一樣。 會出現這種情況是主要是因為我們之前對 裡面的一個屬性，即 （該屬性是控制器在模態視圖時將要使用的樣式）沒有設置需要的類型。在iOS13中 的預設 ...
  • 中文版 Apple 官方 Swift 教程《The Swift Programming Language》
    簡介 歡迎使用 Swift 關於 Swift 版本相容性 Swift 初見 Swift 版本歷史記錄 Swift 教程 基礎部分 基本運算符 字元串和字元 集合類型 控制流 函數 閉包 枚舉 類和結構體 屬性 方法 下標 繼承 構造過程 析構過程 可選鏈 錯誤處理 類型轉換 嵌套類型 擴展 協議 泛 ...
  • 常用的URL Scheme
    系統 簡訊| | app store| 電話| 備忘錄| 設置| E Mail| 支付寶 支付寶| | 螞蟻莊園| 螞蟻森林| 螞蟻寶卡| 款碼| 掃碼| 紅包| 股票| 生活繳費| 手機充值| 彩票| 淘票票| 查快遞| AA收款| 收款| 轉賬| 還信用卡| 釘釘| 淘寶網| 淘寶旅行| 淘寶寶 ...
  • flutter 如何實現文件讀寫(使用篇)
    flutter文件讀寫可以對磁碟文件進行操作，實現某些業務場景，那麼我們開始來講下這個文件讀寫操作。 使用的庫插件(package) dart:io（用於數據處理） path_provider （用於獲取路勁） 操作步驟 1.獲取正確的本地路徑 2.創建指向文件位置的引用 3.寫入數據到文件內 4. ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類