vue 组件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

组件可以复用，注意全局组件最好使用my-component-name 命名，在VScode上遇过坑

一、Vue对象

若Vue对象中有template，那么template的优先级高于，原本的视图

<!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>Document</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data(){
                return {
                    msg: "点我",
                }
            },
            template: `
                <div>
                    <button>{{msg}}</button>
                </div>
            `
        })
    </script>
</body>
</html>

二、局部组件

注意：

1、单词拼写

2、子组件是 组件名 = {}

3、声明、挂载、引用

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- <button>{{msg}}</button> -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // Vue(父)->App(子)
        //1. 声明子组件
        let App = {
            data(){
                return {
                    text:"咬我",
                }
            },
            template: `<p>{{text}}</p>`,
        }
        new Vue({
            el: "#app",
            data(){
                return {
                    msg: "点我",
                }
            },
            // 若 Vue对象有template，则template优先级高
            // 3.引用子组件
            template: `
                <div>
                    <button>{{msg}}</button>
                    <App></App>
                </div>
            `,
            // 2.挂载子组件
            components:{
                App,
            }
        })
    </script>
</body>
</html>

一、全局组件

注意：全局组件不用挂载

<!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>Document</title>
</head>
<body>
    <div >
        <h2>{{msg}}</h2>
        <my-button></my-button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component("my-button", {
            data(){
                return {
                }
            },
            template: '<button>点击</button>'
        })
        var app = new Vue({
            el: "#app",
            data: {
                msg: "组件",
            },
            methods: {},
            computed:{},
        })
    </script>
</body>
</html>

二、模块系统

<template>
    <div >
        <h3>{{msg}}</h3>
        <Vhead></Vhead>
        <Vcontent></Vcontent>
        <Vfoot></Vfoot>
    </div>
</template>
<script>
import Vhead from "./components/Vhead"
import Vcontent from "./components/Vcontent"
import Vfoot from "./components/Vfoot"
export default {
    name: "App",
    data(){
        return{
            msg: "第一个Vue项目",
        }
    },
    methods: {},
    computed: {},
    components:{
        Vhead,
        Vcontent,
        Vfoot,
    },
}
</script>
<style scoped>
</style>

以上是 vue 组件 的全部内容， 来源链接： utcz.com/z/379874.html

回到顶部