当前位置: 首页>前端>正文

解析vue的template获取节点 vue的template的理解

vue组件

含义

根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目开发维护。

vue中的组件化开发(形式)

规定:组件的后缀名.vue,App.vue本质就是一个vue的组件。

3个组成部分

每个.vue组件都由三个组成部分构成

  • template:组件的模版结构
  • script:组件的JavaScript行为
  • style:组件的样式

template模板结构中应该只能包含一个根元素,因此若有多个应包含在一个大div中。

script部分

  1. export default:用于导出组件对象或实例,使其可以在其他文件中被引用和使用,并包含以下一切,将这些内容作为一个整体导出,以便在其他地方可以引用和使用该组件。它是将组件的逻辑部分进行封装和导出的关键。
  2. data:定义组件的初始数据。可以是一个对象或一个返回对象的函数。这些数据可以在组件的模板中进行绑定和显示。
  3. computed:定义计算属性,这些属性的值会根据依赖的数据动态计算而来。计算属性的结果会被缓存,只有依赖的数据发生变化时才会重新计算。
  4. methods:定义组件的方法。这些方法可以在组件的模板中绑定到事件或其他触发方式上,并用于处理用户交互、执行业务逻辑等操作。
  5. watch:用于观察和响应数据的变化。可以监听指定的数据或计算属性,当其发生变化时执行相应的操作。
  6. createdmounted等生命周期钩子函数:这些函数会在组件的生命周期中被自动调用。可以在这些函数中执行一些初始化操作、发送异步请求、订阅事件等。
  7. 其他自定义的属性和方法:根据需要,可以在<script>部分定义其他自定义的属性和方法,用于组件的逻辑处理。

这些成分共同构成了Vue组件的逻辑部分,用于定义组件的数据、计算属性、方法以及生命周期等。通过在<script>部分编写这些代码,可以实现组件的行为和功能,并与模板进行交互。

示例/分析

<template>
<div class="test-box">
  <h3>this is test{{ username }}</h3>
  <button @click="changeName">change name</button>
  </div>
</template>

<script>
  //export default{}每个script开头都必须要写
  //export default 是 JavaScript 中用于导出默认值的语法。在 Vue 单文件组件中,export default 用于导出组件的定义。

  //在 Vue 单文件组件中,export default 通常用于导出一个包含组件选项的对象。这个对象描述了组件的模板、逻辑和样式等内容,以便在其他地方引用和使用该组件。
  export default {
    // 组件的逻辑部分
    //在 Vue 2 的单文件组件中,data 选项必须是一个函数而不是一个对象。这是因为 Vue 2 使用 data 函数的返回值作为组件实例的数据对象,这样可以确保每个组件实例都有独立的数据副本,避免数据共享和潜在的问题。
    //data数据源,'.vue'中的data不能指向对象,必须是一个函数
    data() {
      //这个return出去的{}中,可以定义数据。
      return {
        username: 'thisisname',
      };
    },
    methods:{
      changeName(){
        //在组件中,this就表示当前组件的实例对象。
        //组件里的this指向组件的实例
        console.log(this);
        this.username = "newname"
      }
    }
  };
</script>

//启用less要添加lang="less"
<style lang="less"> 
  .test-box{
    background-color: red;
    .h3{
      color: white;
    }
  }
</style>

组件使用的三个步骤

组件之间的父子关系

project-src-components

所有的组件都放在components里,App可以放到components外。

  • 组件在被封装好之后:彼此之间是相互独立的,不存在父子关系。
  • 在使用组件的时候:根据彼此的嵌套关系,形成了父子关系、兄弟关系。

三个步骤

  1. 使用import语法导入需要的组件import Left from '@/components/Left.vue'
  2. 使用 components 节点注册组件, 通过components注册的是私有子组件
  3. 标签的形式使用刚才注册的组件。

在组件 A 的 components 节点下,注册了组件 F。 则组件 F 只能用在组件 A 中;不能被用在组件 C 中。

<template>
<div class="app-container">
  <h1>App 根组件</h1>

  <button @click="flag = !flag">Toggle Flag</button>
  <Test info="你好" v-if="flag"></Test>

  <hr />

  <div class="box">
    <!-- 渲染 Left 组件和 Right 组件 -->
    <!-- 3. 以标签形式,使用注册好的组件 -->
    <Left1></Left1>
    <Right></Right>
  </div>
  </div>
</template>

<script>
  // 1. 导入需要使用的 .vue 组件
  //左边的Left,Right仅是名字,但是名字须和components与div中的相同。
  //通常情况下,`@`符号在Vue项目中被配置为指向项目的根目录。这样做的好处是,无论在项目的哪个文件中,都可以使用`@`符号来导入其他文件,而无需担心相对路径的复杂性。
  import Left1 from '@/components/Left.vue'
  import Right from '@/components/Right.vue'
  import Test from '@/components/Test.vue'

  export default {
    data() {
      return {
        flag: true
      }
    },
    // 2. 注册组件
    components: {
      Left1,
      Right,
      Test
    }
  }
</script>

注册全局组件

在vue项目的main.js入口文件中,通过Vue.component()方法可以注册全局组件。

  • '注册名称',尽量使用大写开头,例如:MyCount
  • 组件自己里使用自己会报错。
// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
//参数1:字符串格式,表示组件的"注册名称"
//参数2:需要被全局注册的那个组件,与import后相同
Vue.component('MyCount', Count)

https://www.xamrdz.com/web/2j81939855.html

相关文章: