2. 程式人生 > >Vue.js介紹及基本指令

Vue.js介紹及基本指令

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

什麼是vue

  1. Vue.js是目前最火的一個前端框架，而React.js是最流行的一個前端框架(React除了可以開發網站，還可以開發手機App，vue語法也是可以開發手機app，需要藉助於Weex)
  2. Vue.js是前端的主流框架之一，和Angular.js、React.js並稱為前端三大主流框架
  3. vue.js是一套構建使用者介面的框架，只關注檢視層，它不僅容易上手，還便於與第三方庫或既有專案整合。
  4. 在vue中，能夠幫助我們減少不必要的DOM操作，提高渲染效率，雙向資料繫結(通過框架提供的指令，我們前端只需要關心資料的業務邏輯，不用再關心DOM是如何渲染的)

框架和庫的區別

  1. 框架：是一套完整的解決方案，對專案的侵入性較大，如果專案需要更換框架，則需要重新架構整個專案。
  2. 庫(外掛)：提供某個小功能。對專案的侵入性較小。

前端中的MVVM思想

  1. MVVM是前端檢視層的概念
    1. MVVM是前端檢視層的分層開發思想，主要把每個頁面，分成了M，V，VM，其中VM是MVVM的核心思想，VM是M和V之間的排程者。
    2. M：儲存的是每個頁面中單獨的資料(後端返回的資料)
    3. V：頁面中的html程式碼
    4. VM：分割了M和V
    5. M和V互不可見，若要進行互動，必須通過VM
  2. 前端中使用MVVM，主要是為了我們更方便開發，因為MVVM提供了資料的雙向繫結(由VM提供)

Vue中實現MVVM的基本程式碼

<body>
    <!-- 將來new的Vue例項會控制這個元素中的所有內容 -->
 

    <!-- Vue 例項所控制的這個元素區域,就是我們的 view層 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>

<script src="vue-2.4.0.js"></script>
<script>
    /* 當我們匯入包之後,在瀏覽器的記憶體中，就多了一個Vue建構函式 */
    /* 建立一個vue的例項 也就是VM */
    var vm = new Vue({
    // el:表示當前new 的這個Vue例項,要控制頁面上的哪個區域
 

        el: '#app',
        data: {// data 屬性中存放的是el中要用到的資料,也就是Model
        	// 通過Vue提供的指令，很方便的就能把資料渲染到頁面上
            msg: '歡迎學習Vue' 
            // 前端的Vue之類的框架,不提倡我們去手動操作DOM元素了
        }
    });
</script>

Vue指令

  1. v-cloak
    用於解決網速過慢導致的插值表示式閃爍的問題
  2. v-text
    與插值表示式的作用一樣，用於渲染資料
    1. 預設v-text是沒有閃爍問題的
    2. 標籤中，插值表示式{{ data }}的前後可以放任意內容，而使用v-text指令後，標籤裡其它內容都不會被解析
  3. v-html
    用於渲染含有html程式碼的資料
  4. v-bind
    將資料與屬性的值繫結
    縮寫：title=‘msg’
  5. v-on
    用來繫結事件的
    縮寫@click:‘show’
  6. v-model
    用來實現資料的雙向繫結，只能運用在表單元素中，與表單中的value值雙向繫結。而v-bind只能實現M->V的單向繫結。
  7. v-for
    該指令可以用來遍歷陣列、物件、或者數字迭代
    • v-for使用注意事項
      1. 在元件中，使用v-for迴圈的時候，或者在一些特殊情況中，如果v-for有問題,必須在使用v-for的同時，指定唯一的字串/數字 型別的 :key值
  8. v-if 和v-show的區別
    • 使用v-if時，每次都將刪除或建立元素，而使用v-show，只是將元素設定為display：none/block。
    • v-if有較高的效能消耗，而v-show有較高的初始渲染消耗。
    • 如果元素涉及到頻繁的切換，最好不好使用v-if，推薦使用v-show
    • 如果元素可能永遠或者很少會顯示出來被使用者看到，則推薦使用v-if

v-on中事件修飾符

  • .stop :阻止冒泡
  • .prevent：阻止預設事件
  • .capture：新增事件偵聽器時使用事件捕獲模式
  • .self：當事件在該元素本身(比如不是子元素)觸發時觸發回撥
  • .once：事件只觸發一次

相關推薦

Vue.js介紹及基本指令

什麼是vue Vue.js是目前最火的一個前端框架，而React.js是最流行的一個前端框架(React除了可以開發網站，還可以開發手機App，vue語法也是可以開發手機app，需要藉助於Weex) Vue.js是前端的主流框架之一，和Angular.js、R

