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: 0; padding: 0 10px; opacity: 0; }
过渡的 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 { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } }
组件
组件系统是 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:1} } }) 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!!