Vue2.x基礎(chǔ)（一）

Vue 是什么？

  • Vue (讀音 /vju?/，類(lèi)似于 view) 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架

  • vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合

指令

  • 本質(zhì)就是自定義屬性

  • Vue中指定都是以 v- 開(kāi)頭

v-cloak

  • 防止頁(yè)面加載時(shí)出現(xiàn)閃爍問(wèn)題
 <style type="text/css">
  /* 
    1、通過(guò)屬性選擇器 選擇到 帶有屬性 v-cloak的標(biāo)簽  讓他隱藏
 */
  [v-cloak]{
    /* 元素隱藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 讓帶有插值 語(yǔ)法的   添加 v-cloak 屬性 
         在 數(shù)據(jù)渲染完場(chǎng)之后，v-cloak 屬性會(huì)被自動(dòng)去除，
         v-cloak一旦移除也就是沒(méi)有這個(gè)屬性了  屬性選擇器就選擇不到該標(biāo)簽
         也就是對(duì)應(yīng)的標(biāo)簽會(huì)變?yōu)榭梢?jiàn)
    -->
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存儲(chǔ)的是數(shù)據(jù)
      data: {
        msg: 'Hello Vue'
      }
    });
</script>
</body>
</html>

v-text

  • v-text指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類(lèi)似，但是沒(méi)有閃動(dòng)問(wèn)題

  • 如果數(shù)據(jù)中有HTML標(biāo)簽會(huì)將html標(biāo)簽一并輸出

  • 注意：此處為單向綁定，數(shù)據(jù)對(duì)象上的值改變，插值會(huì)發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會(huì)影響數(shù)據(jù)對(duì)象的值

<div id="app">
    <!--  
        注意:在指令中不要寫(xiě)插值語(yǔ)法  直接寫(xiě)對(duì)應(yīng)的變量名稱(chēng) 
        在 v-text 中 賦值的時(shí)候不要在寫(xiě) 插值語(yǔ)法
        一般屬性中不加 {{}}  直接寫(xiě) 對(duì)應(yīng) 的數(shù)據(jù)名 
    -->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在標(biāo)簽的 內(nèi)容中 才用插值語(yǔ)法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-html

  • 用法和v-text 相似 但是他可以將HTML片段填充到標(biāo)簽中

  • 可能有安全問(wèn)題, 一般只在可信任內(nèi)容上使用 v-html，永不用在用戶(hù)提交的內(nèi)容上

  • 它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會(huì)對(duì)其再進(jìn)行html解析，但v-html會(huì)將其當(dāng)html標(biāo)簽解析后輸出。

<div id="app">
　　<p v-html="html"></p> <!-- 輸出：html標(biāo)簽在渲染的時(shí)候被解析 -->
    
    <p>{{message}}</p> <!-- 輸出：<span>通過(guò)雙括號(hào)綁定</span> -->
    
　　<p v-text="text"></p> <!-- 輸出：<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通過(guò)雙括號(hào)綁定</span>",
　　　　html: "<span>html標(biāo)簽在渲染的時(shí)候被解析</span>",
　　　　text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>",
　　}
 });
</script>

v-pre

  • 顯示原始信息跳過(guò)編譯過(guò)程

  • 跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。

  • 一些靜態(tài)的內(nèi)容不需要編譯加這個(gè)指令可以加快渲染

    <span v-pre>{{ this will not be compiled }}</span>    
    <!--  顯示的是{{ this will not be compiled }}  -->
    <span v-pre>{{msg}}</span>  
     <!--   即使data里面定義了msg這里仍然是顯示的{{msg}}  -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-once

  • 執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新】
  <!-- 即使data里面定義了msg 后期我們修改了 仍然顯示的是第一次data里面存儲(chǔ)的數(shù)據(jù)即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

雙向數(shù)據(jù)綁定

  • 當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化

  • 當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化

v-model

  • v-model是一個(gè)指令，限制在 <input>、<select>、<textarea>、components中使用
 <div id="app">
      <div>{{msg}}</div>
      <div>
          當(dāng)輸入框中內(nèi)容改變的時(shí)候，  頁(yè)面上的msg  會(huì)自動(dòng)更新
        <input type="text" v-model='msg'>
      </div>
  </div>

mvvm

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

  • m: model

    • 數(shù)據(jù)層 Vue 中 數(shù)據(jù)層 都放在 data 里面

  • v: view 視圖

    • Vue 中 view 即 我們的HTML頁(yè)面

  • vm: （view-model） 控制器 將數(shù)據(jù)和視圖層建立聯(lián)系

    • vm 即 Vue 的實(shí)例 就是 vm

v-on

  • 用來(lái)綁定事件的

  • 形式如：v-on:click 縮寫(xiě)為 @click;

@click.png

v-on事件函數(shù)中傳入?yún)?shù)


<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接綁定函數(shù)名稱(chēng)，那么默認(rèn)會(huì)傳遞事件對(duì)象作為事件函數(shù)的第一個(gè)參數(shù) -->
            <button v-on:click='handle1'>點(diǎn)擊1</button>
            <!-- 2、如果事件綁定函數(shù)調(diào)用，那么事件對(duì)象必須作為最后一個(gè)參數(shù)顯示傳遞，
                 并且事件對(duì)象的名稱(chēng)必須是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>點(diǎn)擊2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

事件修飾符

  • 在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。

  • Vue 不推薦我們操作DOM 為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符

  • 修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián)   即阻止冒泡也阻止默認(rèn)事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

按鍵修飾符

  • 在做項(xiàng)目中有時(shí)會(huì)用到鍵盤(pán)事件，在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -當(dāng)點(diǎn)擊enter 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--當(dāng)點(diǎn)擊enter或者space時(shí)  時(shí)調(diào)用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >



<script>
  /*
    常用的按鍵修飾符
    .enter =>    enter鍵
    .tab => tab鍵
    .delete (捕獲“刪除”和“退格”按鍵) =>  刪除鍵
    .esc => 取消鍵
    .space =>  空格鍵
    .up =>  上
    .down =>  下
    .left =>  左
    .right =>  右
  */
    var vm = new Vue({
    el:"#app",
    methods: {
      submit:function(){},
      alertMe:function(){},
    }
  })

</script>

自定義按鍵修飾符別名

  • 在Vue中可以通過(guò)config.keyCodes自定義按鍵修飾符別名
<div id="app">
    預(yù)先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會(huì)觸發(fā)prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
    
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

v-bind

  • v-bind 指令被用來(lái)響應(yīng)(動(dòng)態(tài))地更新 HTML 屬性，里面能夠讀取js表達(dá)式

  • v-bind:href 可以縮寫(xiě)為 :href;

<!-- 綁定一個(gè)屬性 -->
<img v-bind:src="imageSrc">

<!-- 縮寫(xiě) -->
<img :src="imageSrc">

綁定對(duì)象

  • 我們可以給v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換class。

  • 注意：v-bind:class指令可以與普通的class特性共存

<!-- 
    v-bind 中支持綁定一個(gè)對(duì)象,如果綁定的是一個(gè)對(duì)象則鍵為對(duì)應(yīng)的類(lèi)名值為對(duì)應(yīng)data中的數(shù)據(jù) 

    HTML最終渲染為 <ul class="box textColor textSize"></ul>
    注意：
        textColor，textSize  對(duì)應(yīng)的渲染到頁(yè)面上的CSS類(lèi)名 
        isColor，isSize  對(duì)應(yīng)vue data中的數(shù)據(jù)  如果為true 則對(duì)應(yīng)的類(lèi)名 渲染到頁(yè)面上 


        當(dāng) isColor 和 isSize 變化時(shí)，class列表將相應(yīng)的更新，
        例如，將isSize改成false，
        class列表將變?yōu)?<ul class="box textColor"></ul>
