初步学习vue.js

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

响应的数据绑定

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

<!--html页面-->
<div id="example">
    hello {{name}}
</div>
----------------------------------------------
//js文件
var exampleData = {
  name: 'Vue.js'
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
  el: '#example',
  data: exampleData
})

指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上.

v-on指令用于监听 DOM 事件

<!--html页面-->
<div id="example">
    <p>{{msg}}</p>
    <button v-on:click="change">hello</button>
</div>
----------------------------------------------
//js文件

var vm = new Vue({
  el: '#example',
  data:{
        msg:"first"
   },
   method:{
       change:function(){
              this.msg = "second"
        },
   },
})

v-bind 指令用于响应地更新 HTML 特性

<!--html页面-->
<div id="example">
    <!--绑定url-->
    <a v-bind:href="url"></a>

    <!--绑定class-->
    <div v-bind:class="classA"></div>
</div>
--------------------------------------------------------------------
//js文件
var vm = new Vue({
    el:"example",
    data:{
        url:"http://cn.vuejs.org/",
        classA:"container",
    },
})

v-for指令用于渲染列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名

<!--html页面-->
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
--------------------------------------------
//js文件
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-model指令用于数据双向绑定

<!--html页面-->
<div id="example">
    <span>Message is: {{ message }}</span>
    <br>
    <input type="text" v-model="message" placeholder="edit me">
</div>
---------------------------------------------------
//js文件
var vm = new Vue({
    el:"example",
    data:{
        message:'',
    },
})

v-if条件渲染

<div id ="example">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
     <button v-on:click="changeOk">hello</div>
</div>
---------------------------------------------------
var vm = new Vue({
    el:"example",
    data:{
        ok:true,
    },
    methods:{
        changeOk:function(){
            this.ok = false
        }
    }
})

指令修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。

<!--解析为一个字面字符串而不是一个表达式-->
<a v-bind:href.literal="/a/b/c"></a>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

过渡

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

css过渡

 //demo.js
<div id="example">
    <div v-if="show" transition="expand">hello</div>
    <button @click="show = !show">改变show值</button>
</div>

----------------------------------------
//demo.js
Vue.transition('expand', {

  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})
 var vm = new Vue({
        el:'#example',
        data:{
            show:true
        },

})
-----------------------------------------------
demo.css
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: ;
  padding:  10px;
  opacity: ;
}

过渡的 CSS 类名

类名的添加和切换取决于 transition 特性的值。比如 transition="fade"，会有三个 CSS 类名：

1. .fade-transition 始终保留在元素上。
2. .fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。
3. .fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave。

过渡流程详解

当 show 属性改变时，Vue.js 将相应地插入或删除 <div> 元素，按照如下规则改变过渡的 CSS 类名：

• 如果 show 变为 false，Vue.js 将：

1. 调用 beforeLeave 钩子；
2. 添加 v-leave 类名到元素上以触发过渡；
3. 调用 leave 钩子；
4. 等待过渡结束（监听 transitionend 事件）；
5. 从 DOM 中删除元素并删除 v-leave 类名；
6. 调用 afterLeave 钩子。

• 如果 show 变为 true，Vue.js 将：

1. 调用 beforeEnter 钩子；
2. 添加 v-enter 类名到元素上；
3. 把它插入 DOM；
4. 调用 enter 钩子；
5. 强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
6. 等待过渡结束；
7. 调用 afterEnter 钩子。

自定义过渡类名

我们可以在过渡的 JavaScript 定义中声明自定义的 CSS 过渡类名。这些自定义类名会覆盖默认的类名。当需要和第三方的 CSS 动画库，比如 Animate.css 配合时会非常有用：

//demo.html
//引入animate.css
<link href="http://cdn.bootcss.com/animate.css/3.5.1/animate.css" rel="stylesheet">
<div id="example">
    <div v-show="show" class="animated"transition="bounce">Watch me bounce</div>
    <button @click="show = !show"></button>
</div>

--------------------------------------------
//demo.js
 Vue.transition('bounce', {
  enterClass: 'bounceInLeft',
  leaveClass: 'bounceOutRight'
})
 var vm = new Vue({
        el:'#example',
        data:{
            show:true
        },

})

css动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

//demo.html
<div id="example">
    <h1 v-show="show" transition="bounce">Look at me!</h1>
    <button @click="show = !show"></button>
</div>

------------------------------------
//demo.js
 var vm = new Vue({
        el:'#example',
        data:{
            show:true
        },

})
------------------------------------
//demo.css
.bounce-enter {
  animation: bounce-in .5s;
}
.bounce-leave {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  % {
    transform: scale();
  }
  % {
    transform: scale(1.5);
  }
  % {
    transform: scale();
  }
}
@keyframes bounce-out {
  % {
    transform: scale();
  }
  % {
    transform: scale(1.5);
  }
  % {
    transform: scale();
  }
}

组件

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树。通常一个vue应用模板的构造是这样

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是web组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。

在使用组件之前需要先注册组件

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

然后就可以在文件中使用这个组件了。

组件选项问题

传入 Vue 构造器的多数选项也可以用在 Vue。component() 中，不过有两个特例： data and el.在组件中应该使用函数作为这选项，函数返回一个对象

//demo.html
<div id="example">
    <my-component></my-component>
</div>

------------------------------
//demo.js
 Vue.component('my-component',{
     template: '<div>A custom component!</div>',
     data:function(){
         return {a:}
     }
 })
 var vm = new Vue({
        el:'#example',
        data:{
            show:true
        },

})

is特性

一些 HTML 元素，如 <table>，限制什么元素可以放在它里面。自定义元素不在白名单上，将被放在元素的外面，因而渲染不正确。这时应当使用 is 特性，指示它是一个自定义元素：

<table>
  <tr is="my-component"></tr>
</table>

使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用props选项声明 props：

Vue.component('child', {
  // 声明 props
  props: ['msg'],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
})

动态 Props

类似于绑定一个普通的特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

动态组件

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component>元素，动态地绑定到它的 is 特性：

//demo.html
<div id="example">
    <component :is="currentView">
          <!-- 组件在 vm.currentview 变化时改变 -->
        </component>
</div>    

-----------------------------------
//demo.js
new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

transition-mode 特性用于指定两个动态组件之间如何过渡。

在默认情况下，进入与离开平滑地过渡。这个特性可以指定另外两种模式：

• in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
• out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。

总结:vue.js是一款轻量级的用于构建用户界面的渐进式框架。相对其他框架简单易懂，你不需要理解 Angular 的依赖注入是什么东东、$digest 和 $apply, preLink 和 postLink 有什么区别，也不需要像 React 那样编译 JSX，更不需要像 Knockout 那样把所有的属性都变成函数…。。所以，继续学习，just vue!!