vue2基礎總結

文章目錄

• • 漸進式架構
  • 環境搭建
  • Vue的基本模式(M V V M)
  • • • 擴充
      • mvc
      • mvp
  • Vue的生命周期
  • • 基礎生命周期
    • 幾個特别的生命周期
    • • activated
      • deactivated
    • nextTick
  • mustache模闆文法
  • 動态綁定行内樣式
  • vue中輸入框事件的使用
  • 動态建立元件和keep-alive緩存
  • Vue的常見指令
  • • v-model(服務于表單案例)
    • v-cloak
    • v-text
    • v-html
    • v-bind
    • v-on
    • v-if
    • v-show
    • v-one
    • v-lazy
  • 按鍵修飾符
  • • 事件修飾符
    • 鍵盤修飾符
    • 系統修飾鍵
    • 修飾符
  • ref refs
  • 在元件上綁定事件(.native)
  • 無法深度監聽時，采用this.$set 來動态添加響應資料
  • • vue無法監聽的數組變化的場景
    • 解決無法監聽數組變化的方法
    • vue無法監聽到對象變化的場景
    • 案例
    • • 擴充

漸進式架構

對“漸進式”這三個字的了解：Vue漸進式-先使用Vue的核心庫，再根據你的需要的功能再去逐漸增加加相應的插件。

環境搭建

通過 serve 來運作 打包後

serve index.html 
           

通過npm 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
           

安裝yarn

cnpm install -g yarn
           

Vue開發環境配置

• node
• cnpm/yarn
• cnpm install -g @vue/cli

建立項目的方式

vue create demo01

           

or

vue ui
           

Vue的基本模式(M V V M)

vue本生隻是實作了對data資料的監聽，并沒有實作對内部資料變化的監聽，但對js中大量的方法進行了從寫(push,splice,pop 等)，使之既能實作原有方法的功能，又可以更新視圖

擴充

連結

mvc

mvp

Vue的生命周期

基礎生命周期

總共分為8個階段 建立前/後，載入前/後，更新前/後，銷毀前/後

請求資料一般在 created 裡面就可以，此時可以操作data和methods;

如果涉及到需要頁面加載完成之後的話就用 mounted,也就是說如果要操作dom節點

幾個特别的生命周期

activated

路由元件生命周期，進入元件時觸發

deactivated

路由元件生命周期，進入元件時觸發

應用場景:當路由被緩存，destroy 将無法觸發，而這兩個路由鈎子還是會觸發

nextTick

将回調延遲到下次 DOM 更新循環之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。它跟全局方法Vue.nextTick一樣，不同的是回調的 this 自動綁定到調用它的執行個體上

mustache模闆文法

動态綁定行内樣式

<div class="img3" :style="{ backgroundImage: 'url(' + img3 + ')' }"></div>
  
data() {
    return {
      img3: require("../assets/img/2.png"),
      img4: require("@/assets/img/2.png"),
    };
  },

           

vue中輸入框事件的使用

@input //适用于實時查詢，每輸入一個字元都會觸發該事件。

@keyup.enter //點選Enter鍵觸發，而在手機上則是需要點選輸入鍵盤上的确定鍵才可觸發。

@change //該事件和enter事件相似，在手機上都是要經過觸發虛拟鍵盤的搜尋鍵才會觸發事件。使用方式同input事件。

@blur //失焦

動态建立元件和keep-alive緩存

< component is=”home” />  //home是元件
keep-alive                 //  路由緩存
 <div id="app">
    <!-- 注意： 這裡include，exclude比對首先檢查元件自身的 name 選項，如果 name 選項不可用，則比對它的局部注冊名稱 (父元件 components 選項的鍵值)。匿名元件不能被比對。 -->
    <keep-alive :include="['home','login']">
      <router-view></router-view>
    </keep-alive>
  </div>

           

Vue的常見指令

v-model(服務于表單案例)

