Vue基本使用

来源:https://www.cnblogs.com/Sunzz/archive/2019/04/29/10776289.html
-Advertisement-
Play Games

Vue.js是一款流行的開源JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關註的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，並通過組件內部特定的方法實現視圖與模型的交互。由尤雨溪在2014年2月發佈的。 一 基本語法 1. vue的使用要從創建Vue對象開始 ...


 Vue.js是一款流行的開源JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關註的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，並通過組件內部特定的方法實現視圖與模型的交互。由尤雨溪在2014年2月發佈的。

一 基本語法

1. vue的使用要從創建Vue對象開始

let vm = new Vue();

2.創建vue對象

創建vue對象的時候，需要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
　let vm = new Vue({
　　el:"#app",
　　data: {
　　　　數據變數1:"變數值",
　　　　數據變數2:"變數值",
　　　　數據變數3:"變數值",
　　},

　　methods:{},

　　watch:{},

　　filters:{},
});

el:設置vue可以操作的html內容範圍，值就是css的id選擇器。

data: 保存vue.js中要顯示到html頁面的數據。

methods:定義函數。

watch:監聽屬性

filters:定義過濾器。

3.設置控制範圍

vue.js要控制器的內容外圍，必須先通過id來設置。
<div id="app">
　　<h1>{{message}}</h1>
</div>

4 簡單示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>{{message}} </h1>
</div>
<script>
    // vue.js的代碼開始於一個Vue對象。所以每次操作數據都要聲明Vue對象開始。
    let vm = new Vue({
        el:"#app", // 設置當前vue對象要控制的標簽範圍。
        data:{ // data 是將要展示到HTML標簽元素中的數據。
            message:"hello world!",
        }
    })
</script>
</body>
</html>

效果如下：

二 Vue.js的M-V-VM思想

MVVM 是 Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue對象的data屬性裡面的數據。這裡的數據要顯示到頁面中。
View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之為“視圖模板” 。
ViewModel 指代的是vue.js中我們編寫代碼時的vm對象了，它是vue.js的核心，負責連接 View 和 Model，保證視圖和數據的一致性，所以前面代碼中，data裡面的數據被顯示中p標簽中就是vm對象自動完成的。

 

再來一個示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 在雙標簽中顯示數據要通過 {{ }} 來實現-->
    <h1>{{name}}</h1>
    <p>{{age}}</p>
    <!-- 在表單輸入框中顯示數據要使用模板語法 v-model 來完成-->
    <input type="text" v-model="name">
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            name:"我是Vue.js",
            age:5,
        }
    })
</script>
</body>

效果如圖

要是在輸入框中輸入，則html中的那麼對應的值也會跟著改變

在瀏覽器中可以在 console.log通過 vm對象可以直接訪問el和data屬性,甚至可以訪問data裡面的數據

console.log(vm.$el) # #box vm對象可以控制的範圍
console.log(vm.$data); # vm對象要顯示到頁面中的數據

console.log(vm.name); 顯示name的值

 

也可以通過console直接修改data中的值，頁面也會跟著改變

 總結

1. 如果要輸出data裡面的數據作為普通標簽的內容，需要使用{{ }} 用法： vue對象的data屬性： data:{

　　name:"小明", }

標簽元素： <h1>{{ name }}</h1>

2. 如果要輸出data裡面的數據作為表單元素的值，需要使用vue.js提供的元素屬性v-model  用法：  vue對象的data屬性： 　　

data:{ name:"小明", }

表單元素：
　　<input v-model="name">
使用v-model把data裡面的數據顯示到表單元素以後，一旦用戶修改表單元素的值，則data裡面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。

 

三 顯示數據

顯示數據的一般規則：

 

在雙標簽中顯示數據要通過{{ }}來完成數據顯示

 

在表單輸入框中顯示數據要使用v-model來完成數據顯示

輸出html代碼,要使用v-html來輸出.v-html必須在html標簽裡面作為屬性寫出來.

一下來個示例看看

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <h3>{{ url1 }}</h3>
    <h4>用{{}}顯示出來的html代碼則會按原始字元串輸出 :</h4>
    {{ img }} <br>
    以下是圖片 <br>
    <span v-html="img"></span>   
<!-- 在此用data中的img來顯標簽屬性值，即就是把img原樣放入span中 -->
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            title:"我的vue!",
            url1:"我的url1地址",
            img: '<img src="http://wx1.sinaimg.cn/mw600/0076BSS5ly1g2g5zryq8vj30mt0y746v.jpg"> '
        },
    })
</script>
</body>
</html>

效果如下：

 

 在輸出內容到普通標簽的使用{{ }}還支持js代碼。

