[JavaScript知识库]vue经验总结

指令

// ▆ v-on: 主要用于事件绑定 简写方式： @
// ▆ v-bind 主要用于属性绑定 简写方式 :

组件之间传值

父组件向子组件传值

// ▆ 父页面
 <Child2 :name="name" :arr="arr"></Child2> //现在是向子组件 Child2传递name,arr两个数据
// ▆ 子页面 props接受 ，可以使[]，也可以是{}
props: {
    name: {
      type: String,
    },
    arr: {
      type: Array,
    },
  }

子组件向父组件传值

// ▆ 子组件通过$emit()触发
// 父组件用v-on监听子组件的事件
//$emit(name,p1,p2,pn) 参数1:需要父组件监听的事件名称 参数2:需要传递的参数 参数n:可以传递多个参数
created() {
    this.$emit("addNum", [22, 234, 2]);
  },
// ▆ 父页面监听 addNum 事件
<Child2 :name="name" :arr="arr" @addNum="addNum"></Child2> /
methods: {
    addNum(arr) {
      this.arr = arr;
    },
},

类名

// ▆ 静态
<span class="description">
    This is how you add static classes in Vue.
</span>

// ▆ 动态
  <span :class="'description'">
    This is how you add static classes in Vue.
  </span>

// ▆ 静，动态
  <span
    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>

// ▆ 三元表达式
  <span
    class="description"
    :class="darkMode ? 'dark-theme' : 'light-theme'"
  >
    This is how you add dynamic classes in Vue.
  </span>
  
// ▆ 如果需要动态添加许多不同的类，可以使用数组或对象
  //数组  
  <span
    class="description"
    :class="[
      fontTheme,
      darkMode ? 'dark-theme' : 'light-theme',
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
  //对象
  <span
    class="description"
    :class="{
      'dark-theme': darkMode,
      'light-theme': !darkMode,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>

插槽slot

//▆ 构建页面时会把比较多的公共的部分抽取出来作为一个单独的组件，但在实际使用这个组件时却不能完完全全的满足需求，我们希望在组件中添加一点东西，这时我们就需要用到插槽来发布内容

// ▆在父组件中引入，注册，使用子组件
//btnStyle="btnS" :btnStyle="btnS" 是传值，一个是固定的值，一个是动态的值
<my-button btnStyle="btnS">苗二伟</my-button>  //打印:<button>苗二伟</button>

//▆子组件中，放置slot标签，slot标签的位置就是(传过来的内容)<苗二伟>的位置
 <button :class="['my-btn', btnStyle]">
    <slot></slot> //显示的位置
  </button>

//▆命名插槽
//父组件
<i-button slot="icon">按钮1</i-button>  //父组件给slot赋值了名字
<i-button >按钮2</i-button> //父组件没给slot赋值了名字
<i-button ></i-button>

//▆子组件
<template>
  <button>
    <slot name="icon"></slot>   //子组件显示<button>按钮1</button>
    <slot>solot里面默认的内容</slot> 
//父没slot赋值了名字,但传了值，子组件显示<button>按钮2</button>
//父没slot赋值了名字,也没传值，子组件显示默认的内容<button>solot里面默认的内容</button>
	</button> 
</template>

//▆跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

//插槽子(数据)传父
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot:default="slotProps">
         <h1>{{slotProps.users}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<template>
  <div class="hello">
     Helloworld子组件  
     <div #slotLeft>
       <slot v-bind:users="user"></slot>
     </div> 
  </div>
</template>

//▆解构赋值
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot="{ users }">
         <h1>{{users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<template>
  <div class="hello">
     Helloworld子组件  
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 
  </div>
</template>

响应式

//当动态给对象添加属性，vue是监听不到的，我们可以用$set()
<div>{{ person }}</div>
<button @click="onClick">加加</button>
person:{
    name:'miao'
}
onClick(){
    if (!this.person.age) {
       this.person.age= 20 //视图只有一个 {name:'miao'},age并没有添加上
       console.log(this.person) // 但是打印有，{name:'miao'，age:20}，vue没有监听到
      } else {
        this.person.age++
      }
}

computed

//▆computed擅长处理的场景：一个数据受多个数据影响，或者复杂的运算

//▆computed属于响应式依赖进行缓存，如果其中的没有值改变，则它调用的就是上一次，计算缓存的数据只有当依赖的数据发生变化时，并联的数据才会变化，适用于计算或者格式化数据的场景

//▆例如：购物车计算价格：只要购买数量，购买价格，优惠券等任意一个发生变化，总价都会自动跟踪变化
<div id="app">
    <button @click="add">添加商品</button>
    <table border="1">
      <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in shopingCarts" :key="index">
        <td><input v-model="item.goodsName" /></td>
        <td><input v-model="item.price" /></td>
        <td><input v-model="item.quantity" /></td>
      </tr>
    </table>
    <h3>总价: {{ totalPrice }} 元</h3>
  </div>
export default {
  data() {
    return {
      shopingCarts: [{ goodsName: "", price: "", quantity: "" }],
    };
  },
  computed: {
    totalPrice: function () {
      let total = 0;
      this.shopingCarts.forEach((item) => {
        let subtotal = item.price * item.quantity;
        total += subtotal;
      });
      return total;
    },
  },
  methods: {
    add: function () {
      this.shopingCarts.push({ goodsName: "", price: "", quantity: "" });
    },
  },
};

watch

// ▆watch擅长处理的场景：一个数据影响多个数据，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
//情景一：基本用法，当firstName值变化时，watch监听到并且执行
watch: {
    firstName(newName, oldName) {
         this.fullName = newName + ' ' + this.lastName;
    }
} 
data: {
   obj: {
        a: 123
	}
},
                        
watch: {
    obj: {
      handler(newName, oldName) {
             console.log('obj.a changed');
      },
      mmediate: true,
      deep: true // 不加deep监听不到 obj的变化
    }
} 
 watch: {
'obj.a': {
	handler(newName, oldName) {
		console.log('obj.a changed');
	},
	immediate: true,
	// deep: true
	}
}

nextTick

//▆nextTick()vue dom渲染是异步的，
//▆nextTick()是将回调函数延迟在下一次dom更新数据后调用
<p ref="love_p">{{ title }}</p>
<button @click="love()">爱</button>
data() {
    return {
      title: "我爱生活",
},
methods: {
    love() {
      this.title = "你爱放屁";
      this.$nextTick(() => {
        console.log(this.$refs.love_p.innerHTML);
      });
    }
},

SSR

//ssr server side renderer服务端渲染 一个中间商，介于前端和后端之间的
//这个东西把从后端取得数据，渲染成一个静态的页面(百度爬虫是爬静态页面的，不会爬动态的)，返回前端  
//好处：1.提高加载速度(一般多用于首页);   2.seo优化(搜索引擎优化)