-->

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>學(xué)習(xí)Vue</li>
    <li>學(xué)習(xí)Node</li>
    <li>學(xué)習(xí)React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">對(duì)象語(yǔ)法</div>

<script>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
        activeColor:"red",
        activeSize:"25px",
    }
})
</script>
<style>

    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

綁定class

<!-- 2、v-bind 中支持綁定一個(gè)數(shù)組，數(shù)組中classA和 classB 對(duì)應(yīng)為data中的數(shù)據(jù)
這里的classA  對(duì)用data 中的  classA
這里的classB  對(duì)用data 中的  classB -->
<ul class="box" :class="[classA, classB]">
    <li>學(xué)習(xí)Vue</li>
    <li>學(xué)習(xí)Node</li>
    <li>學(xué)習(xí)React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

綁定對(duì)象和綁定數(shù)組 的區(qū)別

  • 綁定對(duì)象的時(shí)候 對(duì)象的屬性 即要渲染的類(lèi)名 對(duì)象的屬性值對(duì)應(yīng)的是 data 中的數(shù)據(jù)

  • 綁定數(shù)組的時(shí)候數(shù)組里面存的是data 中的數(shù)據(jù)

綁定style

 <div v-bind:style="styleObject">綁定樣式對(duì)象</div>'
 
<!-- CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號(hào)括起來(lái))    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內(nèi)聯(lián)樣式</div>

<!--組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>


<script>
    new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
        fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

分支結(jié)構(gòu)

v-if 使用場(chǎng)景

  • 1- 多個(gè)元素 通過(guò)條件判斷展示或者隱藏某個(gè)元素?；蛘叨鄠€(gè)元素

  • 2- 進(jìn)行兩個(gè)視圖之間的切換

<div id="app">
        <!--  判斷是否加載，如果為真，就加載，否則不加載-->
        <span v-if="flag">
           如果flag為true則顯示,false不顯示!
        </span>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })
</script>

----------------------------------------------------------

    <div v-if="type === 'A'">
       A
    </div>
  <!-- v-else-if緊跟在v-if或v-else-if之后   表示v-if條件不成立時(shí)執(zhí)行-->
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
  <!-- v-else緊跟在v-if或v-else-if之后-->
    <div v-else>
       Not A/B/C
    </div>

<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
</script>

v-show 和 v-if的區(qū)別

  • v-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏

    • v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷(xiāo)毀和創(chuàng)建，故v-show性能更好一點(diǎn)。

  • v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素

    • v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件

循環(huán)結(jié)構(gòu)

v-for

  • 用于循環(huán)的數(shù)組里面的值可以是對(duì)象，也可以是普通元素
<ul id="example-1">
   <!-- 循環(huán)結(jié)構(gòu)-遍歷數(shù)組  
    item 是我們自己定義的一個(gè)名字  代表數(shù)組里面的每一項(xiàng)  
    items對(duì)應(yīng)的是 data中的數(shù)組-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

  • 不推薦同時(shí)使用 v-if 和 v-for

  • 當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

   <!--  循環(huán)結(jié)構(gòu)-遍歷對(duì)象
        v 代表   對(duì)象的value
        k  代表對(duì)象的 鍵 
        i  代表索引 
    ---> 
     <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
    obj: {
        uname: 'zhangsan',
        age: 13,
        gender: 'female'
    }
  }
})
</script>

  • key 的作用

    • key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)

    • key的作用主要是為了高效的更新虛擬DOM

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容