vue脚手架以及组件化开发

2201_75455711

于 2023-10-24 21:33:50 发布

阅读量67

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/2201_75455711/article/details/134014538

版权

创建项目

创建项目的两种方法

1. vue create 项目名

2. vue ui（图形化界面的创建方式）

项目结构

组件化开发

组件化的作用与本质

组件：封装页面部分功能的方式

① 在vue对象对应的根元素（el指定标签）下使用
② 由于定义的是全局组件，所以可以在任意的vue对象下使用
③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立

每个组件都由结构、样式、逻辑组成，分离度高，独立

// 1. 模板页面
<template>
    页面模板
</template>

//2. JS模块对象
<script>
     export default {
         data() {return {}},
         methods: {},
         computed: {},
         components: {}
     }
 </script>

// 3. 样式
<style>
    样式定义
</style>

组件通信

父组件传递到子组件

props注意事项

每一个数据项，要声明类型：Object、Array、Number、String、Boolean等几种，若同时可能存在多种类型，用数组的形式表达
default，设置默认值，如果父组件没有传递数据，可以指定默认值
required，指定该数据项是否必须传递，true表示必须传递

子组件向父组件传递

通过自定义事件的方式来处理

$emit来触发自定义事件（发送请求时触发）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$emit</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>


</head>
<!--

    父组件传给子组件数值，子组件不要对其进行修改，而是需要找个变量将父组件传递的数值给赋值过来
    然后对变量进行操作
-->

<body>

    <div id="app">
        <counter @inc="addnumber"></counter>
    </div>
    <script>
        Vue.component('counter', {
            template: '<div @click="add">点击一下</div>',
            methods: {
                add: function() {

                    this.$emit('inc', 'YA')
                }
            },
        })
        let vm = new Vue({
            el: "#app",
            data: {
                total: 5
            },
            methods: {
                addnumber: function(step) {
                    alert(step)
                }
            }
        })
    </script>
</body>

</html>

2201_75455711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue脚手架以及组件化开发

每一个数据项，要声明类型：Object、Array、Number、String、Boolean等几种，若同时可能存在多种类型，用数组的形式表达。default，设置默认值，如果父组件没有传递数据，可以指定默认值。③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立。② 由于定义的是全局组件，所以可以在任意的vue对象下使用。① 在vue对象对应的根元素（el指定标签）下使用。每个组件都由结构、样式、逻辑组成，分离度高，独立。2. vue ui（图形化界面的创建方式）通过自定义事件的方式来处理。
复制链接

扫一扫