组件111111

最新推荐文章于 2024-10-16 18:35:07 发布

tofever

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量805

点赞数 17

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/tofever/article/details/137437362

版权

组件的基本使用方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="demo">
        <!-- 组件的写法有两种
             双标签法
             单标签法（）
        -->
        
        <!-- 
        第三步：使用组件，这两个组件均是我们创建好的组件,使用方法如下
        -->
        <school></school>
        <student></student>
    </div>
    <div id="demo1">
        <school></school>
        <student></student>
    </div>
  </body>
  <script>
  	  //屏蔽掉vue生产提示
      Vue.config.productionTip = false;
      //-----------------第一步：定义组件------------------------//
      //创建一个组件实例school,并且命名为school
        const school = Vue.extend({
            name:"school",
            //指定一个模板，将来会使用这个模板挂载到父节点
            template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showINfo">点击我提示信息</button>
            </div>
            `,
            //组件实例对象的属性
            data(){
                return {
                    name:"南阳理工学院",
                    address:"南阳市宛城区长江路80号"
                }
            },
            //组件实例的方法
            methods: {
                showINfo() {
                    alert('欢迎来到'+this.name+"这里的位置是"+this.address)
                }
            },
        })
        //定义的第二个组件student
        const student = Vue.extend({
        	//组件的模板
            template:`
            <div>
                <h2>学生名称：{{name}}</h2>
                <h2>学生年零：{{age}}</h2>
                <button @click="showINfo">点击我提示信息</button>
            </div>
            `,
            //组件的属性
            data(){
                return {
                    name:"张三",
                    age:18
                }
            },
            //组件的方法
            methods:{
                showINfo(){
                    alert('我叫'+this.name+"我今年"+this.age+"岁了")
                }
            }
            
        });
        //-----------------第二步：注册组件------------------------//
        // 标签的全局注册
        Vue.component("school",school)
        Vue.component("student",student)
        // 局部注册法（局部注册的标签在其他vue对象绑定的模板中不能使用）
        new Vue({
            el:"#demo",
            components:{
                school,
                student
            }
        })
        new Vue({
            el:"#demo1",
            components:{
            }
        })
 </script>
</html>