初步学习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 类名：

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

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

过渡流程详解

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

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

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

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

调用 beforeEnter 钩子；
添加 v-enter 类名到元素上；
把它插入 DOM；
调用 enter 钩子；
强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
等待过渡结束；
调用 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!!

巴特西