vue.js初学习
一、简介
1.定义:
vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
MVVM(Model-View-ViewModel),在常用的MVC(Model-View-Controller)模式的基础上,增加了一层ViewModel,核心,它能够实现数据驱动,也是常说的双向绑定的前提:不仅View的更改可以反映到Model,Model的更改也可以反映到View,二者实现的前提也就是ViewModel把二者联系起来了。
2.特点:
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
3.响应的数据绑定:
Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。
二、使用vue.js
简单的hello world的示例,让你看清双向绑定使用Vue.js的好处!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>vuejs</title> </head> <body> <!--这是view--> <div id="app"> {{message}} </div> <script src="js/vue.min.js" type="text/javascript"></script> <script type="text/javascript"> // 这是model var model={ message:"hello vue.js" }; // 这是ViewModel,vue实例 // 连接view和model new Vue({ el: '#app',//Vue实例挂载到id为app标签上 data: model//数据来源于model对象 }); </script> </body> </html>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程,如图中注释所示。
- 定义View
- 定义Model
- 创建一个View实例或"ViewModel",它用于连接View和Model
双向绑定演示:
1、从View改变,绑定更新到Model,如图所示:
2、从Model改变,绑定更新到View,如图所示:
三、Vue.js常用指令
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
- v-model指令
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 } } })
v-show指令
<div id="app"> <!-- v-show指令判断 --> <h1 v-show="hilo">hi</h1> </div> <script> var myvue=new Vue({ el: '#app', data: { hilo:true }); </script>
v-else指令
<div id="app"> <!-- if-else 判断 --> <div v-if="ok"> sorry </div> <div v-else> hello!! </div> </div> <script> var myvue=new Vue({ el: '#app', data: {
ok:true } }); </script>
v-for指令用于渲染列表。这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名
<div id="app"> <!-- 循环 --> <ul> <li v-for="value in list"> {{value}} </li><br> <!-- 循环显示键值对 --> <li v-for="(value,key) in list"> {{key}}:{{value}} </li> </ul> </div> <scirpt> var myvue=new Vue({ el: '#app', data: { list:{ name:"lok", age:19, sex:"男" } } }); </script>
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-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-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:'', }, })
4、关于不同语言的for循环语法格式
vue.js for循环语法:
<li v-for = "变量名 in 数组"> {{变量名}}</li>
java for循环语法:
for(类名 别名 : 数组){ System.out.println(别名.属性); }
jstl for循环语法:
<c:forEach var="自定义变量名" items ="数组名"> <li>${变量名.属性}</li> </c:forEach>
oracle 循环语法:
CURSOR mycur IS SELECT NAME FROM T_STUDENT; BEGIN --打开 OPEN mycur; LOOP FETCH mycur INTO V_name; --无数据时退出 EXIT WHEN MYCUR%NOTFOUND; --打印显示: END LOOP; END;
5、过渡
通过 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 }, })
6、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); } }
7、组件
组件系统是 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:当前组件先过渡出去,等它的过渡完成之后新组件过渡进入。