2. 程式人生 > >Vue的開始以及基本指令詳解

Vue的開始以及基本指令詳解

阿新 • • 發佈：2018-12-19

為什麼學vue？

  • vue是中國大神尤雨溪建立的js框架。
  • Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
  • 任何描述都不及這個視訊介紹來的有效：How to use Vue?

安裝Vue

  • 通過直接飲用線上的js庫
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
 
></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 通過npm包管理器
# 最新穩定版
$ npm install vue

在 NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構建版本: 在這裡插入圖片描述

第一次使用vue

  • Hello Vue！

vue通過Vue建構函式建立例項物件，傳遞引數1，el：元素節點ID值，data：資料，最後再通過插值符號將data裡的資料按需渲染到html頁面裡。

<body
 
>
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="https://vuejs.org/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

在這裡插入圖片描述

資料就是資料，text和html的區別,如果直接在資料裡包裹標籤：

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '<h1>Hello Vue!</h1>'//沒有效果
        }
    })
</script>

在這裡插入圖片描述

Vue基本語法、指令

基本指令

v-text:

  • 期望值型別：string;

  • 用法：

    用於更新元素的textContent，可以通過{{}}插值符號控制。

  • 示例：

<!-- 兩種寫法一樣 -->
<span v-text="msg"></span>
<span>{{msg}}</span>
  • 完整例項：
<body>
    <div id="app" v-text="message"></div>
</body>
<script src="https://vuejs.org/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

在這裡插入圖片描述

雖然上面兩個用法可以達到相同結果，但是仍然有細節的卻別，如果用插值符號寫在標籤裡面<span>{{message}}</span>會出現js檔案沒載入完，{{message}}直接顯示出來：

就像這樣： 在這裡插入圖片描述

而把message寫在屬性裡，就不會將變數暴露出來。

  • 當然插值也可以拼接：
<body>
    <div id="app">
        The new guy said something:{{message}}
    </div>
</body>
<script src="https://vuejs.org/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

在這裡插入圖片描述

v-html：

  • 期望值型別：string;

  • 用法：更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用元件來替代。

  • 禁忌：

    禁止在使用者提交資料的內容部分使用v-html這樣會非常容易導致xss攻擊，一些用心不良的使用者會利用指令碼植入到提供給使用者的其他頁面中，在其他使用者使用被篡改的頁面時觸發指令碼，將使用者資訊資料傳送給植入者！

  • 示例：

<div v-html="html"></div>
  • 完整示例：
<body>
    <div id="app">
        The new guy said something:{{message}}
        <h1 v-text="vText"></h1>
        <h1 v-html="vHtml"></h1>
        <!-- <h1 v-text=""></h1> -->

    </div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            vText:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            vHtml:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            // vText2:""
        }
    })
</script>

在這裡插入圖片描述

v-show:

  • 期望值型別：都可；
  • 用法：根據表示式的真假值切換display屬性；
  • 示例：
<span v-show="vShow">{{}}</span>
<span v-show=true/false>string</span>
  • 完整例項：
<body>
    <div id="app">
        The new guy said something:{{message}}
        <h1 v-text="vText"></h1>
        <h1 v-html="vHtml"></h1>
        <h1 v-show="vShow">vShow控制的元素</h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            vText:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            vHtml:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            vShow:true//false
        }
    })
</script>

在這裡插入圖片描述

如果我改成false了： 在這裡插入圖片描述

v-if,v-else,v-else-if:

  • v-if，v-esle-if期望值：都可，v-else無值；

  • 用法： 呈兄弟級節點關係，if值為false顯示else的節點，一次類推，與jsif判斷類似。

  • 示例：

<div v-if="firstif">This is the if node</div>
<div v-else-if="secondeif">This is the else if node</div>
<div v-else>This is the else node</div>
  • 完整例項：
<body>
    <div id="app">
        The new guy said something:{{message}}
        <h1 v-text="vText"></h1>
        <h1 v-html="vHtml"></h1>
        <h1 v-show="vShow">vShow控制的元素</h1>
        <div v-if="firstif">This is the if node</div>
        <div v-else-if="secondeif">This is the else if node</div>
        <div v-else>This is the else node</div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            vText:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            vHtml:"<em>This is a v-text</em>,<i>Just like innerText</i>",
            vShow:false,
            firstif:false,
            secondeif:false
        }
    })
</script>

另外兩個節點不會渲染：

在這裡插入圖片描述

  • 同時控制一組元素：
