Vue入門到跑路---vue基礎-有解無憂

Vue是什么

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架
vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合

使用Vue將msg里面的資料渲染到頁面上

<body>
    <div id="app">
        <!-- 1-需要提供標簽用于填充資料 -->
        <div>{{msg}}</div> 
        <!-- 2-差值運算式里面可以進行簡單的算數運算 -->
        <div>{{1 + 2}}</div>
    </div>
    <script src="../../JS/vue.js"></script> // 引入vue檔案
    <script>
        // 3-使用vue的語法做功能
        var vm = new Vue({
            el: '#app', // 獲取元素,如果是id傳入# 如果是類則傳入.
            // 4-把vue提供的資料填充到標簽里面
            data: { // data中存放要渲染到頁面上的資料
                msg: '你好' // msg中 存盤的值 '你好' 會將HTML差值語法中的msg替換掉
            }
        })
    </script>
</body>

如圖
在這里插入圖片描述

指令

本質就是自定義屬性
Vue中指定都是以 v- 開頭

v-cloak

防止頁面加載時出現閃爍問題

 <style type="text/css">
  /* 
    1、通過屬性選擇器 選擇到 帶有屬性 v-cloak的標簽  讓他隱藏
 */
  [v-cloak]{
    /* 元素隱藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 讓帶有插值 語法的   添加 v-cloak 屬性 
         在 資料渲染完場之后，v-cloak 屬性會被自動去除，
         v-cloak一旦移除也就是沒有這個屬性了  屬性選擇器就選擇不到該標簽
		 也就是對應的標簽會變為可見
    -->
    <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  里面存盤的是資料
      data: {
        msg: 'Hello Vue'
      }
    });
</script>
</body>
</html>

v-text

v-text指令用于將資料填充到標簽中，作用于插值運算式類似，但是沒有閃動問題
如果資料中有HTML標簽會將html標簽一并輸出
注意：此處為單向系結，資料物件上的值改變，插值會發生變化；但是當插值發生變化并不會影響資料物件的值

<div id="app">
    <!--  
		注意:在指令中不要寫插值語法  直接寫對應的變數名稱 
        在 v-text 中 賦值的時候不要在寫 插值語法
		一般屬性中不加 {{}}  直接寫 對應 的資料名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在標簽的 內容中 才用插值語法 -->
        {{msg}}
    </p>
</div>

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

</script>

v-html

用法和v-text 相似但是他可以將HTML片段填充到標簽中
可能有安全問題, 一般只在可信任內容上使用 v-html，永不用在用戶提交的內容上
它與v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html決議，但v-html會將其當html標簽決議后輸出，

<div id="app">
　　<p v-html="html"></p> <!-- 輸出：html標簽在渲染的時候被決議 -->
    
    <p>{{message}}</p> <!-- 輸出：<span>通過雙括號系結</span> -->
    
　　<p v-text="text"></p> <!-- 輸出：<span>html標簽在渲染的時候被原始碼輸出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通過雙括號系結</span>",
　　　　html: "<span>html標簽在渲染的時候被決議</span>",
　　　　text: "<span>html標簽在渲染的時候被原始碼輸出</span>",
　　}
 });
</script>

v-pre

顯示原始資訊跳過編譯程序
跳過這個元素和它的子元素的編譯程序，
一些靜態的內容不需要編譯加這個指令可以加快渲染

    <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

執行一次性的插值【當資料改變時，插值處的內容不會繼續更新】

- 

      <!-- 即使data里面定義了msg 后期我們修改了 仍然顯示的是第一次data里面存盤的資料即 Hello Vue.js  -->
         <span v-once>{{ msg}}</span>    
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue.js'
            }
        });
    </script>

雙向資料系結

當資料發生變化的時候，視圖也就發生變化
當視圖發生變化的時候，資料也會跟著同步變化

v-model

v-model是一個指令，限制在 input、select、textarea、components中使用

 <div id="app">
      <div>{{msg}}</div>
      <div>
          當輸入框中內容改變的時候，  頁面上的msg  會自動更新
        <input type="text" v-model='msg'>
      </div>
  </div>

mvvm

MVC 是后端的分層開發概念； MVVM是前端視圖層的概念，主要關注于視圖層分離，也就是說：MVVM把前端的視圖層，分為了三部分 Model, View , VM ViewModel
m model
- 資料層 Vue 中資料層都放在 data 里面
v view 視圖
- Vue 中 view 即我們的HTML頁面
vm （view-model）控制器將資料和視圖層建立聯系
- vm 即 Vue 的實體就是 vm

v-on

用來系結事件的
形式如：v-on:click 縮寫為 @click;

v-on事件函式中傳入引數

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接系結函式名稱，那么默認會傳遞事件物件作為事件函式的第一個引數 -->
            <button v-on:click='handle1'>點擊1</button>
            <!-- 2、如果事件系結函式呼叫，那么事件物件必須作為最后一個引數顯示傳遞，
                 并且事件物件的名稱必須是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>點擊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>

事件修飾符

在事件處理程式中呼叫 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求，
Vue 不推薦我們操作DOM 為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符
修飾符是由點開頭的指令后綴來表示的

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

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

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

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生，
因此，用 v-on:click.prevent.self 會阻止所有的點擊，
而 v-on:click.self.prevent 只會阻止對元素自身的點擊，

按鍵修飾符

在做專案中有時會用到鍵盤事件，在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵，Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符

<!-- 只有在 `keyCode` 是 13 時呼叫 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -當點擊enter 時呼叫 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--當點擊enter或者space時  時呼叫 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按鍵修飾符
.enter =>    enter鍵
.tab => tab鍵
.delete (捕獲“洗掉”和“退格”按鍵) =>  洗掉鍵
.esc => 取消鍵
.space =>  空格鍵
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>

自定義按鍵修飾符別名

在Vue中可以通過config.keyCodes自定義按鍵修飾符別名

<div id="app">
    預先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會觸發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 指令被用來回應地更新 HTML 屬性
v-bind:href 可以縮寫為 :href;

<!-- 系結一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 縮寫 -->
<img :src="imageSrc">

v-bind 操作樣式

class方式之系結物件

我們可以給v-bind:class 一個物件，以動態地切換class，
注意：v-bind:class指令可以與普通的class特性共存

1、 v-bind 中支持系結一個物件 
	如果系結的是一個物件 則 鍵為 對應的類名  值 為對應data中的資料 
<!-- 
	HTML最終渲染為 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  對應的渲染到頁面上的CSS類名	
		isColor，isSize  對應vue data中的資料  如果為true 則對應的類名 渲染到頁面上 


		當 isColor 和 isSize 變化時，class串列將相應的更新，
		例如，將isSize改成false，
		class串列將變為 <ul class="box textColor"></ul>
-->

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">物件語法</div>

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

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

class方式之系結陣列

2、  v-bind 中支持系結一個陣列    陣列中classA和 classB 對應為data中的資料

這里的classA  對用data 中的  classA
這里的classB  對用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習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>

系結物件和系結陣列的區別

系結物件的時候物件的屬性即要渲染的類名物件的屬性值對應的是 data 中的資料
系結陣列的時候陣列里面存的是data 中的資料

style方式之系結style

 <div v-bind:style="styleObject">系結樣式物件</div>'
 
<!-- CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">行內樣式</div>

<!--陣列語法可以將多個樣式物件應用到同一個元素 -->
<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>

分支結構

v-if 使用場景

1- 多個元素通過條件判斷展示或者隱藏某個元素，或者多個元素
2- 進行兩個視圖之間的切換

<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條件不成立時執行-->
    <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的區別

v-show本質就是標簽display設定為none，控制隱藏
- v-show只編譯一次，后面其實就是控制css，而v-if不停的銷毀和創建，故v-show性能更好一點，
v-if是動態的向DOM樹內添加或者洗掉DOM元素
- v-if切換有一個區域編譯/卸載的程序，切換程序中合適地銷毀和重建內部的事件監聽和子組件

回圈結構

v-for

用于回圈的陣列里面的值可以是物件，也可以是普通元素

<ul id="example-1">
   <!-- 回圈結構-遍歷陣列  
	item 是我們自己定義的一個名字  代表陣列里面的每一項  
	items對應的是 data中的陣列-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

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

不推薦同時使用 v-if 和 v-for
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，

   <!--  回圈結構-遍歷物件
		v 代表   物件的value
		k  代表物件的 鍵 
		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來給每個節點做一個唯一標識
key的作用主要是為了高效的更新虛擬DOM

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/80192.html

標籤：其他

上一篇：JavaScript 事件處理模型：冒泡&捕獲

下一篇：js實作簡單的點名器隨機色

Vue入門到跑路---vue基礎