<div id="app">
        <div>
            <h2>
               1. 指定value
            </h2>
            下拉單選框
            <select v-model="isCheck2">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
              </select>
        </div>
        <div>
            <h2>
                這個 1. 指定value 	2. 收集的data必須是個 number or string
            </h2>
            <input type="radio"  id="small" value="small_value" v-model="isCheck3">small_value
            <input type="radio"  id="big" value="big_value" v-model="isCheck3">big_value
        </div>
        <div>
            <h2>
              v-model在單選框 1.收集的data必須是個 blool
            </h2>
            <input type="checkbox"  v-model="isAgree">

        </div>

        <div>
            <h2>
                v-model在複選框中的使用 1.需要value 2. 打他中的收集 必須是個數組
            </h2>
            <div id="app">
                <input type="checkbox" id="one" value="value_one" v-model="isCheck4">
                <label for="one">選項一</label>
                <input type="checkbox" id="two" value="value_two" v-model="isCheck4">
                <label for="two">選項二</label>
                <input type="checkbox" id="three" value="value_three" v-model="isCheck4">
                <label for="three">選項三</label>
                <br>
              </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isAgree:false,       // 預設值是bool v-model 綁定的就是選中狀态
                isCheck2:"A被選",
                isCheck3:"small_value",
                isCheck4:[]         // 預設值是數組 v-model 綁定的就是選中的value 的集合
            },
            watch:{
                isCheck1(val){
                    console.log("單選框的v-model值",val)
                },
                isCheck2(val){
                    console.log("單選框的v-model值",val)
                },
                isCheck3(val){
                    console.log("單選框的v-model值",val)
                },
                isCheck4(val){
                    console.log("單選框的v-model值",val)
                },
            }
        })
    </script>

           

1.vue在使用data中的資料時，在标簽中“isFlase”直接使用即可

小程式中”{{isFlase}}”

2.vue事件傳參數@click=“handle(index)”,index可以直接傳入;

wx中bindtap=”handle“ data-index=”index” ，通過hangle(e)事件源來擷取

v-cloak

用于防止加載閃爍

v-text

預設能防止閃爍，同時能覆寫内容

v-html

用于解析有标簽的内容

v-bind

用于動态綁定類

4.1 動态綁定單一類

4.2 動态選擇類綁定

4.3 動态綁定多個類1 數組都是單個值

4.4動态綁定多個類2 對象形式

4.5 用于動态綁定行内樣式

<p :style="{color:red1,fontSize:font1+'px'}"> </p> 
   data:{
       red1:"red",
       font1:30
        },
           

v-on

用于綁定事件

//事件參數必須在最後一個

show:function(a,event){
	event.target.innerHTML        //獲得内容
	event.target.tagName        //獲得标簽
}
           

附：v-on事件修飾符

.stop:

<div @click="show1">
<button @click="show2"></button>

</div>

           

對比js中的事件冒泡：

stopPropagation

對比js中的預設事件：

preventDefault

v-if

删除或建立元素

v-show

經常性的操作使用v-show

不經常性的操作使用v-if

