前言

        前段时间想要学习Weex，发现Weex把渲染原生 UI 的能力赋予某些前端框架。而Vue.js便是其内置的前端框架。作为初学者决定还是先学习一波Vue.js的使用。

什么是Vue？

      Vue.js 是一套用于构建用户界面的渐进式框架。 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

      1、 Vue 的核心库只关注视图层， 采用自底向上增量开发的设计，不仅易于上手，还便于与第三方库或既有项目整合。

      2、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue的安装

        vue.js的使用有几种方式，可以根据自己的情况选择合适的方式安装使用。

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用<script>  标签引入 标签引入 标签引入 标签引入 标签引入标签引入，Vue 会被注册为一个全局变量。Vue下载 标签引入。

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

        BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js

        unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

        cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Vue.js 起步

        每个 Vue 应用都需要通过实例化 Vue 来实现。

        语法格式如下：

  可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 test_main，在 div 元素中：这意味着接下来的改动全部在以上指定的 div 内，div 外部不受影响。

Vue对象中各参数含义如下：

        data 用于定义属性，实例中有一个属性text。

        methods 用于定义的函数，可以通过 return 来返回函数值。

        {{ }} 用于输出对象属性和函数返回值。

上面我们创建了一个比较简单的实例，看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。当Vue的这些属性的值发生改变时，html 视图将也会产生相应的变化。

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

console.info(vue.$data === data) // true

console.info(vue.$el === document.getElementById('test_main')) // true

持续更新中......

第二章Vue内部指令

一、v-if  、v-else、v-show:

内部指令就如同我们学过的jstl标签一般。我们常常使用 <c:if test=""></c:if>标签一般，改变dom结构。

下面直接看关键代码：

---

结果

v-show:其实和v-if差不多，但是v-show其实是改变了该元素的display属性，false时隐藏为none

总结各自特点，

 v-if 判断是否加载，可以减轻服务器的压力，在需要时加载

v-show：调整css dispaly属性，可以使客户端操作更加流畅。

二、v-for指令 ，循环指令

v-for很类似<c:forEach >  标签

 <c:forEach var="变量名" items="要迭代的list" varStatus="每个迭代对象的状态“    begin="循环从哪儿开始" end="循环到哪儿结束"    step="循环的步长">

v-for首先不一样的地方需要注意的是，需要循环哪个标签，就把v-for指令放在哪个标签里，c:forEach则是放在要循环的外面。

输出结果

下面模拟常用的对象数组的循环，同样是通过对象名.属性的方法输出对象的属性值：

输出结果：

三、v-text 与 v-html

现在我们已经知道，用{{}}可以输出data里面的值，比如当data:{   msg:'注册成功'}，

<div id=”app" > <span> {{msg}} </span> </div> 会输出  注册成功，但是，当js中出问题比如变量不存在,，或者网速慢的时候，会出现很不好友好的界面 或者先出现{{msg}}再变成值。

因此vue给我们提供了 v-text，

但是，如果在输出的值中写有html标签，用v-text是输出不出来的，比如msg='<h1> 注册成功<h1>'，那么，v-text 输出的结果就是<h1> 注册成功<h1>,显然不是我们想要的结果，这时我们就需要用v-html标签了。

四、v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。下面我们实现一个网站浏览量的模拟

Vue构造器里的methods方法，methods可以定义很多方法，每一个方法是以对象的形式存在，值是一个匿名函数，在函数里写方法体。

v-on还可以绑定其他元素，监听键盘事件，比如监听键盘的Enter按下弹起事件， v-model表示绑定的数据源，同样需要在data定义,在input输入的值，按回车键就会将输入框的值加上原来的count值，但是看多次输出的结果，可以发现，这个+也就是普通的字符串的拼接，想要达到数字的加法，需要加parseInt （this.count2）就能达到目的

Vue可以监听键盘事件，比如回车键是enter ，每一个键盘其实都对应了键盘码，可以用英文，也可以用键盘码，比如这里的enter的键盘码就是13，

下面附上键盘码图，方便尝试和熟悉

持续更新中。。。。。。。。。