//依舊是剛才的js程式碼：
<div v-if="firstif">This is the if node</div>
<div v-else-if="secondeif">This is the else if node</div>
<template v-else>
    <h1>This is the else node</h1>
    <h2>This is the else node</h2>
    <h3>This is the else node</h3>
    <h4>This is the else node</h4>
    <h5>This is the else node</h5>
</template>

template並不會被顯示出來：

在這裡插入圖片描述

v-for：

  • 期望值型別：Array | Object | number | string;

  • 用法：

    基於源資料多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression ，為當前遍歷的元素提供別名

  • 示例：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以為陣列索引指定別名 (或者用於物件的鍵)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-for 預設行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個 key 的特殊屬性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
  • 完整例項：

<ol>
    <li v-for="item in items">{{item}}</li>
</ol>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items:["The","arr","list"]
        }
    })
</script>

在這裡插入圖片描述

  • 但是更高明或者說更標準的用法是給渲染的元素新增Key值，更有效能的提升：
<ol>
    <li v-for="(item,index) in items2" :key="index">{{item}}</li>
</ol>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items2:["The","arr2","list","and","get","keys"]
        }
    })
</script>

對比上一次的結果： 在這裡插入圖片描述

  • 有時候，遍歷物件往往比遍歷陣列多：
<ol>
    <li v-for="(item,index) in objPerson" :key="index">name:{{item.name}},age:{{item.name}}</li>
</ol>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            objPerson:[
                {name:"Lucy",age:"18"},
                {name:"Bob",age:"19"},
                {name:"Tom",age:"21"}
            ]
        }
    })
</script>

輸出結果：

在這裡插入圖片描述

  • 遍歷物件屬性：
<ol>
    <li v-for="(value,key,index) in objInfo" :key="index">
        value:{{value}},
        key:{{key}},
        index:{{index}}
    </li>
</ol>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            objInfo:{
                name:"Lucy",
                age:"18",
                sex:"girl",
                hobby:"ride"
            }
        }
    })
</script>

在這裡插入圖片描述

值得注意的是，vue和react的元件渲染列表時都會有個key值的，這個key是用於元件渲染時的索引，方便的是後續的更多操作，這個在vue的官網展示視訊裡有很好的體現，而這個key值同樣可以根據自己定義id值繫結，只需要寫成這樣就是，{id：1}==>key:“id”

vue的陣列方法

  • 雙向資料繫結的vue肯定支援資料的動態渲染！
  • 新的程式碼加入，控制一個數組的資料新增：
<input type="button" value="Push" onclick="pushArr()">
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            objPerson: [
                { name: "Lucy", age: "18" },
                { name: "Bob", age: "19" },
                { name: "Tom", age: "21" }
            ]
        }
    })
    function pushArr() {
        console.log(app._data.objPerson.push({
            name:"Ally",
            age:"25"
        }));
    }
</script>
  • 支援變化的元素渲染：

在這裡插入圖片描述

同樣，vue實現了眾多陣列方法改變資料時的渲染：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • reverse()

資料的篩選重組和排序

  • 目前來說，可以將資料通過外部函式更改資料內容，外部函式要麼主動觸發，要麼自動執行，自執行又會涉及到非同步問題！vue為了解決對資料的加工，在例項化vue物件的時候，可以為物件新增一個用於更改資料的方法，這個方法包含在computed屬性裡。

  • 來看一個完整的例項：


<ol>
    <li v-for="(item,index) in sortedArr" :key="index">{{item}}</li>
