Vue注意細節(jié)

  1. 基礎
    • a. 引入vue.js，<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    • b. 創(chuàng)建vue對象，并綁定id/類。
    • c. 插值 
      //直接用{{}}
<div> {{message}} </div>
//計算，支持三元運算
<div> {{num1+num2}} </div>
//字符串中(拼接)
<div style=" 'width: 10rem' + mystyle ">  </div>
    • d. $取系統(tǒng)的值 如：vm.$el vm.$data
  2. 指令

v-bind : 單向綁定，綁定樣式（class/style/id/href/key/title/disabled），綁定props的屬性

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫,用: -->
<a :href="url"></a>

v-on：綁定事件

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 用@ -->
<a @click="doSomething"></a>

v-model: 數(shù)據雙向綁定 ( 綁定input、select、textarea、checkbox、radio 等表單控件的value)

<!-- 單向，修改a值,i1的value改變。而修改value，a不會改變(簡單來說就是傳值)-->
<input type="text" :value="a" name="i1"/>  
<!-- 雙向，修改a值,i1的value改變。修改value，a改變 -->
<input type="text" v-model="a" name="i2"/>

v-once: 只執(zhí)行一次性地插值
v-html: html插值（顯示html加載后的效果）

  1. v-if和v-show
    v-if: 條件選擇，適用于界面第一次加載時使用
    v-if是通過控制dom節(jié)點的存在與否來控制元素的顯隱，條件不滿足是不會加載到dom中的，更新花銷更大。如下：當show為0時，只存在<div> 第一層 </div> 
  <body>
        <div id="demo">
            <div v-if= "show < 2" > 第一層 </div>
            <div v-else-if = "show < 4"> 第二層 </div>
            <div v-else> 第三層 </div>
        </div>  
    </body>
    <script>
        var demo = new Vue({
          el: '#demo',
          data: {
             show: 0
          },
          methods: {
              tap: function(){
                this.show++;
              }
          }
        });
    </script>

v-show: 選擇是否顯示，適用于界面頻繁刷新（如：點擊按鈕控制一個div的顯隱）

    <body>
        <div id="demo">
            <div v-show = "show< 2" > 第一層 </div>
            <div v-show = "show>=2&&show<4" > 第二層 </div>
            <div v-show = "show>=4" > 第三層 </div>
            <button @click="tap()">點擊</button>
        </div>  
    </body>
    <script>
        var demo = new Vue({
          el: '#demo',
          data: {
             show: 0
          },
          methods: {
              tap: function(){
                this.show++;
              }
          }
        });
    </script>

v-show是通過設置DOM元素的display樣式，block為顯示，none為隱藏；
當show為0時，樣式為:

<div> 第一層 </div>
<div style="display: none;"> 第二層 </div>
<div style="display: none;"> 第三層 </div>

  1. mixin 混入
    簡單而言就是多繼承。不同方法繼承，相同方法覆蓋（Vue對象的方法級別最高，其他混入的mixin按先后順序覆蓋，換而言之就是最后混入的獲得調用）

  2. Vue 是響應式的。data中的數(shù)據更新時會刷新整個dom(一級目錄比較敏感，下級不一定能成功)，Vue 不能檢測數(shù)組和對象的變化

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是響應式的

vm.b = 2  // `vm.b` 是非響應式的
Vue.set(vm.someObject, 'b', 2) //單個值響應
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) //多個值響應

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的
vm.items = ['x', 'b', 'c']； //全部替換，響應性的

Vue.set(vm.items, indexOfItem, newValue) //indexOfItem處的值更新為newValue
vm.items.splice(indexOfItem, 1, newValue) //在indexOfItem位置添加一個新值
vm.items.splice(indexOfItem) //刪除indexOfItem到結尾處的值

