初級Vue以及基本指令

北北北北北^發表於2020-12-14
Vue

vue初級

前言

本文介紹了vue的特點以及基本指令。
ps：由於這是小編第一次創作，有很多不足的之處，希望各位大神海涵，歡迎各位大神在評論區補充 。

一、Vue是什麼？

首先Vue.js是一套響應式系統，前端開發庫。在現在的市場上，Vue是非常流行的JavaScript技術開發框架之一，其他的前端開發庫也有很多，比如jQuery、ExtJS、Angular等。
這是官網 http://cn.vuejs.org

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

Vue的作者，就是大名鼎鼎的“尤雨溪”。
尤雨溪畢業於上海復旦附中，在美國完成大學學業，本科畢業於Colgate University，後在Parsons設計學院獲得Design & Technology藝術碩士學位。在2014年2月開源了這個前端開發庫Vue.js。

二、Vue的優缺點

1.優點

①輕量級框，體積小，執行速度快

②簡單易學

③雙向資料繫結

④元件化開發

⑤虛擬DOM

⑥指令系統

2.缺點

①相容性差，不支援ie8以下的瀏覽器

②seo優化不好

三、安裝

①script

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

開發版本

生產版本

②npm

檢視npm配置

npm config list

如果映象地址不是淘寶，設定淘寶映象

npm config set registry https://registry.npm.taobao.org

下載vue

npm install vue

(2)使用

第一步：引入vue.js

<script src="./node_modules/vue/dist/vue.js"></script>

src的地址是本地或者線上的都可以

第二步：設定一個掛載點

<div id="app"></div>

建議設定為id屬性，因為vue只會匹配到第一個指定的元素作為掛載點

第三步：例項化vue，並傳入配置引數

new Vue({
    el:"#app",//el element 相當於getElementById、querySelector
    data:{//定義初始資料
        msg:'hello vue.js'
    }
})

(3)函式的宣告和使用

methods配置選項來宣告自定義函式

<script>
new Vue({
    el:"#app",//el element 相當於getElementById、querySelector
    data:{//定義初始資料
        msg:'hello vue.js'
    },
    methods:{
        // 宣告自定義函式
        // getMsg:function(){
        //     console.log('getmsg....')
        // }
        getMsg(){
            console.log('get new msg...')
            //獲取vue例項中的初始資料
            console.log(this.msg)
        }
    }
})
</script>

在掛載點內呼叫宣告好的函式

<div id="app">
    <!-- 在掛載點內呼叫函式，注意要在函式名稱後面加上小括號 -->
    {{ getMsg() }}
</div>

四、指令系統

<標籤 v-指令></標籤>

1.資料雙向繫結

v-model可以給表單元素進行資料的雙向繫結，可以展示初始資料，並在頁面中對初始資料進行修改

示例程式碼：

<div id="app">
    <!-- 給輸入框進行資料的繫結 -->
    <input v-model="msg"/>
    <!-- 在h1中展示資料 -->
    <h1>{{ msg }}</h1>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:''
        }
    })
</script>

2.內容展示

①{{ }} 文字插值語法（Mustache）

在文字插值語法中，可以展示變數、執行單行js語法

<!-- 在h1中展示資料 -->
<h1>{{ msg }}</h1>
<!-- 呼叫函式 -->
{{ getMsg() }}
<!-- 三目運算 -->
{{ isok ? '已登入':'未登入' }}
<!-- 直接進行數學運算 -->
{{ 10 + 30 }}
<!-- 呼叫物件型別資料中的屬性 -->
{{ info.name }}

②v-text

<h1 v-text="msg"></h1>

v-text適用於內容固定的場景，會把指定標籤內容替換成v-text資料繫結的值。

③v-html

v-text和v-html非常相似，但是v-html可以解析html語法

<h1 v-html="msg"></h1>

3.條件判斷

(1)v-if、v-else、v-else-if

v-if 單路分支

<標籤 v-if="布林值或者條件表示式" ></標籤>

當布林值或者條件表示式為true時，指定的標籤會在頁面結構中存在，否則就不存在

v-if、v-else 雙路分支

<標籤 v-if="布林值或者條件表示式" ></標籤>
<標籤 v-else></標籤>

v-if、v-else-if … 、v-else 多路分支

<標籤1 v-if="布林值或者條件表示式" ></標籤>
<標籤n v-else-if="布林值或者條件表示式n" ></標籤>
...
<標籤n+1 v-else></標籤n+1>

！！！重點 v-else和v-else-if只能依存於v-if才能使用

(2)v-show

v-show作用是根據指定的布林值或者條件表示式，來顯示/不顯示指定的標籤

如果布林值或者條件表示式為true時，則在頁面中顯示指定的標籤

否則，在指定的標籤上新增了一個display:none

v-if和v-show的區別

相同之處：都可以根據布林值或者條件表示式來控制指定的元素在頁面上顯示/不顯示

不同之處：

v-if它是惰性載入，只有滿足條件的標籤才會在頁面結構中存在；

v-show不論條件表單式是否或者false，對應的標籤都會在頁面結構中存在，只不過當結果為true時才顯示，為false時會給指定的元素新增display:none。

示例程式碼：

 <a href="" v-if="islogin">請登入</a>
 <a href="" v-else>歡迎</a>
 <hr>
 <a href="" v-show="islogin">請登入</a>
 <a href="" v-show="!islogin">歡迎</a>

五、容易忘記的小知識點

1、在標籤內使用 i-text=“msg”想加其他字元，需要加上模板字串``。
2、v-show可以根據指定條件表示式來控制標籤的顯示或隱藏，相當於給標籤增加了行內樣式display：none或display：block ，指定條件前面可以加！為“‘非’這個條件”。二者都可以寫布林值和條件判斷語句。
3、事件繫結，如果要執行的函式內只有一行程式碼，可以簡寫成v-on：事件名稱=“要執行的程式碼語句”。
同時 v-on:可以縮寫成@加事件名稱。
4、屬性繫結，v-bind，可以縮寫成 : scr 這種格式 scr代表某個標籤的屬性。

總結

提示：這裡對文章進行總結：
例如：以上就是今天要講的內容，本文僅僅簡單介紹了vue的使用，有不足的地方歡迎大家來補充，接下來我會不定時的發一些小心得，如果轉載本文，請標明原處！

相關文章