</ol>
<script type="text/javascript">
    var app = new Vue({
        el: '#ap

相關推薦

Vue的開始以及基本指令詳解

為什麼學vue？ vue是中國大神尤雨溪建立的js框架。 Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與

vue內置指令詳解——小白速會

ret 表單元 www. reverse 副本 用法 以及 erb handle 指令 (Directives) 是帶有 v- 前綴的特殊屬性，職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。 內置指令 1、v-bind：響應並更新DOM特性；例如：

jvm的基本結構以及各部分詳解（轉）

所有 提示 ins 垃圾回收機制 擁有 .html lin try 應用 原文鏈接：https://www.cnblogs.com/zwbg/p/6194470.html 1、java虛擬機的基本結構 圖： 1、類加載器子系統從文件系統或者網絡中加載Class信

Vue.directive添加全局指令詳解

col -m UNC test 小寫 var 應該 dom元素 應用 自定義指令創建： Vue.directive( ‘mycolor(指令名稱:推薦全部小寫，駝峰命名會出現問題，看最後面)‘ , { 　　bind:function(){}, 　　//本例只介紹insert

Vue 指令 詳解

程式碼塊放上來後，程式碼縮排有點問題，還請諒解，將就看看就好。 1. v-if & v-else &v-show 條件判斷 <!DOCTYPE html> <html> <head> <title>v-if

Vue入門和基礎——Vue的指令詳解

Vue入門和基礎（三） vue中常用的指令詳解： 1.v-text： <span v-text="message"></span> <span>{{msg}}</span> 上述兩者等價。 2.v-html： <div

vue內建指令詳解

指令是Vue模板中最常用的一項功能，它帶有字首v-，主要職責是當其表示式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內建指令詳解,需要的朋友可以參考下 指令 (Directives) 是帶有 v- 字首的特殊屬性， 職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於

Vue常用指令詳解分析

Vue入門 Vue是一個MVVM（Model / View / ViewModel）的前端框架，相對於Angular來說簡單、易學上手快，近兩年也也別流行，發展速度較快，已經超越Angular了。比較適用於移動端，輕量級的框架，檔案小，執行速度快。最近，閒來無事，所以學習一下Vue這個流行的框架，以備後用。

Java中PrintWriter、BufferedWriter以及BufferredReader基本使用詳解

PrintWriter的使用 PrintWriter:是具有自動行重新整理的緩衝字元輸出流，這是一個高階流。所謂的自動行重新整理，意思就是說：在建構函式中指定autoFlush的值為true時，則 println()、printf() 或 format(

Vue.js——v-指令詳解，component元件

其實，2016年至今，Vue發展逐漸佔據主體，其“vue”為法語名，實則中文名為“view”，它主要是基於“MVVM”進行設計並開發的。 M——Model        模型，用於資料儲存 V——Vi

Spring基本功能詳解

tex factor oid out 負責 sch bsp 初始化 pub 一、SpringIOC 　　Spring的控制反轉：把對象的創建，初始化，銷毀的過程交給SpringIOC容器來做，由Spring容器控制對象的生命周期。 　　1.1 啟動Spring容器的方式：

Vue.js 插件開發詳解

js 前言隨著 Vue.js 越來越火，Vue.js 的相關插件也在不斷的被貢獻出來，數不勝數。比如官方推薦的 vue-router、vuex 等，都是非常優秀的插件。但是我們更多的人還只停留在使用的階段，比較少自己開發。所以接下來會通過一個簡單的 vue-toast 插件，來了解掌握插件的開發和使用。

angular 自定義指令 詳解--restrict、restrict、replace

emp bold span 類型 ret space con 設置 註意 Angularjs 允許根據實際業務需要自定義指令, 通過angular全局對象下的 directive 方法實現。可以自定義屬性、自定義標簽、自定義功能 接下來定義一個名叫custom的指令，並利用

angular 自定義指令詳解 Directive

聲明 其他 原型繼承 創建 tool 兩個 模板 變化 組合 廢話不多說，下面就直接上代碼 //angular指令的定義，myDirective ，使用駝峰命名法 angular.module(‘myApp‘, []) .directive(‘myDirective‘,

AngularJs自定義指令詳解（5） - link

演示 hang cursor off drag font 雙向 事件 date 在指令中操作DOM，我們需要link參數，這參數要求聲明一個函數，稱之為鏈接函數。 寫法： link: function(scope, element, attrs) {　　// 在這裏操作DO

angular指令詳解--自定義指令

修飾 cor ring ttr 子元素 標簽 常用 文本 利用 自定義指令 directive()這個方法是用來定義指令的： angular.module(‘myApp‘, []) .directive(‘myDirective‘, function ($timeout,

cmake指令詳解

後綴 符號鏈接 txt文件 之前 export 源文件 for offset pro 所需文件名：CmakeLists.txt,在需要操作的每個目錄下都需要 PROJECT(工程名字) 這條指令會自動創建兩個變量： <projectname>_BI

常見<meta>的基本用法詳解

代碼 簡介 clas 元素 word spa wid min mpat <meta charset="utf-8"> 定義與name 屬性相關的信息，使用 utf-8編碼方式編譯字符 <meta http-equiv="X-UA-Compatible" c

16位匯編第六講匯編指令詳解第第三講

不變 無符號 目的 分享 class 邏輯移位 aam 但是 二進制 　　　　 16位匯編第六講匯編指令詳解第第三講 1.十進制調整指令 1. 十進制數調整指令對二進制運算的結果進行十進制調

JVM指令詳解（下）

詳解 函數 icm ble family oat lan dex 語句 九、自增減指令 該指令用於對本地(局部)變量進行自增減操作。該指令第一參數為本地變量的編號，第二個參數為自增減的數量。 比如對於代碼： int d=10; d