8.v-for=”(item，index） in items” //循環清單

對應标簽要注意使用key屬性（隻接收string和number）

v-one

隻執行一次

v-lazy

失去焦點再觸發響應式同步

按鍵修飾符

事件修飾符

vue為v-on提供了事件修飾符，通過點(.)表示的指令字尾來調用修飾符。

.stop

阻止點選事件冒泡。等同于JavaScript中的event.stopPropagation()

.prevent

防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播），等同于JavaScript中的event.preventDefault()，prevent等同于JavaScript的event.preventDefault()，用于取消預設事件。

.capture

與事件冒泡的方向相反，事件捕獲由外到内,捕獲事件：嵌套兩三層父子關系，然後所有都有點選事件，點選子節點，就會觸發從外至内 父節點-》子節點的點選事件

.self

隻會觸發自己範圍内的事件，不包含子元素

.once

隻執行一次，如果我們在@click事件上添加.once修飾符，隻要點選按鈕隻會執行一次。

.passive

Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符

.passive 修飾符尤其能夠提升移動端的性能。不要把 .passive 和 .prevent 一起使用，因為 .prevent 将會被忽略，同時浏覽器可能會向你展示一個警告。請記住，.passive 會告訴浏覽器你不想阻止事件的預設行為。

事件修飾符還可以串聯

注：使用修飾符時，順序很重要；相應的代碼會以同樣的順序産生。是以，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 隻會阻止對元素自身的點選。

鍵盤修飾符

在JavaScript事件中除了前面所說的事件，還有鍵盤事件，也經常需要監測常見的鍵值。在Vue中允許v-on在監聽鍵盤事件時添加關鍵修飾符。記住所有的keyCode比較困難，是以Vue為最常用的鍵盤事件提供了别名：

.enter：Enter鍵

.tab：制表鍵

.delete：含delete和backspace鍵

.esc：傳回鍵

.space: 空格鍵

.up：向上鍵

.down：向下鍵

.left：向左鍵

.right：向右鍵

系統修飾鍵

可以用如下修飾符來實作僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器。

.ctrl

.alt

.shift

.meta

注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽标鍵 (⊞)。在 Sun 作業系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其後繼産品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被标記為“META”。在 Symbolics 鍵盤上，meta 被标記為“META”或者“Meta”。

.exact修飾符

.exact 修飾符允許你控制由精确的系統修飾符組合觸發的事件。滑鼠按鈕修飾符

滑鼠修飾符用來限制處理程式監聽特定的滑鼠按鍵。常見的有：

.left

.right

.middle

這些修飾符會限制處理函數僅響應特定的滑鼠按鈕。自定義按鍵修飾符别名

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

修飾符

(1).lazy

在改變後才觸發（也就是說隻有光标離開input輸入框的時候值才會改變）

(2).number

将輸出字元串轉為Number類型·（雖然type類型定義了是number類型，但是如果輸入字元串，輸出的是string）

(3).trim

自動過濾使用者輸入的首尾空格

正規表達式

具體檢視文檔

https://www.runoob.com/regexp/regexp-syntax.html

ref refs

Ref擷取dom元素的内容 （ref refs）

ref:對要操作的元素取名字

this.refs.名字：對其的具體操作

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3 ref='myh3'>我是dom元素的内容</h3>
        <com ref="myCom"></com>
        <button @click="getData"> 123</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getData() {
                    console.log(this.$refs.myh3.innerText) //我是dom元素的内容
                    console.log(this.$refs.myCom.name) //undefined
                    console.log(this.$refs.myCom.show) //show(){console.log('hello world')}
                }
            },
            components: {
                'com': {
                    template: '<p>我是元件的内容</p>',
                    methods: {
                        show() {
                            console.log('hello world')
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

           

在元件上綁定事件(.native)

有時候我們想在子元件上面監聽一些事件，比如click，但是不論你怎麼點，它都沒反應，為什麼呢？

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>
           

因為這樣寫vue會認為，你自定義了一個click事件，要在子元件通過$emit(‘click’)觸發才行。如果我就是要在父元件觸發呢？那就要用到native修飾符了。

例子

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>
           

父元件如何調用子元件的方法

子元件：

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {  //将要被父元件調用的方法
        console.log(e)
      }
    }
  }
</script>

父元件：

<template>
  <div>
    <button @click="clickParent">點選</button>
    <child ref="mychild"></child>  //給子元件添加引用
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>
           

注意：

1、在子元件中：

是必須要存在的

2、在父元件中：首先要引入子元件 import Child from ‘./child’;

3、 是在父元件中為子元件添加一個占位，ref="mychild"是子元件在父元件中的名字

4、父元件中 components: 是聲明子元件在父元件中的名字

5、在父元件的方法中調用子元件的方法，很重要this.$refs.mychild.parentHandleclick(“嘿嘿嘿”);

無法深度監聽時，采用this.$set 來動态添加響應資料

vue無法監聽的數組變化的場景

• 通過數組索引改變數組元素的值；
• 改變數組的長度；

解決無法監聽數組變化的方法

• this.set(target,index,val)
• 通過splice push pop shift unshift sort reverse
• 使用臨時變量作為中轉，重新指派數組；

vue無法監聽到對象變化的場景

• 對象的增加、删除無法被vue監聽到

案例

新增加對象中的一個屬性

data(){
return	{
	person:{
	name:"wxj"
}
}
}
methods：
// 添加一個age字段
this.$set(this.person,age,18)
           

擴充

// 直接 filter 不行，但可以重新指派
    filterMore(){
      this.arr=this.arr.filter(item=>{
        return item>2
      })
    }