初学vue

Vue 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件;

一个简单vue实例

目录解析

组件化

组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用。

举一个简单的组建例子，我们首先编写一个star组件，它就是一个普通的star.vue文件。它的作用就是简单实现了一个五角星。

如何在其他的vue文件中使用这个star组件呢？如下图所示，首先通过import引入star组件对象，并在想使用star组件的vue文件中声明注册star组件。现在就可以愉快的通过标签来在该vue文件中任意地方使用star组件了。在你想展示一个五角星的地方，使用一个star标签，就可以轻松完成这个功能。

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。如本例所示，子组件star要显式的使用props选项声明它期待获得的数据。在这里就是指的“size”和“score”两个变量。我们可以通过父级给子组件star传入大小和数值这两个对象，来实现对子组件的定制化。

重点：

1.父组件向子组件传值

2.子组件向父组件传值

过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，可以用简单的几行代码实现酷炫的过渡效果。Vue 提供了 transition 的封装组件，在使用v-if、v-show等方法使得transition内部dom元素发生变化时，可以给任何元素和组件添加 entering/leaving 过渡。

当v-show中内容发生变化时，transition组件中的元素会发生状态的改变，在应用了transition封装后，Vue会自动识别目标元素是否应用了CSS过渡效果动画，如果有，会在合适的时机添加 entering/leaving的class来实现该过渡效果。

下图所示是一个简单的过渡效果的例子，需要将想实现过渡效果的元素放在transition标签中包裹，通过name=“slide-fade”来声明过渡效果名称，并在对应的vue文件中添加过渡效果 的css样式，这样就可以简单的完成该元素的过渡效果。