[JavaScript知识库]基础复习篇

html

修改input默认值字体样式

input::-webkit-input-placeholder{
? ? ? ? ? ? ? color:#d0d0d0;
? }

vue

计算属性的用法

计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。计算属性可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

props传递数据

通常父组件的模版中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作，这个正向的传递数据的过程就是通过props来实现的。

// 爹
<template>
  // item: 要传给子的值
  <myComponent :item="item"></myComponent>
</template>
<script>
import myComponent from "子组件路径"; // 引入组件
export default {
  components: { myComponent } // 组册
  name: 'fu',
  data: {
    item: '我是我爹儿'
  }
}
</script>

// 儿
<template>
  // item：父组件传的值
  <div>{{item}}</div>
</template>
<script>
export default {
  name: 'er',
  props: {
    item: {
      type: Number, // 数据类型必须书数字
      default: true // 代表必传
    }
  }
  
}
</script>

子向父传值

子通过$emit()触发父的事件，通过事件的方式传参

this.$emit('父组件自定义的事件名', 参数。。。)

ref

通过给子组件命名ref，来触发子组件的事件

<template>
  <myComponent ref="erzi" :item="item"></myComponent>
</template>


this.$refs.erzi.getErzi()

$nextTick

this.$nextTick 将回调延迟到下次DOM更新循环之后执行

this.$nextTick(() => {
   console.log('dom元素更新后执行')
})

--------------------------------------------------------7月28日更新--------------------------------------------------------