vue2.x之组件配置项

一、前言

创建Vue实例时，使用 new Vue ({//配置项}) 或者组件定义中 export default {//配置项}，所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）

如：

new Vue({
  //选项配置
  el: '#app',
  components: { App },
  template: '<App/>'
})

配置项一共可以分为六大类：数据、DOM、生命周期钩子、资源、组合、其他

二、数据

data

data：Vue根实例或者当前组件上的数据对象，类型可能是纯粹的object形式，但当为组件上的数据时，必须是function类型

⏰ 当是Vue根实例上时：

new Vue ({
    data: {
        num: 3
    }
})

⏰ 当是组件上的数据时：

export default {
    data: function () {
        return {
            num: 3
        }
    }
}

❓为什么需要返回一个对象： 因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数返回初始数据的一个全新副本数据对象，从而避免数据被污染

computed

computed：计算属性，根据data中的数据需要动态计算的属性。在new根实例和组件中使用的方法和含义都一样，不一一举例（以下所有配置不提名都代表一样）

new Vue({
   data:  {
     a: 1
   },
   computed: {
     dbA: function(){
       return this.a * 2;
     }
   }
})

❗️如上例中，计算属性dbA是由data数据中的属性得到，使用时和数据属性a是一样的，没有差距

watch

watch：侦听器，监视data中属性的变化，来做出反应

new Vue({
   data:  {
      a: 1,
      dbA:2
   },
   watch: {
      a: function(val,oldVal){//监听a的变化，val为变化后的值，oldVal为变化之前的值
        this.dbA = val *2
      }
    }
})

❗️和计算属性进行对比可以发现，当有一些数据需要随着其他数据变化而变化时，计算属性和侦听器有时均可以实现，要优选计算属性，避免侦听器的滥用！但是当需要在数据变化时执行异步操作或者开销较大的操作时，要是用侦听器

methods

methods：方法的集合，用到的所有方法，定义在其中

new Vue({
   data:  {
    a: 1
    } ,
    methods: {
        clickBtn: function(){ 
             this.a++;
        }
    }
})

props

props:接受从父组件传过来的数据

在父组件中，使用子组件时：<child v-bind:data1="data1"></child>，通过v-bind把子组件中所需要的数据传递给子组件，在子组件中通过props来接受

子组件中props的格式一般为为：props:['data1','data2',....] 或者是 props:{data1:data1Type,data2:data2Type,...}

export default {
  data () {
    return {
      show: true
    }
  },
  props: {
    lists: Array
  }
}

porpsData

porpsData：只能用在new创建的根实例中，主要作用是方便测试

三、DOM

el

el：只有在new创建的根实例中才有，提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标，可以是一个CSS选择器也可以是一个HTMLElement实例，一般选用CSS选择器中的id来标识

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <div>时间: {{timeStr}}</div>
    </div>
    <!-- 准备一个Vue实例 -->
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root', //可以是一个CSS选择器也可以是一个HTMLElement实例，一般选用CSS选择器中的id来标识
            data() {
                return {
                    timeStr: '2024-7-10'
                }
            },
        })
    </script>
</body>

❗️ 只有在new创建的根实例中才有，且可以是一个CSS选择器也可以是一个HTMLElement实例，一般选用CSS选择器中的id来标识

template

template：用于定义Vue实例的模板内容。这个模板内容可以包含HTML结构以及Vue的模板语法，用来描述Vue实例的视图部分，也就是用这部分的内容将挂载点元素的内容替换掉

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

❗️不常用，一般都用单文件文件
el和template都在：会先编译template，将其转换为HTML片段，再将编译的片段去替换el节点

只存在el：会使用el.outerHTML的方法将标签的字符串获取到，作为template的属性值传入，这样就与上面的情况一样
el不在：既不会编译，也不会渲染，这时候可以自己手动使用vm.$mount(节点参数)来进行补救el不存在的情况，但是vm.$mount()也可以不传递参数，此时会编译模板，但不会替换。
const vm = new Vue({
 template: ``
 data() {
   return {
   };
 },
 methods: {},
});

// 补救不存在el的情况，这样就又符合上面的情况了
vm.$mount('#app') 

render

render：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

❗️ Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

renderError

renderError：当render函数遭遇错误时，提供的另外一种渲染输出

renderError (h, err) {     
    return h('pre', { style: { color: 'red' }}, err.stack)      
}

❗️ 当render函数遭遇错误时,提供另外一种渲染输出,其错误将会作为第二个参数传递到renderError,这个功能配合hot-reload非常实用,只在开发者环境下工作。

四、生命周期钩子

生命周期钩子即生命周期回调函数,常用的分为以下三种：

初始化阶段（执行一次）

beforeCreate(){}，
created(){},
beforeMount(){},
mounted(){},//初始化完成后触发，一般在该回调函数中发送ajax请求或者启动定时器等异步任务

更新阶段（执行0~n次）：

beforeUpdated(){},
updated(){}

死亡阶段（执行1次）：

beforeDestroy(){},//做收尾工作，如：清除定时器
destroyed(){}

五、资源

components

components：注册vue实例中可用的组件，是object类型

<template>
  <div class="container">
    <!--使用组件-->
    <vue-header/>
    <Menu/>
  </div>
</template>

<script>
//引入组件
import VueHeader from './components/Header'
import Menu from './components/Menu'
export default{
  components: { //注册组件
    VueHeader,
    Menu
  }
}
</script>

directives

directives：注册（自定义）局部指令，自定义的指令只有在当前vue实例中有效

语法：

directives:{"diretiveName":function(){

}}

filters

filters:定义本地过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
//除了上面在一个组件的选项中定义本地的过滤器，也可在在创建 Vue 实例之前全局定义过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

posted on 2024-07-10 12:33 梁飞宇阅读(39) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