vm.items.forEach((item)=>{
    Vue.set(item,"goodlist",result.data); //指定位置插入goodlist的列表
    Vue.set(item,"offset",0); //指定位置插入offset字段值為0                       
});
  1. 屬性
    <body>
        <div id="demo">
            <!-- 過濾器的使用，firstName作為第一個參數(shù)傳遞給capitalize函數(shù) -->
            <div v-show = "show" >  {{ firstName | capitalize }} {{lastName}} </div>
            <button @click="tap()">點擊</button>

            <p v-for="(money) in list"> {{money | local(font)}}</p>
        </div>  
    </body>
    <script>
        new Vue({
            el: "#demo", //為實例提供掛載元素，該元素下被vue控制
            data: {
                firstName: 'foo',
                lastName: 'Bar',
                show: true,
                list: [10,10000, 0.01],
                font: "RMB"
            },
            props: ["content"], //父組件向子組件傳值,自定義組件中常用
            methods: {
                //該屬性中申明方法
                tap: function(){
                    this.show = !this.show;
                }
            },
            mounted: function(){
                // 鉤子函數(shù)，掛載時調用
                console.log(2);
            },
            created: function(){
                //創(chuàng)建時調用,先創(chuàng)建再掛載,看vue的生命周期
                console.log(1);
            },
            filters:{ //過濾器
                //首字母大寫
                capitalize: function (value) {
                  if (!value) return ''
                  value = value.toString()
                  return value.charAt(0).toUpperCase() + value.slice(1)
                }
                 //金額格式化
                 local: function (value, f) {
                  return value.toLocaleString()+ f;
                }
            },
            directives: {
                // 注冊一個局部的自定義指令 v-focus
                focus: {
                  // 指令的定義 inserted: 被綁定元素插入父節(jié)點時調用（父節(jié)點存在即可調用，不必存在于 document 中）
                  inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                  }
                }
            },
            computed: {
                //計算屬性，當數(shù)據發(fā)生變化時才調用，否則直接調用緩存。提升性能，可使用get/set函數(shù)，必須有返回值
                //fullName可作為一個屬性直接使用
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },
            watch: {
                //監(jiān)測變化。監(jiān)聽函數(shù)
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        });
    </script>

  1. 生命周期

    生命周期

    created，mounted，destoryed只調用一次，updated會多次調用。

  2. 父組件與子組件的互調
    a. 父組件向子組件傳值

//main.js 全局引入組件（也可以局部引入，這邊圖個方便）
import cuTest from './components/test.vue'
Vue.component('test',cuTest)

//父組件
<test :num="10"></test>

//子組件
<template>
    <button @tap="ontap"> {{ num }} 點擊 </button>
</template>

<script>
    export default {
        data() {
            return {};
        },
        name: 'test',
        props: {
            num:{
                type: Number,
                default: 0
            },
        },
    }
</script>

通過v-bind單選綁定，傳遞num值。
如果想要在子組件修改傳遞的num，使用this.num++類似的修改方法是會報錯的。這時需要這樣操作，修改子組件：

<template>
    <button @tap="ontap"> {{ n }} 點擊 </button>
</template>

<script>
    export default {
        data() {
            return {
                n : 0,
            };
        },
        name: 'test',
        watch: {
            num(newV,oldV) {
                console.log(newV,oldV);
                this.n = newV;
            },
        },
        mounted() {
            this.n = this.num;
        },
        props: {
            num:{
                type: Number,
                default: 0
            },
        },
        methods: {
            ontap() {
                this.n = this.num + 100;
            }
        }
    }
</script>

使用一個新的n接收num數(shù)據，通過watch監(jiān)聽num的數(shù)據變化

b. 子組件向父組件傳值
我們將接收的num修改后再傳給父組件

//子組件
ontap() {
  this.n = this.num + 100;
  this.$emit('ontap', this.n);
}
//父組件
<template>
  <test :num="num" @ontap="onChange"></test>
</template>
<script>
    export default {
        data() {
            return {
                num: 10,
            };
        },
        mounted() {
            let _this = this;
            setTimeout(function(){
                _this.num = 100;
            },3000);
        },
        methods: {
            onChange(num){
                console.log(num);
            }
        }
    }
</script>

通過this.$emit向父組件傳值，父組件通過@ontap（注意和emit的第一參數(shù)函數(shù)名一致）綁定onChange方法。
接收多個參數(shù)時

//和之前對應
this.$emit('ontap', a, b, c);
onChange(msg) {
    let a = msg[0];
    let b = msg[1];
    let c = msg[2];
}

c. sync 簡化
在父組件中添加sync修飾，會自動在父組件中創(chuàng)建update:num(對應.sync的前值)的事件，父組件就不需要再去寫接收方法，去掉@ontap="onChange"

<test :num.sync="num" ></test>

在子組件中

this.$emit('ontap', this.n); => this.$emit('update:num', this.n); //替換

這樣就能自動同步父與子組件的參數(shù)值了

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容