vue.js介紹及vue.js優缺點

什麼是vue.js Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈

Vue.js基本程式碼及基本指令

目錄 Tips Tips 1.Vue初步使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

從零開始學 Web 之 Vue.js（一）Vue.js概述，基本結構，指令，事件修飾符，樣式

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

Vue.js學習（常用指令）

v-on -m 裏的 oid 必須 不同 調用 ssa 事件綁定 Vue.js的指令是以v-開頭，它們用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性。

微信小程序 WXML、WXSS 和JS介紹及詳解

名單 獲取 hang href 直接 last 1.2 data sub 前幾天折騰了下。然後列出一些實驗結果，供大家參考。 百牛信息技術bainiu.ltd整理發布於博客園 0. 使用開發工具模擬的和真機差異還是比較大的。也建議大家還是真機調試比較靠譜。 1. WXML(

shell介紹及基本用法

shell alias 重定向8.1：shell介紹：shell是一個命令解釋器，提供用戶和機器之間的交互，支持特定語法，支持邏輯判斷、循環，並且每個用戶都可以有自己的shell:Centos默認的shell是bash(Bourne Agin Shell)：其實為了紀念sh的創造者bourne這個用戶

萌新--關於vue.js入門及環境搭建

art 安裝 list 建議 href pack 推薦 新手學 走了 十幾天閉關修煉，惡補了html跟css以及JavaScript相應的基礎知識，恰巧有個群友準備做開源項目，願意帶著我做，但是要求我必須懂vue.js，所以開始惡補vue.js相關的東西。 在淘寶上買了相關

泛型1：介紹及基本使用方式

前言 編譯 color eno 核心 AC fix tor 生成器 前言 泛型實現了參數化類型的概念; 泛型的主要目的之一是用來指定容器要持有什麽類型的對象，編譯器保證類型的正確性; 多態也是一種泛化機制; 基本類型無法作為類型參數； 一.基本使用方式 　　泛型基本分為泛

haproxy介紹及基本配置

haproxy認證 haproxy 讀寫分離 haproxy動靜分離 一 簡介： 1 haproxy 介紹 HAProxy是一個使用C語言編寫的自由及開放源代碼軟件[1]，其提供高可用性、負載均衡，以及基於TCP和HTTP的應用程序代理。HAProxy特別適用於那些負載特大的web站點，這些站點通

Vue.js框架 v-model指令

Vue.js v-model v-model.number v-model.lazy v-model.trim v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有

RIP簡單介紹及基本配置

nbsp ext 路由表 狀態 ethernet pc機 查看 rip v1 watermark 配置R1，R2，R3-RIP版本1R1,R2，R3同下rip 1 network 172.16.0.0debug命令，查看rip數據接收情況debugging rip 1 te

HCNA——RIP簡單介紹及基本配置

除了 rip v1 們的 routing 優先 p地址 response 大小限制 由器 HCNA——RIP簡單介紹及基本配置 路由信息協議RIP 路由信息協議RIP（Routing Information Protocol）的簡稱，它是一種基於距離矢量（Distance-

Vue.js（1）- 指令和修飾符

<template> <div v-click v-text="msg" v-html="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div> <p @click="Func(arg)"

Node.js介紹及安裝

文章目錄 Node.js 是什麼 Node.js VS JQuery、ExtJS Node.js 的出現及應用場景 Node.js 優缺點 下載安裝

Docker入門及基本指令

Docker概念 Docker就相當於一個Github賬號，不過最開始的工程不能自己建立，要從DockerHub這個中央倉庫pull過來，這個工程Docker稱之為image，這個image竟然是個linux系統！！這是什麼概念?！以前我可以傳傳程式碼帶Github上就覺著很厲害了，現在我竟然可以有無限個作

vue的安裝及基本配置項筆記

1、安裝     （1）下載並安裝 node.js     （2）npm install 安裝 npm，可繼續安裝 cnpm（npm install -g cnpm）或直接下一步 2、新建     （1）找到或新建一個

說說 Vue.js 例項及資料繫結能力

1 建立例項 通過 Vue() 建構函式就可以建立一個 Vue 的根例項： var app = new Vue({ ... }); 1.1 el 選項 el 選項用於繫結頁面中的某個 DOM 元素。它可以是 HTMLElement 或是 CSS 選擇器。

Vue.js介紹

Vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和元件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。 如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DO

Vue.js實戰學習-Vue.js理解及資料繫結

1.Vue.js是什麼？     Vue.js是一個漸進式的javaScript框架，在專案中，可以選擇從不同的維度去使用它。 2.使用的模式：     MVVM模式：Model-View-ViewModel,當View(檢視層)變化時，會自動