words Demo总结（二）

来源：互联网发布：网络红人毒药身世知乎编辑：程序博客网时间：2024/06/05 15:59

1.在引入全局css的时候，一定要在main.js的入口处引入，这样就可以在每一个页面使用。

//引入全局css样式的时候，一定要在main.js中引入，这样全局就可以使用了//使用全局main.less样式，一定要安装下面的loaderrequire('!style-loader!css-loader!less-loader!./assets/css/main.less');

2.font-size:100%;设置字体属性为默认大小，是相对于浏览器默认字体大小或继承body设定的字体大小来说的。
例如：

body{    font-size:12px;}div{    font-size:100%;     //这个div标签的字体大小会继承body标签的12px;也就是说，div的字体大小为12px;}

3.添加每一个组件的时候，最好在script标签里面，给每一个组件添加一个name属性，便于在浏览器中调试。

<script>import lgHeader from '../components/lgHeader.vue'export default {  name: 'create',//name属性便于在浏览器中调试  components:{    'lg-header':lgHeader  },  methods:{    Goindex(){      this.$router.push({path:'/index'});    }  }}</script>

4.如果写了一个按钮组件，并且想要他在父组件中实现跳转，这是只写@click，并且写一个跳转事件的时候，不会生效的，还需要加一个@click.native=”方法名”才可以实现跳转。

父组件代码<template>  <div id="create">    <!--props传值，需要在组件里写，然后再使用-->    <lg-header bigTitle="CET-4" noteTitle="四级单词记忆管理"></lg-header>    <div class="text-text padding-md">      <p class="text-size-lg">Hi,</p>    </div>    <bottom-Btn @click.native="toCreatSelect" value="创建计划" color="orange" class="bottomBtn"></bottom-Btn>  </div></template><script>import lgHeader from '../components/lgHeader.vue'import bottomBtn from '../components/bottomBtn.vue'export default {  name: 'create',  components:{    'lg-header':lgHeader,    'bottom-Btn':bottomBtn  },  methods:{    toCreatSelect(){      this.$router.push({path:'/CreatSelect'});    }  }}</script>

子组件代码<template>  <div id="bottomBtn">    <button id="btn" v-bind:class="colorName" class="text-size-md">{{value}}</button>  </div></template><script>    export default {        name: 'bottomBtn',        props: ['value','color'],        data(){            return {                orange:true,            green:false            }        },        computed:{            //动态绑定class            colorName(){                if(this.color == 'orange'){                    return this.colorName = 'orange';                }else if(this.color == 'green'){                    return this.colorName = 'green';                }            }        }    }</script>

5.遇到的问题：
在父子组件进行props传值的时候，遇到了一点小的问题，初始代码是这样的

父组件中使用代码是这样的：<bottom-Btn value="创建计划" color="orange" class="bottomBtn"></bottom-Btn>子组件： <button id="btn" v-bind:class="colorName" class="text-size-md">{{value}}</button>computed:{             colorName(){                if(this.color == 'orange'){                    return this.colorName = 'orange';                }else if(this.color == 'green'){                    return this.colorName = 'green';                }            }        }

后来在子组件中改进的代码：

 <button id="btn" v-bind:class="colorName" class="text-size-md">{{value}}</button> data(){            return {                orange:true,                green:false,                colorNames:''            }        }, computed:{             colorName(){                if(this.color == 'orange'){                    return this.colorNames = 'orange';                }else if(this.color == 'green'){                    return this.colorNames = 'green';                }            }        }

或者在子组件中这样改进：

 <button id="btn" v-bind:class="this.colorNames" class="text-size-md">{{value}}</button> ,        created(){            this.colorName();        },        methods:{            //动态绑定class            colorName(){                if(this.color == 'orange'){                    return this.colorNames = 'orange';                }else if(this.color == 'green'){                    return this.colorNames = 'green';                }            }        },

阅读全文

0 0