vue基础二

组件的应用

首先我们要先安装vue
vue init webpack vuetest
bpm run dev
上面两句命令语句安装在你要使用的文件夹内
这样我们就创建了一个vue环境的服务器

在浏览器上输入localhost:8080就会出现下面的界面了 99DF33BB-C1DB-4502-B145-FC886B0FBF59.png
这样说明我们已经成功了
这时我们在文件夹中就会找到vuetest文件夹，我们可以再vuetest文件夹下的src文件夹下的compoents文件夹里创建组件了
下面我来介绍几种简单的事件组件

• 传递事件
  先新建一个Emit.vue文件，这时就会生成下面的代码

  <template>
  
  </template>
  
  <script>
      export default {
          name: "emit",
      }
  </script>
  
  <style scoped>
  
  </style>
  

现在我们在template标签内输入

  <h1>我是emit组件</h1>
<button @click="passDad">点击我的时候向父级发射</button>

在name:"emit",下面输入

   methods:{
      passDad(){
        //传递事件
        //第一个参数是发射的事件名称，后面是要传递的数据
        this.$emit("myfn",this.message)
      }
  }

这时被没有结束，我们要到App.vue文件中
在script文件夹中输入

  import emit from '@/components/emit'

在components:{}输入emit,
同时要再methods下面输入

  fn:function(mydata){
  console.log(mydata)

最后在id=app的标签下输入<emit @myfn="fn"></emit>
这样一个组件就完成了
},
下面介绍prop组件
prop组件，Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会
在App.vue id为app的标签下输入

  <person
  username="张三"
  :height="178"
  color="white"
></person>
<person
  username="李四"
  :height="178"
  color="black"
></person>

在新建的person.vue文件内输入

  <template>
<div>
  <p>姓名:{{username}}</p>
  <p>肤色:{{color}}</p>
  <p> 身高:{{height}}</p>
  <button @click="showprops">点击我查看props</button>
</div>
</template>

<script>
export default {
    name: "person",
  // props:['username','height','color'],
  props:{
      username:{type:String},
      height:{type:Number},
      color:{type:String}
  },
  methods:{
            showprops:function(){
              console.log(this.userna      me,this.height,this.color      )
            }
        }
      }
  </script>

<style scoped>

</style>

其他设置与上面emit设置差不多

运行结果如下 6A29AFCD-769F-4DFA-952E-27E44064D993.png
下面讲一下动画设置

App.vue设置与上面的都差不多就不一一说了

  <template>
<div>
  <transition name="fade">
    <div v-show="judge">我是要过渡的div</div>
  </transition>

  <button @click="judge=!judge">点击我切换div显示隐藏</button>
  <hr>
  <!--组件的动态切换-->
  <!--组件的动态切换 模式切换-->
  <transition name="fade" mode="out-in">
    <div :is="switchs?'commont1':'commont2'"></div>
  </transition>
  <button @click="switchs=!switchs">点击我切换组件</button>
  <hr>
  <!--if else控制切换 读缓存了，使用key 可以进行修改-->
  <transition name="mymove" mode="out-in">
    <div v-if="switchs" key="1">我是div1</div>
    <div v-else key="2">我是div2</div>
  </transition>
  <hr>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div class="mydiv" v-show="myjudge">我是div的内容</div>
  </transition>
  <button class="btn" @click="myjudge=!myjudge">点击我切换</button>

</div>
</template>

<script>
    import commont1 from './commont1'
    import commont2 from './commont2'

export default {
    name: "",
  data:function(){
      return{
        judge:true,
        switchs:true,
        myjudge:true
      }
  },
  methods:{
      beforeEnter:function(el){
       $(el).css({left:"0px",opacity:0});

      },
    enter:function(el,done){
        $(el).animate({
          left:"380px",opacity:1
        },done)


    },
    leave:function(el,done){
      $(el).animate({
        left:"800px",opacity:0
      },done)
    }
  },
  components:{
    commont1,
    commont2
  }
}
</script>

  <style scoped>
    .fade-enter-active,.fade-leave-active{
      transition:all 1s;
  }

  .fade-enter,.fade-leave-to{
      opacity:0;
  }
  .mymove-enter-active,.mymove-leave-active{
      transition:all 1s;
  }

    .mymove-enter{
      transform:translate(-500px);
  }
    .mymove-leave-to{
      transform:translate(500px);
    }
    .mydiv{
      position:absolute;
      left:500px;

  }
  .btn{
      margin-top:30px;
    }
</style>

上面有通过JS设置动画还有CSS设置的动画
介绍上面使用到的知识点

• transition 会有mode模式默认的是in-out ：先进入 在出去
• if else控制切换 读缓存了，使用key 可以进行修改
• 会有 4 个(CSS)类名在 enter/leave 的过渡中切换
  1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
  2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
  3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
  4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
• s过度动画 不需要给transition加上name属性

过滤器

    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数

Slot 插槽功能

• 单个插槽
  直接通过slot来获取

• 具名插槽
  子组件里设置name值
  <slot name=“header”></slot>
  父组件设置slot属性
  <div slot=“header”>我是头部内容</div>

自定义指令

全局注册自定义指令：

    Vue.directive("backgroundDirective",{
            inserted: function (el) {
    //           console.log(el);
                el.style.background = "red";
            }
        })

局部注册自定义指令：

    var vm  = new Vue({
        el:"#myapp",
        data:{
            message:"我是测试数据"
        },
        directives:{
            backgroundDirective:{
                inserted:function (el,binding) {
                    el.style.background = "red";
                }
            }
    
        }
    })