第一个vue组件【笔记】

目录

  • 第一个Vue组件
    • 什么是组件
    • 代码
      • 组件练习 demo06
      • 数据跳转和传递的过程:
      • 案例结果:

第一个Vue组件

什么是组件

组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

注意:在实际开发中,并不会用以下方式开发组件,而是采用vue-cli创建.vue模板文件的方式开发,下面只是为了理解什么是组件。

Vue.component()方法注册组件 【测试用这个来创建一个组件】

第一个vue组件【笔记】_第1张图片
图2 组件树

代码

组件练习 demo06

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件创建title>

    
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
head>
<body>

<div id="app">

    
    <ljq v-for="item in items" v-bind:test1="item">ljq>
div>

<script>

    //定义一个名字为ljq的vue组件
    Vue.component("ljq", {

        //自定义一个属性
        props: ['test1'],

        //自定义模板
        template: '

{{test1}}

'
, }); let vm = new Vue({ el: "#app", data: { items: ["Java", "Linux", "前端"], }, });
script> body> html>

数据跳转和传递的过程:

第一个vue组件【笔记】_第2张图片

第一个vue组件【笔记】_第3张图片

案例结果:

第一个vue组件【笔记】_第4张图片

你可能感兴趣的:(vue,vue)