溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

發(fā)布時(shí)間：2021-12-20 11:02:49 來(lái)源：億速云 閱讀：117 作者：小新 欄目：編程語(yǔ)言

這篇文章將為大家詳細(xì)講解有關(guān)Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、Vue基礎(chǔ)介紹

1.什么是Vue.js

  • Vue.js 是目前最火的一個(gè)前端框架，React是最流行的一個(gè)前端框架（React除了開(kāi)發(fā)網(wǎng)站，還可以開(kāi)發(fā)手機(jī)App， Vue語(yǔ)法也是可以用于進(jìn)行手機(jī)App開(kāi)發(fā)的，需要借助于Weex）

  • Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成為前端三大主流框架！

  • Vue.js 是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。(Vue有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā))

  • 前端的主要工作？主要負(fù)責(zé)MVC中的V這一層；主要工作就是和界面打交道，來(lái)制作前端頁(yè)面效果；

2.為什么要學(xué)習(xí)流行框架

  • 企業(yè)為了提高開(kāi)發(fā)效率：在企業(yè)中，時(shí)間就是效率，效率就是金錢；

  • 企業(yè)中，使用框架，能夠提高開(kāi)發(fā)的效率；

  • 提高開(kāi)發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫(kù) -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數(shù)據(jù)綁定的概念【通過(guò)框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯，不再關(guān)心DOM是如何渲染的了】）

  • 在Vue中，一個(gè)核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯；

3.Node（后端）中的 MVC 與 前端中的 MVVM 之間的區(qū)別

  • MVC 是后端的分層開(kāi)發(fā)概念；

  • MVVM是前端視圖層的概念，主要關(guān)注于 視圖層分離，也就是說(shuō)：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel

  • 為什么有了MVC還要有MVVM

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

MVVM是前端視圖層的分層開(kāi)發(fā)思想，主要把每個(gè)頁(yè)面，分成了M，V和VM，其中VM是MVVM的思想核心：因?yàn)閂M連接著M和V。
前端頁(yè)面中使用MVVM的思想，主要是為了讓我們開(kāi)發(fā)MVVM提供了數(shù)據(jù)的雙向綁定，雙向綁定是由VM提供的

二、Vue基本使用

??此次代碼工具是Visual Studio Code,小伙伴可自行下載安裝。

1.第一個(gè)案例

??代碼如下:

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 導(dǎo)入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script></head><body>
  <!-- 將來(lái) new 的Vue實(shí)例，會(huì)控制這個(gè) 元素中的所有內(nèi)容 -->
  <!-- 3. Vue 實(shí)例所控制的這個(gè)元素區(qū)域，就是我們的 V  -->
  <p id="app">
    <p>{{ msg }}</p>
  </p>

  <script>
    // 2. 創(chuàng)建一個(gè)Vue的實(shí)例
    // 當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中，就多了一個(gè) Vue 構(gòu)造函數(shù)
    //  注意：我們 new 出來(lái)的這個(gè) vm 對(duì)象，就是我們 MVVM中的 VM調(diào)度者
    var vm = new Vue({
      el: '#app',  // 表示，當(dāng)前我們 new 的這個(gè) Vue 實(shí)例，要控制頁(yè)面上的哪個(gè)區(qū)域
      // 這里的 data 就是 MVVM中的 M，專門用來(lái)保存 每個(gè)頁(yè)面的數(shù)據(jù)的
      data: { // data 屬性中，存放的是 el 中要用到的數(shù)據(jù)
      msg: '歡迎學(xué)習(xí)Vue' // 通過(guò) Vue 提供的指令，很方便的就能把數(shù)據(jù)渲染到頁(yè)面上，程序員不再手動(dòng)操作DOM元素了【前端的Vue之類的框架，不提倡我們?nèi)ナ謩?dòng)操作DOM元素了】
      }
    })
  </script></body></html>

注意代碼中的注釋！

訪問(wèn)頁(yè)面

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

2.常用指令

