Vue（7）

最新推荐文章于 2024-08-03 20:57:01 发布

蓝搜香菇

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量1.5k

点赞数 31

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daiism/article/details/137875647

版权

组件

<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>

蓝搜香菇

关注

31
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
Vue（7）

h1>我是{{userName}}</h1><h1>我是{{func1()}}</h1><h1>我是一个school组件</h1>Vue.extend()方法本质就是实例化VueComponent构造函数。// 限制类型，必要性，默认值。"xxxxxxxxxx学院"// props父向子传递值。
复制链接

扫一扫