vue.js组件

青芜与

已于 2024-05-26 21:27:09 修改

阅读量213

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-05-26 21:26:39 首次发布

本文链接：https://blog.csdn.net/Lqing12/article/details/139220977

版权

组件

<body>
    <div id="app">
        <aaa/>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    
    // 创建组件
    const school = Vue.extend({
        template:`
            <div>
                <h1>我是一个school组件</h1>
                <h1>我是{{userName}}</h1>
                <h1>我是{{func1()}}</h1>
            </div>
        `,
        data() {
            return {
                userName:"张三"
            }
        },
        methods:{
            func1(){
                return 100;
            }
        }
    })
    // 注册组件
    // Vue.component("abc",school);
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                
            }
        },
        components:{
            aaa:school
        },
        methods: {
            
        },
    })
</script>

<template>
  <div>
    <h1>我是school组件</h1>
    <h1>学校名称：{{msg}}</h1>
  </div>
</template>

<script>
export default {
    name:"SchoolS",
    data() {
        return {
            msg:"xxxxxxxxxx学院"
        }
    },
}
</script>

<style>

</style>

单个组件的使用

可以使用小写和大写情况下，首字母都会转换为大写
my-school和mySchool都会转换为同样的格式MySchool，但是mySchool只能在脚手架环境使用
使用的组件名可以不和组件定义的名字相同，组件名字可以自定义
注意规范:
组件取名最好不要和已有的标签相同
不在脚手架环境下使用这种格式不会再运行之后的代码

Vue.extend()方法本质就是实例化VueComponent构造函数

<style>
        #app{
            width: 100%;
            height: 100vh;
            background-color: pink;
        }
        nav{
            height: 100px;
            width: 100%;
            background-color: orange;
        }
        main{
            height: 500px;
            width: 100%;
            background-color: rgb(0, 213, 255);
        }
        footer{
            height: 500px;
            width: 100%;
            background-color: rgb(21, 207, 151);
        }
    </style>
</head>
<body>
    <div id="app"> 
      <navq></navq>
        <mainq></mainq>
        <footerq></footerq>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    const navq=Vue.extend({
        template:`
        <nav></nav>
        `,
        mounted(){
            console.log(this);
        }
    }
    )   
    const mainq=Vue.extend({
        template:`
        <main>           
            </main>
        `,
        components:{
        }
    })
    const footerq=Vue.extend({
        template:`
        <footer>
            <mainq></mainq>
            </footer>
        `,
        components:{
            navq
        }
    }
    )
    Vue.component("mainq",mainq);
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                
            }
        },
        components:{
            navq,
            footerq,
        },
        mounted(){
            console.log(this);
        }
    })
</script>

组件注册两种方式
        1.全局注册Vue.component("mainq",mainq);
        1.局部注册components：{ }
        
两种方式的区别
         全局注册 只要注册一次，在任何组件都可以使用
         局部注册 在变量a中注册，就只能在a中使用组件

// 可配置的变量
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 配置入口文件地址
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
    },
  },
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave:false
})

全局

自定义组件Vue.component
自定指令Vue.directive
3.watch监听vm.$watch
过滤器Vue.filter
绑定容器vm.$mount

<script>
    const mixin = {
        data(){
            return{
            }
        },
        methods: {

        }
    }
    export default {
        name:"MyDay01",
        mixins:[mixin],
        data() {
            return {
                c:100,
                d:200,
            }
        },
        methods: {

        },
        created() {
            console.log(this);
            console.log(this.$data);
            console.log(this.userName);
            console.log(this.sum());

        },
        // props父向子传递值
        // 只接收值
        // props:["name","age"],
        // 限制类型
         props:{
             name:String,
             age:Number,
             bol:Boolean
         }
        // 限制类型，必要性，默认值
         props:{
             name:{
                 type:String,
                 required:true,
                 default:"李四"
             },
             age:{
                 type:Number,
                 required:true,
                 default:99
             },
             bol:{
                 type:Boolean,
                 required:true,
                 default:false
             }
         }
    }
</script>

青芜与

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js组件

组件单个组件的使用可以使用小写和大写情况下，首字母都会转换为大写my-school和mySchool都会转换为同样的格式MySchool，但是mySchool只能在脚手架环境使用使用的组件名可以不和组件定义的名字相同，组件名字可以自定义注意规范:组件取名最好不要和已有的标签相同不在脚手架环境下使用这种格式不会再运行之后的代码Vue.extend()方法本质就是实例化VueComponent构造函数。
复制链接

扫一扫