Vue技术18.1基本使用

最新推荐文章于 2024-09-30 14:28:41 发布

yitahutu79

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量71

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40713201/article/details/126313602

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8" />
        <title>基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue中使用组件的三大步骤：
            一、定义组件（创建组件）
            二、注册组件
            三、使用组件（写组件标签）

            一、如何定义一个组件？
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
            区别如下：
                1.el不要写，为什么？最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                2.data必须写成函数，为什么？避免组件被复用时，数据存在引用关系。
            备注：使用templa可以配置组件结构。

            二、如何注册组件？
                1.局部注册：靠new Vue的时候传入components选项
                2.全局注册：靠Vue.component('组件名'，组件)

            三、编写组件标签：
                <school></school>
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <school></school>
            <hr/>
            <school></school>
            <hr/>
            <student></student>
            <hr/>
            <hello></hello>
        </div>

        <div id="root2">
            <hr/>
            <hello></hello>
        </div>
   

    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //创建school组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            methods: {
                showName(){
                    alert(this.name)
                }
            },
        })
        //创建student组件
        const student = Vue.extend({
            template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
            `,
            data(){
                return {
                    name:'张三',
                    age:18
                }
            }
        })
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好啊！</h2>
                </div>
            `
        })

        //全局注册组件
        Vue.component('hello',hello)

        new Vue({
            el:'#root',
            //注册组件(局部注册)
            components:{
                school:school,
                student:student
            }
        })

        new Vue({
            el:'#root2',
        })
    </script>
</html>