Vue.JS进阶语法及高级-组件块（部分随记）_vue 项目的高级语法-优快云博客

本文深入探讨Vue.JS的高级语法，包括组件块的使用，如v-model修饰符lazy、number、trim，Vue.JS生命周期的各个阶段如created、mounted等，以及组件化的概念和优势。详细讲解了组件的基本使用、两种形态（全局和局部）、语法糖，还涉及组件模板抽离和数据管理，最后讨论了父子组件间的通讯方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lable标签的作用：title属性（鼠标悬浮时有提示），for属性（与当前标签是一组，可不写）

注：mustache语法不能直接写在属性里，v-bind绑定可以（不用写花括号）

V-model可以充当name和value，实现双向绑定的必须标签

1、v-model修饰符

常用的有： lazy | number | trim 三个

1.1、lazy 懒加载延迟

1.2、number

1.3、trim 只去除前后空格，不去除文字中间的空格

2、Vue.JS生命周期

生命周期的函数（全局的方法）

cread创建实例；mounted创建完成；updated数据发生改变；destroyed实例销毁。

3、Vue.JS高级-组件化

3.1、组件化

组件化的好处

重复利用
组织性很强，容易管理，容易拓展

组件化的基本步骤

extend:扩展

component:组件

创建组件构造器Vue.extend()
注册组件Vue.component()
使用组件

3.1、组件的基本使用

3.2、组件的两种形态

（1）全局组件：在Vue中定义一个全局组件，那么意味着所有地方都可以使用；

（2）局部组件：不同点是组件存在父子关系

3.3组件的语法糖

（1）如上图中的"comm":comm 语法糖默认就将组件的名称当成标签名称，简写为comm,但要注意这里的comm要与设置的变量名称保持一致；

（2）另一种写法（完全语法糖）

components:组件的意思，在组件中注册组件的时候使用，可以注册多个

component：组件创建+注册的过程中使用，只能注册一个

全局组件：

局部组件：

3.4、组件模板抽离的方法

3.5、组件的数据问题

data数据的三种写法：

（1）date：属性的形式，这种方式在没有组件的时候可以正常使用（有组件是也可以用，但有特殊情况）；

（2）date（）{return{}}ES6增强写法的方法形式，在组件的使用过程中，可能存在一个组件有多个地方都引用，如果使用data属性的方式

会造成数据污染。为了避免这个问题。可使用方法进行返回，方法的特性是每次调用都是重新初始化；

（3）date：function（）{return{}}和ES6增强写法意义一样，只不过是ES6之前的写法；

3.6、父子组件通讯

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
  <!--
      应用子组件 绑定一个属性用来获取父组件信息
      s_f_message 绑定之后为了能够生效一定在子组件中定义
      因为是组件标签，所以默认会认为是父组件传递的信息，所以必须使用props接收
  -->
  <son v-bind:s_f_message="f_message"></son>
</div>

<template id="son">
  <div>
    我是快乐的子组件,{{s_f_message}}
  </div>
</template>
<script>
  /* 根组件 */
  const app = new Vue({
    el:'#app',
    data(){
      return{
        f_message:'我是父组件传过来的消息'
      }
    },
    components:{
      'son':{
        template:'#son',
        /* props是专门获取父组件传递信息的 */
        props:{
          /* 只需定义并声明类型即可 */
          s_f_message:String
        }
      }
    }
  })
</script>
</body>
</html>

父子组件通讯之数据类型

props:{
          /* 只需定义并声明类型即可 */
          s_f_message:String
        }

props复杂写法