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-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

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：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。

vue.js初学习

一、简介

1.定义：

2.特点：

3.响应的数据绑定：

二、使用vue.js

三、Vue.js常用指令

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

v-if条件渲染

v-show指令

v-else指令

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

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

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

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

4、关于不同语言的for循环语法格式

vue.js for循环语法：

java for循环语法：

jstl for循环语法：

oracle 循环语法：

5、过渡

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

css过渡

过渡流程详解

自定义过渡类名

6、css动画

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

7、组件

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

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

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

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

组件选项问题

is特性：

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

动态 Props

动态组件

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

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

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

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

　 vue.js for循环语法：

　java for循环语法：

　jstl for循环语法：

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