自定义Vue的组件

1. 创建一个需要自定义的目录demo

2. 创建一个需要自定义的文件.vue

3. 编写文件中的内容template,script,style

4. 一定要加上router/index.js 中的路由配置否则跳转不到

demo.vue文件:

<template>
    <section> <div>
        <el-button @click="test()" type="default">TEST</el-button></div>
        <div v-loading="pageLoading" class="page-container">
            <el-form :model="queryForm" ref="queryForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="queryForm.name" placeholder="input your username"></el-input>
                </el-form-item>
            </el-form>

        </div>
        </section>
        
</template>

<script>
import BtUi from 'components/basic-ui/bontal-base-ui.umd.min.js';
const {
      
       util, cacheUtil, axios, post, get, postFile} = BtUi.BtUtils;
window.Message =BtUi.Message;
window.MessageBox=BtUi.MessageBox;

// 这里是通过赋值将window对象中Message和MessageBox转换为BtUi中的message和messagebox


// 这里是vue本身组件开发的代码段。
export default {
      
      
    name: "demo",//当前组件名字
    mixins: [],
    props: {
      
      },
    created(){
      
       //创建时的方法

    },
    mounted(){
      
       //绑定元素的方法


    },
    computed:{
      
       //这个 是全部加载完成的操作

    },
    data(){
      
       //初始化数据的方法
       return {
      
      
           pageLoading: false,
           queryForm: {
      
      },
           rows: [],
           total: 0,
           pageNo: 1,
           pageSize: 10,

       }; //返回一个初始化的json数据格式
    },
    methods:{
      
      

        //  test:function(){
      
      
       test:function(){
      
      
           window.Message("侯治聪youare so bravo");
           alert("good job");
       }

    },
    filters:{
      
      


    },
    components: {
      
      


    },
    watch:{
      
      


    }

}
</script>

<style lang="" scoped>
    
</style>

猜你喜欢

转载自blog.csdn.net/houzhicongone/article/details/120858826