vue笔记3

数据接口配置根域名（全局配置）

通过全局配置，请求数据接口的根域名，那么，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接

Vue.http.options.root = 'http://vue.studyit.io/';

this.$http.get('api/getprodlist').then(result => {}）

全局启用 emulateJSON 选项

Vue.http.options.emulateJSON = true;

过度动画（v-…）

v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了
v-enter-active 【入场动画的时间段】
v-leave-active 【离场动画的时间段】

    .v-enter,.v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
    .v-enter-active,.v-leave-active{
      transition: all 0.8s ease;
    }


    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
      <h3 v-if="flag">这是一个H3</h3>
    </transition>


	var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });

name-…（name自定义）

使用transition时设置name,然后可将v替换为自定义name

	<input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>


	.my-enter,.my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }
    .my-enter-active,.my-leave-active{
      transition: all 0.8s ease;
    }


    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        flag2: false
      },
      methods: {}
    });

使用第三方animates类库实现动画

duration用于设置时长（入场与离场可分别设置）

钩子函数半场实现动画

图片中的事件可不全用，用以实现半场效果

    <input type="button" value="快到碗里来" @click="flag=!flag">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
    
    methods: {
        beforeEnter(el){
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          el.offsetWidth
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'
          done()
        },
        afterEnter(el){
          this.flag = !this.flag
        }
      }

其中，enter函数的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用

列表动画（v-for渲染）

在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性

      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>

给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果
通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

组件化与模块化的区别

模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

组件创建方式

方式1

使用 Vue.extend 来创建全局的Vue组件

	var com1 = Vue.extend({
      template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
    })
     Vue.component('myCom1', com1)

如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接

可进行简写化

	Vue.component('mycom1', Vue.extend({
      template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))

方式2：

	Vue.component('mycom2', {
      template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
    })

方式3

  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>

    Vue.component('mycom3', {
      template: '#tmpl'
    })
`

组件切换1（v-if v-else）

用v-if v-else来设定只能设定两个。

    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>


    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })

组件切换2（component设定）

component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <component :is="comName"></component>
    
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })