香蕉大美女天天爱天天做,国产成人精品三上悠亚久久,性高湖久久久久久久久aaaaa

一、Vue概述

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架
vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合
?易用:熟悉HTML、CSS、JavaScript知識后，可快速上手Vue
?靈活:在一個庫和一套完整框架之間自如伸縮
?高效:20kB運行大小，超快虛擬 DOM

二、Vue基本使用

使用Vue將helloworld 渲染到頁面上

實例參數分析

el: 元素的掛載位置(值可以是CSS選擇器或者DOM元素)
data:模型數據(值是一個對象)

插值表達式用法

將數據填充到HTML標簽中
插值表達式支持基本的計算操作

Vue代碼運行原理分析

概述編譯過程的概念(Vue語法→原生語法)

三、Vue模板語法

3.1 指令

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

3.1.1 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>

3.1.2 數據綁定指令

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>

3.1.3 數據響應式

v-once

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

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

3.2 雙向數據綁定

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

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

3.3 事件綁定

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方法
    其實直接用樹值，如寫v-on:keydown.116="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>

3.4 屬性綁定

v-bind

v-bind 指令被用來響應地更新 HTML 屬性
v-bind:href 可以縮寫為 :href;

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

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

v-model的低層實現原理分析

使用輸入域中最新的數據覆蓋原來的數據
<input v-bind:value="msg" v-on:input="msg=$event.target.value">

3.5 樣式綁定

class樣式處理

對象語法
<div v-bind:class="{ active: isActive }"></div>
isActive的值是布爾值，控制類名是否添加到標簽上，類似toggleClass方法
數組語法
<div v-bind:class="[activeClass, errorClass]"></div>
activeClass和errorClass的值會被分別添加到樣式名中

style樣式處理

對象語法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
數組語法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

綁定對象

我們可以給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 :class="objClasses">對象語法簡化操作</div>
<sript>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
        objClasses:{ //綁定該屬性的標簽實際效果為： class="objColor objSize"
             objColor:true,
             objSize:true
        }
    }
})
</sript>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

綁定數組

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>
<div :class="arrClasses">數組語法綁定簡化操作</div>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘,
        arrClasses:["textColor","textSize"]
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

綁定對象和綁定數組的區別

它們可以結合使用，如:class="[activeClass,errorClass,{test:isTest}]"

綁定對象的時候，對象的屬性就是要渲染的類名，對象的屬性值對應的是 data中的數據
綁定數組的時候數組里面存的是data中的數據

綁定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',
             width: '100px' 
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

3.6 分支結構

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切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件

3.7 循環結構

v-for

v-for遍歷數組
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
key的作用:給每個節點綁定唯一標識(可以是id或者index)，幫助Vue區分不同的元素，從而提高性能。不會加到DOM上，對開發沒有影響
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
用于循環的數組里面的值可以是對象，也可以是普通元素

<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>

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

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

v-for遍歷對象
<div v-for='(value, key, index) in object'></div>
v-if和v-for結合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。即先遍歷一遍數組，再判斷v-if里面的條件。對于性能并不友好，因此不推薦同時使用 v-if 和 v-for

<!--  循環結構-遍歷對象
        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>

四、選項卡案例

4.1 HTML 結構

    <div id="app">
        <div class="tab">
            <!--  tab欄  -->
            <ul>
                <li class="active">apple</li>
                <li class="">orange</li>
                <li class="">lemon</li>
            </ul>
              <!--  對應顯示的圖片 -->
            <div class="current"><img src="img/apple.png"></div>
            <div class=""><img src="img/orange.png"></div>
            <div class=""><img src="img/lemon.png"></div>
        </div>
    </div>

4.2 提供的數據

         list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]

4.3 把數據渲染到頁面

把tab欄中的數替換到頁面上

把 data 中 title 利用 v-for 循環渲染到頁面上
把 data 中 path利用 v-for 循環渲染到頁面上

    <div id="app">
        <div class="tab">  
            <ul>
                  <!--  
                    1、綁定key的作用 提高Vue的性能 
                    2、 key 需要是唯一的標識 所以需要使用id， 也可以使用index ，
                      index 也是唯一的 
                    3、 item 是 數組中對應的每一項  
                    4、 index 是 每一項的 索引
                -->
                   <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
              </ul>
              <div  :key='item.id' v-for='(item, index) in list'>
                    <!-- :  是 v-bind 的簡寫   綁定屬性使用 v-bind -->
                    <img :src="item.path">
              </div>
        </div>
    </div>
<script>
    new  Vue({
        //  指定 操作元素 是 id 為app 的 
        el: '#app',
            data: {
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            }
    })

</script>

4.4 給每一個tab欄添加事件,并讓選中的高亮

1. 讓默認的第一項tab欄高亮
- tab欄高亮通過添加類名active 來實現（CSS active 的樣式已經提前寫好）
  - 在data 中定義一個默認的索引 currentIndex 為 0
  - 給第一個li 添加 active 的類名
    - 通過動態綁定class 來實現第一個li 的索引為 0 和 currentIndex 的值剛好相等
    - currentIndex === index 如果相等則添加類名 active 否則添加空類名

2. 讓默認的第一項tab欄對應的div 顯示

實現思路和第一個 tab 實現思路一樣只不過這里控制第一個div 顯示的類名是 current

  <ul>
     <!-- 動態綁定class   有 active   類名高亮  無 active   不高亮-->
       <li  :class='currentIndex==index?"active":""'
           :key='item.id' v-for='(item,index) in list'
           >{{item.title}}</li>
  </ul>
  <!-- 動態綁定class   有 current  類名顯示  無 current  隱藏-->
  <div :class='currentIndex==index?"current":""' 
       
       :key='item.id' v-for='(item, index) in list'>
        <!-- :  是 v-bind 的簡寫   綁定屬性使用 v-bind -->
        <img :src="item.path">
  </div>
<script>
    new  Vue({
        el: '#app',
            data: {
                currentIndex: 0, // 選項卡當前的索引  默認為 0  
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            }
    })
</script>

3. 點擊每一個tab欄當前的高亮其他的取消高亮

給每一個li添加點擊事件
讓當前的索引 index 和當前 currentIndex 的值進項比較

如果相等則當前li 添加active 類名當前的 li 高亮當前對應索引的 div 添加 current 當前div 顯示其他隱藏

    <div id="app">
        <div class="tab">
            <ul>
                <!--  通過v-on 添加點擊事件   需要把當前li 的索引傳過去 
                -->
                <li v-on:click='change(index)'                          
                    :class='currentIndex==index?"active":""'                   
                    :key='item.id' 
                    v-for='(item,index) in list'>{{item.title}}</li>
            </ul>
            <div :class='currentIndex==index?"current":""' 
                 :key='item.id' v-for='(item, index) in list'>
                <img :src="item.path">
            </div>
        </div>
    </div>

<script>
    new  Vue({
        el: '#app',
            data: {
                currentIndex: 0, // 選項卡當前的索引  默認為 0  
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
            methods: {
                change: function(index) {
                    // 通過傳入過來的索引來讓當前的  currentIndex  和點擊的index 值 相等 
                    //  從而實現 控制類名    
                    this.currentIndex = index;
                }
            }
    })
</script>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

前端學習筆記二十三-Vue的基本使用和模版語法