<h1>{{str1.split("").reverse().join("")}}</h1>
    <!--支持js的運算符-->
    <h1>{{num1+3}}</h1>
    <!--  js還有一種運算符,三元運算符,類似於python裡面的三元表達式
        三元運算符的語法:
         判斷條件 ? 條件為true : 條件為false的結果
        python 三元表達式[三目運算符]的語法:
        a if 條件 else b
     -->
    <h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>

 四 常用指令

指令 (Directives) 是帶有“v-”首碼的特殊屬性。每一個指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。

因為vue的歷史版本原因，所以有一部分指令都有兩種寫法：

vue1.x寫法              vue2.x的寫法
v-html         ---->   {{  }}   # vue2.x 也支持v-html
v-bind:屬性名   ---->   :屬性
v-on:事件名     ---->   @事件名

4.1 操作屬性

格式：

<標簽名 :標簽屬性="data屬性"></標簽名>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="index">
    <p>
    <input :type="type" placeholder="請輸入密碼">
    <button @click="type='text'">顯示密碼</button>
    </p>
</div>
<script>
    let vm = new Vue({
        el: "#index",
        data: {
            title: "路飛學成",
            type: "password"
        }
    })
</script>
</body>

點擊顯示密碼

4.2 事件綁定

有兩種事件操作的寫法，@事件名 和 v-on:事件名

<button v-on:click="num++">按鈕</button> <!-- v-on 是vue1.x版本的寫法 -->
<button @click="num+=5">按鈕2</button>

下麵給button按鈕綁定點擊事件，實現num的加減，點擊“+”實現加1操作，點擊“-” 調用sub函數實現減1操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="num++">+</button>
    <input type="text" v-model="num">
    <button @click="sub">-</button>
</div>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            num:0,
        },
        methods:{
            sub(){
                if (this.num<=1){
                    this.num=0
                } else {
                    this.num--;
                }
            }
        }
    })
</script>
</body>
</html>

4.3 操作樣式

4.3.1 控制標簽class類名

格式：

   <h1 :class="值">元素</h1>  值可以是對象、對象名、數組

 方式一：

添加class類名，值是一個對象 { class類1:布爾值變數1, class類2:布爾值變數2, }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .box1{
            color: red;
            border: 1px solid #000000;
        }
        .box2{
            background-color: orange;
            font-size: 32px;
        }
    </style>
</head>
<body>
<div id="box">
    <p :class="{box1:myclass1}">一個段落</p>
    <p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一個段落</p>
</div>
<script>
    let vm1 = new Vue({
        el:"#box",
        data:{
            myclass1:false,
            // 布爾值變數如果是false，則不會添加對象的屬性名作為樣式
            myclass2:true,
            myclass3:false,
        },
    })
</script>
</body>
</html>

效果如圖：

方式二：