指令描述
{{}}插值表達(dá)式
v-cloak解決 插值表達(dá)式閃爍的問(wèn)題
v-text和插值一樣也是使用vue中的變量，但是默認(rèn)沒(méi)有閃縮問(wèn)題，但是會(huì)覆蓋原本的內(nèi)容，插值不會(huì)
v-html顯示HTML的內(nèi)容
v-bindVue提供的屬性綁定機(jī)制，縮寫(xiě)是 ‘:’
v-onVue提供的事件綁定機(jī)制，縮寫(xiě)是:’@’

2.1 插值表達(dá)式

??在HTML頁(yè)面中我們需要獲取Vue中的數(shù)據(jù)，這時(shí)我們可以通過(guò)插值表達(dá)式來(lái)獲取，如下

  <p id="app">
  	<!-- 插值表達(dá)式獲取vue中的msg信息 -->
    <p>{{ msg }}</p>
  </p>

  <script>
    var vm = new Vue({
      el: '#app', 
      data: {
        msg: '歡迎學(xué)習(xí)Vue' 
      }
    })</script>

注意：插值表達(dá)式有閃縮的問(wèn)題
我們以站點(diǎn)的方式啟動(dòng)，Ctrl+shift+p ：在輸入中搜索 如下

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

訪問(wèn)地址：http://localhost/xxx.html

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

加載完成就會(huì)變好！這就是插值閃爍的問(wèn)題

2.2 v-cloak

??v-cloak指令可以解決上面插值閃爍的問(wèn)題，如下：其實(shí)利用的就是當(dāng)插值沒(méi)有被加載出來(lái)的是通過(guò) style屬性將內(nèi)容給隱藏了。

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
       display: none; 
    }
  </style></head><body>
  <p id="app">
    <!-- 使用 v-cloak 能夠解決 插值表達(dá)式閃爍的問(wèn)題 -->
    <p v-cloak>++++++++ {{ msg }} ----------</p>
  </p>
  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
      }
    })
  </script></body></html>

2.3 v-text

??和插值差不多，也可以從vue對(duì)象中獲取信息，v-text默認(rèn)是沒(méi)有閃爍問(wèn)題的，但是會(huì)覆蓋掉原有的內(nèi)容，但是 插值表達(dá)式 只會(huì)替換自己的這個(gè)占位符，不會(huì)把 整個(gè)元素的內(nèi)容清空，如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script></head><body>
    <p id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        })
    </script></body></html>

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

2.4 v-html

??默認(rèn)我們從Vue對(duì)象中獲取的信息如果含有HTML標(biāo)簽的話只會(huì)當(dāng)做普通字符串顯示，如果我們要顯示標(biāo)簽的語(yǔ)義，那么需要使用v-html指令如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script></head><body>
    <p id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
        <p v-html="msg"></p>
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h4>hello vue</h4>"
            }
        })
    </script></body></html>

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

2.5 v-bind

??v-bind是 Vue中，提供的用于綁定屬性的指令,可簡(jiǎn)寫(xiě)為":",屬性中的內(nèi)容其實(shí)寫(xiě)的是js表達(dá)式，可以做類似的處理，見(jiàn)代碼。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script></head><body>
    <p id="app">
        <input type="button" value="提交1" title="提交按鈕"><br>
        <input type="button" value="提交2" v-bind:title="title">
        <!-- 注意： v-bind: 指令可以被簡(jiǎn)寫(xiě)為 :要綁定的屬性 -->
        <input type="button" value="提交2" :title="title">
        <!-- v-bind 中，可以寫(xiě)合法的JS表達(dá)式-->
       <input type="button" value="提交2" :title="title + ' bbb'">
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                title:"title123"
            }
        })
    </script></body></html>

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

2.6 v-on

??Vue 中提供了 v-on: 事件綁定機(jī)制,具體使用如下:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script></head><body>
    <p id="app">
        <input type="button" value="點(diǎn)擊" v-on:click="show">
        <!--還可以縮寫(xiě)為 @-->
        <input type="button" value="點(diǎn)擊" @click="show">
    </p>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h4>hello vue</h4>"
            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
        })
    </script></body></html>

Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些

關(guān)于“Vue基礎(chǔ)學(xué)習(xí)知識(shí)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手