十五周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录。

Vue.js Day3

品牌列表-从数据库中获取列表。

1. 全局配置接口的根域名 vue-resource
2. Vue.http.options.root='http://vue.studyit.io';如果我们通过全局配置了请求的数据接口 根域名，则在每次发起http请求时要用相对的url路径，前面不能带“/”,否则不会启用根路径
3. Vue中的动画，动画能够提升用户的体验，帮助用户更好的理解页面中的功能。位移、淡入淡出等基本动画

导入Animate.css包

①自定义的动画

②导入包第三方类库实现来回动画

③半场动画的实现呢？比如加入购物车

1. 入场的钩子函数的使用。实现小球的半场动画。
2. 给列表添加动画和删除动画 07-列表动画
3. Vue的组件学习

7.1 什么是组件？

组件的出现，就是为了拆分Vue实例的代码里，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

7.2 组件化和模块化？

--模块化：是从代码逻辑角度进行划分，方便代码分层开发，保证每个功能模块的职能单一；

--组件化：是从UI界面的角度进行划分，前端的组件化，方便ui组件的重用。

7.3 如何创建组件？有三种方式,都是全局的组件，不仅app可以使用，app2等也可以使用。

7.3.1方式一①

<div id=“app”>

<my-com1></my-com1>

</div>

//第一步：使用Vue.extend来创建全局的Vue组件。

Var com1=Vue.extend({

template:’<h3>这是使用Vue.extend创建的组件</h3>’

})

//第二步：使用Vue.component(‘组件的名称’，创建出来的组件模板对象)

Vue.component(‘myCom1’,com1);

注意：在定义组建的时候，组件名称使用驼峰命名，在引用组件的时候需要把大写的驼峰改成小写字母，两个字母之间用横线连接；如果不使用驼峰，直接用名称来引用。

方式一②，把两步结合成一步。Vue.componend第一个参数：组件名称，将来在引用组件的时候，直接引用名称。

Vue.component(‘myCom1’,Vue.extend({

template: ‘<h4>这是用Vue.extend创建的组件</h4>’

})   

7.3.2方式二

Vue.component(‘mycom2’,{

     template:’<h3>这是使用Vue.component创建出来的</h3>’

})

注意：无论是哪种方式创建出来的组件，组件的template有且只有一个根元素。

7.3.3 方式三

<div id=”app”></div>

<!—在被控制的app外面，使用template元素，定义组件的HTML模板结构-->

<template id=”tmp1”>

      <div>

          <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮。</h1>

          <h4>nice!</h4>

      </div>

</template>

Vue.component(‘mycom3’{

      template:’#tmp1’

})

7.4 如何定义私有组件？如，在vm2中创建。

私有属性：

var vm2=new Vue.({

el:’#app2’

data:{},

methods:{},

filters:{},

directives{},

//定义实例内部私有的组件

components:{

      login：{

          template:’<h1>这是私有的login组价</h1>’

      }

},

 

beforeCreate:{},

created:{},

beforeUpdate:{},

updated:{},

beforeDestroy:{},

destroyed:{}

})

7.4 组件切换的方式

7.4.1 v-if和v-else实现两个组件的切换

7.4.2 多个组件的切换

<a href=”” @click.prevent=”comName=’login’”></a>

 <component  :is=’comName’></component>

<script>

Vue.component(‘login’,{

      template:’<h2>登录组件</h2>’

})

var vm=new Vue({

el：‘#app’,

data:{

      comName:’login’

     },

Methods:{}

})

7.5 组件切换的动画

<style>

        .v-enter,.v-leave-to{

            opacity: 0;

            transform:translateX(150px);

        }

        .v-enter-active,.v-leave-active{

            transition: all 0.5s ease;

        }

    </style>

<transition mode=”out-in”>

      <component :is=”comName”></component>

</transition>

Vue.js Day4

一、父子组件之间的传值关系

二、什么是路由

1.复习：实现小球动画

2.复习：组件定义方式

3.组件传值，父组件向子组件传值

4.组件传值，子组件通过事件调用向父组件传值。

5.组件案例----发表评论功能，发表和自动刷新功能的实现。

6.使用ref获取DOM元素和组件引用。

console.log(this.$refs.myh3.innerText)

this.$refs.mylogin.show()

7.路由

7.1什么是路由？

后端的路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务起上的资源。

前端的路由：对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换。同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。

★在页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由库à创建路由VueRouteràrouts:[ { } ]