Vue.js学习笔记（三）--来自于慕课网的入门实战教程

还在更新中，，如果你还在入门vue，欢迎阅读
21、
因为HTML默认对大小写不敏感，所以，我们在模板（template）中写组件的时候，建议使用中间带有横线的格式，例如：

我注册了两个组件：

components: {
  ComA,
  comAHasSomeChildren
}

此时，我使用这两个组件的时候，建议用中线，例如：

<template>
    <com-a></com-a>
    <com-a-has-some-children></com-a-has-some-children>
</template>

也就是说，每次遇到了一个大写，都要用 - 来进行分隔，并且都写成小写（同理，属性也是建议这种格式）。

在vue1.0如果不用这种格式是会报错的，但是vue2.0支持写成<ComA>、<comAHasSomeChildren>。因为它会转化为建议的那种格式。

22、

可以使用is标签动态的使用组件

23、

父组件要把他的一些值（例如number）传递给子组件，可以在子组件里面使用props选项来获取，并且在data里面不需要再声明它了。

在methods也可以通过this.number来使用它

假设，我在父组件里面使用了子组件，我可以在父组件里面的子组件标签里面写入需要传递的值

例如：

<!--这是在父组件的app.vue文件里面-->
<template>
    <div>
        <!--向子组件传递这个number-->
        <com-a number=2></com-a>
    </div>
</template>

<!--这是子组件所在的文件a.vue-->
<template>
    <div>
        <p>{{content}}</p>
        <p>我是来自·父组件的{{number}}</p>
    </div>
</template>

<script type="text/javascript">
    export default{
        props:['number'],
        data: function(){
            return {
                content: 'I am a component'
            }
        },
    }
</script>

注意一点，传递给子组件的那个值它要用中线的格式，不要用驼峰命名的格式，例如，

<!--这是父组件所在的app.vue文件-->
<component-a num-to-do=3></component-a>

<!--这是子组件所在的a.vue文件-->
props:['num-to-do']

<!--这是a.vue文件，接下来使用传递过来的值-->
<template>
    <div>
        <p>我是来自·父组件的{{numToDo}}</p>
    </div>
</template>

注意到，在这里会有一个转换，因为num-to-do不符合js变量的命名，所以它会转换成numToDo

{{}}里面放的是js变量

还可以使用slot（插条）来传递，例如代码中的那个<p>我将被插入子组件中</p>

<!--这是父组件所在的app.vue文件-->
<template>
  <div>
      <component-a num-to-do=3>
        <p>我将被插入子组件中</p>
      </component-a>
  </div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA

export default{
  components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      myValue: '',
      newValue: '',
      oldValue: ''
    }
  },
}
</script>

<!--这是子组件所在的a.vue文件-->
<template>
    <div>
        <p>{{content}}</p>
        <p>我是来自·父组件的{{numToDo}}</p>
        <slot></slot>
    </div>
</template>

<script type="text/javascript">
    export default{
        props:['num-to-do'],
        data: function(){
            return {
                content: 'I am a component'
            }
        },
    }
</script>

如果在子组件里有多个slot，可以在父组件里面指定插入到那个slot里面

24、过渡的效果（使用css实现）

<transition></transition>配合v-show这样的指令来实现，例如：

    <!--这是app.vue文件-->
    <template>
      <div>
          <button v-on:click="toggle">切换</button>
          <transition name="my-trans">
            <p v-show='isShow'>hello</p>
          </transition>
      </div>
    </template>
    <script>
    import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
    
    export default{
      components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
      data: function(){
        return {
          isShow: true,
        }
      },
      methods:{
        toggle(){
          this.isShow = !this.isShow;
        }
      }
    }
    </script>
    <style type="text/css">
    .my-trans-enter-active, .my-trans-leave-active{
      transition: .5s;
    }
    .my-trans-enter{
      transform:translateY(-500px);
      opacity: 0;
    }
    .my-trans-leave-active{
      transform: translateY(500px);
      opacity: 0;
    }
    </style>

分析：

过渡用四种状态：enter、enter-active、leave、leave-active

<transition name="my-trans">标签中的name值是可以任意取的，但是，对应的类名是要更改的，例如：

    <style type="text/css">
    .my-trans-enter-active, .my-trans-leave-active{
      transition: .5s;
    }
    .my-trans-enter{
      transform:translateY(-500px);
      opacity: 0;
    }
    .my-trans-leave-active{
      transform: translateY(500px);
      opacity: 0;
    }
    </style>

因为<transition name="my-trans">标签中的name值是my-trans，所以，类名的定义要加上前缀my-trans，否则会但不到动画

不要漏了transition的时间，否则看不到切换的那个过程（动画）

25、动态的切换组件的显示

我们得把要切换的组件的挂载点放在<transition></transition>里面，例如：

    <template>
      <div>
          <button v-on:click="toggleCom">切换</button>
          <transition name="my-trans">
            <div v-bind:is="currentView"></div>
          </transition>
      </div>
    </template>
    <script>
    import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
    import componentB from './components/b.vue'
    
    export default{
      components:{componentA, componentB},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
      data: function(){
        return {
          currentView: 'component-b',
          isShow: true,
        }
      },
      methods:{
        toggleCom(){
          if(this.currentView === 'component-a'){
            this.currentView = 'component-b';
          }
          else{
            this.currentView = 'component-a';
          }
        }
      }
    }
    </script>
    <style type="text/css">
    .my-trans-enter-active, .my-trans-leave-active{
      transition: .5s;
    }
    .my-trans-enter{
      transform:translateY(-500px);
      opacity: 0;
    }
    .my-trans-leave-active{
      transform: translateY(500px);
      opacity: 0;
    }
    </style>

如果我们只写成这样，我们会发现一个问题，比如所a组件还没有完全消失，b组件就跟着进来了(因此会有b组件下浮又上升的过程)。我们可以做如下修改：

<transition name="my-trans" mode="out-in">

此时，我们很容易的想到，有没有in-out呢？

答案是有的，如果改成：

<transition name="my-trans" mode="in-out">

那么，当另一个组件完全显示出来了，另一个组件才会消失

26、多元素的过渡，如果两个元素的标签名是相同的，那么在vue里面是不会有动画效果的，例如：

    <template>
      <div>
          <button v-on:click="toggleCom">切换</button>
          <transition name="my-trans" mode="out-in">
            <p v-if="show">
              I am show
            </p>
            <p v-else>
              not in show
            </p>
          </transition>
      </div>
    </template>

我们可以添加key来进行区分，例如：

    <template>
      <div>
          <button v-on:click="toggleCom">切换</button>
          <transition name="my-trans" mode="out-in">
            <p v-if="show" key="1">
              I am show
            </p>
            <p v-else key="2">
              not in show
            </p>
          </transition>
      </div>
    </template>

注意，这里不是只能写key！！！这样也可以：

    <transition name="my-trans" mode="out-in">
      <p v-if="isShow" index="">I am show</p>
      <p v-else key="">not in show</p>
    </transition>

27、过渡的效果（使用js实现，使用时间钩子）

（这种方法可以使用第三方库，例如jquery，建议把jquery的引入放在最外层的那个index.html文件里面）

使用js实现的时候，在<transition>标签里面是不需要name的，但是需要加上v-bind:css="false"

    <template>
      <div>
          <button v-on:click="isShow = !isShow">切换</button>
          <transition
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:leave="leave"
          v-bind:css="false">
            <p class="animate-p" v-show="isShow">hello</p>
          </transition>
      </div>
    </template>
    <script>
    import Vue from 'vue'
    import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
    import componentB from './components/b.vue'
    
    export default{
      components:{componentA, componentB},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
      data: function(){
        return {
          currentView: 'component-b',
          isShow: true,
        }
      },
      methods:{
        beforeEnter: function(el){//其中的el指的是animate-p这个元素
          $(el).css({
            left: '-500px',
            opacity: 0
          });
        },
        enter: function(el, done){
          $(el).animate({
            left: 0,
            opacity: 1
          }, {
            duration: 1500,
            complete: done
          });
        },
        leave: function(el, done){//这里的done方法不能漏了，否则会出错
          $(el).animate({
            left: '500px',
            opacity: 0
          }, {
            duration: 1500,
            complete: done
          });
        }
      }
    }
    </script>
    <style type="text/css">
    html{
      height: 100%;
    }
    body{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .animate-p{
      position: absolute;
      top: 0;
      left: 0;
    }
    </style>

28、自定义指令（分为局部的和全局的）

使用选项directives，例如：

directives: {
  color: function(el, binding){
    el.style.color = binding.value
  }
}

这样就自定义了一个指令 v-color，它会是文字变成指令的值的颜色，具体的使用方法如下：

//这是app.vue文件
<template>
  <div>
      <p v-color="'red'">hello world</p>
  </div>
</template>
<script>
import Vue from 'vue'
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
import componentB from './components/b.vue'

export default{
  components:{componentA, componentB},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      currentView: 'component-b',
      isShow: true,
    }
  },
  directives: {
    color: function(el, binding){
      el.style.color = binding.value;
    }
  }
}
</script>
<style type="text/css">
html{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

<p v-color="'red'">hello world</p>

注意这里的 ‘red’ 两边是需要加双引号的，如果没加，例如下面的样子会报错：

<p v-color="red">hello world</p>

以上是局部指令，也就是只能在app.vue文件中使用

如果需要写成全局指令，那么上面的内容就要写到main.js文件里

或许有人会问自定义指令有什么用，让字变成红色用v-bind内置的指令一样也可以做到啊。但是如果要实现光标自动聚焦的效果，Vue就用内置的指令实现不了了，但是可以使用自定义指令实现：

<template>
  <div>
      <p v-color="'red'">hello world</p>
      <input type="text" name="text" v-focus>
  </div>
</template>
<script>
import Vue from 'vue'
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
import componentB from './components/b.vue'

export default{
  components:{componentA, componentB},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      currentView: 'component-b',
      isShow: true,
    }
  },
  directives: {
    color: function(el, binding){
      el.style.color = binding.value;
    },
    focus: {
      inserted(el, binding){
        el.focus();

      }
    }
  }
}
</script>
<style type="text/css">
html{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>