vue 学习

每日学习

2019/05/30

在vue的条件渲染中的v-if与v-else-if , v-else ,当满足条件的时候就不会再向下执行，就会终止操作。

vue-cli

vue create myvue( 创建的项目名称 )  该命令必须在vue的3.0版本以上

vue init webpack-simple适合小项目，默认打包后之后一个html和一个js文件

vue init webpack这样的方式适合中大型项目，默认打包完之后，会有很标准的目录，提供了很多的webpack的配置，也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的配置。

2019/05/29 

 计算属性与监听属性

 计算属性 computed 

可以同时监听多个变量，但是数据必须是vue实例中的。

监听属性 watch 

通常情况下监听的是一个变量或者常量，或者是一个单一的值或者是一个数组。

鼠标事件

 @mouseenter="mouseEnter(index) " @mouseleave="mouseLeave(index)"
 @click='函数'
 @mouseover='函数'

css过度动画

单元素/组件的过度

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}