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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類