Vue技术18.1基本使用

<!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>
Vue技术18.1基本使用

猜你喜欢
