words Demo总结（二）

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

//引入全局css样式的时候，一定要在main.js中引入，这样全局就可以使用了
//使用全局main.less样式，一定要安装下面的loader
require('!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';
                }
            }
        },