上面的代碼可以:class的值保存到data裡面的一個變數，然後使用該變數作為:class的值

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .box4{
            background-color: red;
        }
        .box5{
            color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="mycls.box4=!mycls.box4">改變背景</button>
    <button @click="mycls.box5=!mycls.box5">改變字體顏色</button>
    <p :class="mycls">第二個段落</p>
</div>
<script>
    let vm2 = new Vue({
        el:"#app",
        data:{
            mycls:{
                box4:false,
                box5:true,
            },
        }
    })
</script>
</body>

效果如圖

方式三

批量給元素增加多個class樣式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .box6{
            background-color: red;
        }
        .box7{
            color: green;
        }
        .box8{border: 3px solid blue;}
    </style>
</head>
<body>
<div id="app">
    <p :class="[mycls1,mycls2]">第三個段落</p>
</div>
<script>
    let vm2 = new Vue({
        el:"#app",
        data:{
            mycls1:{
                box6:true,
                box7:true,
            },
            mycls2:{
                box8:true,
            }
        }
    })
</script>
</body>

效果如圖：

總結：

給元素綁定class類名，最常用的就是方式二。
    vue對象的data數據：
        data:{
          myObj:{
            complete:true,
            uncomplete:false,
          }
        }
html元素：    
        <div class="box" :class="myObj">2222</div>
最終瀏覽器效果：
        <div class="box complete">2222</div>

4.3.2 控制標簽style樣式

格式1：值是json對象，對象寫在元素的:style屬性中

標簽元素：
     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
  data數據如下：
     data: {
         activeColor: 'red',
         fontSize: 30
     }

格式2：值是對象變數名，對象在data中進行聲明

標簽元素：
      <div v-bind:style="styleObject"></div>
  data數據如下：
         data: {
                styleObject: {
                     color: 'red',
                     fontSize: '13px'
                 }
         }

格式3：值是數組

標簽元素：
   <div v-bind:style="[style1, style2]"></div>
    data數據如下：
          data: {
             style1:{
                color:"red"
             },
             style2:{
                 background:"yellow",
                 fontSize: "21px"
             }
          }

 

4.4 條件渲染指令

vue中提供了兩個指令可以用於判斷是否要顯示元素，分別是v-if和v-show。

 4.4.1 v-if

標簽元素：
      <!-- vue對象最終會把條件的結果變成布爾值 -->
            <h1 v-if="ok">Yes</h1>
  data數據：
          data:{
              ok:false    // true則是顯示，false是隱藏
      }

4.4.2  v-else

v-else指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。

 標簽元素：
        <h1 v-if="ok">Yes</h1>
        <h1 v-else>No</h1>
  data數據：
          data:{
              ok:false    // true則是顯示，false是隱藏
      }

4.4.3 v-else-if

可以出現多個v-else-if語句，但是v-else-if之前必須有一個v-if開頭。後面可以跟著v-else，也可以沒有。

  標簽元素：
      <h1 v-if="num==1">num的值為1</h1>
      <h1 v-else-if="num==2">num的值為2</h1>
      <h1 v-else>num的值是{{num}}</h1>
  data數據：
          data:{
              num:2
      }

4.4.4 v-show

用法和v-if大致一樣，區別有以下兩點：

（1）v-show後面不能有v-else或者v-else-if

（2）v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文檔中移除（DOM操作中的remove）

  標簽元素：
        <h1 v-show="ok">Hello!</h1>
  data數據：
        data:{
              ok:false    // true則是顯示，false是隱藏
      }

4.5 列表渲染指令

在vue中，可以通過v-for指令可以將一組數據渲染到頁面中，數據可以是數組或者對象。

示例一：數據是數組

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--i是列表的每一個元素-->
        <li v-for="book in book_list">{{book.title}}</li>
    </ul>
    <ul>
        <!--i是列表的每一個元素，j是每個元素的下標-->
        <li v-for="(book, index) in book_list">第{{ index+1}}本圖書：{{book.title}}</li>
    </ul>
</div>
<script>
    var vm1 = new Vue({
        el: "#app",
        data: {
            book_list: [
                {"id": 1, "title": "圖書名稱1", "price": 200},
                {"id": 2, "title": "
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js中常見繼承方式
    1.原型模式 function Father(){ this.property = true; } Father.prototype.getValue = function(){ return this.property; } function Son(){ this.Sonproperty = f ...
  • JQuery下載及選擇器總結
    JQuery下載 JQuery只是一個 JS函數庫 ，要使用其中的方法還是要在JS文件中進行調用。 一般去https://mvnrepository.com/這個網站下載，搜索JQuery就能找到JS文件下載。 下載完成後通過script src="JQuery.js文件路徑"，進行載入，併在其他j ...
  • JS 01 變數_數據類型_分支迴圈_數組
    點擊直通車↓↓↓ 數據類型及數據類型的手動轉換 數組 一、概念 JavaScript（JS）是一種基於對象和事件驅動、且可以與HTML標記語言混合使用的腳本語言，其編寫的程式可以直接在瀏覽器中解釋執 二、與java的關係 從本質上來講，Java和JS是兩門語言，並沒有本質上的聯繫。 三、如何寫js代 ...
  • 關於this指向,翻到的
    關於JavaScript函數執行環境的過程，IBM developerworks文檔庫中的一段描述感覺很不錯，摘抄如下： “JavaScript 中的函數既可以被當作普通函數執行，也可以作為對象的方法執行，這是導致 this 含義如此豐富的主要原因。一個函數被執行時，會創建一個執行環境（Execut ...
  • 微信網頁錄音功能
    wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 為錄音按鈕dom對象 btnRecord.addEventListener('touchstart', function (even... ...
  • js 的 騷操作
    單行的js 代碼雖然簡潔，但卻不易維護，甚至難以理解， 但這卻並不影響前端童鞋們編寫簡潔代碼的熱情， 一 ， 生成隨機ID 解析 ： 1 , Math.random() 生成一個 0 到 1 的 隨機數 =》 number = 0.7147259888717723 2 , number.toStri ...
  • Axios發送AJAX請求
    Axios == [toc] github文檔：[axios github]( https://github.com/axios/axios) 該模塊相容瀏覽器端和node.js後端發送http請求。 本文主要簡單介紹了請求的發送和響應callback的註冊。也就是axios發送ajax請求的使用方 ...
  • 自學WEB前端到什麼程度才能就業
    做過多年web前端從業者，回答下這個問題 首先，這個問題主要問：自學web前端技術，如果才能找到一份web前端的工作。按照現在的招聘標準來看，無論你去哪個公司面試，你只需要滿足他們公司的需求就可以。 找到一份web前端工作需要掌握的內容如下： 首先是html，css這些簡單的靜態佈局這是最基本的學習 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類