Vue.js框架

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 安装

1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入。

下载vue.js

2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN(国内): https://cdn.staticfile.org/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

3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：
使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它。

查看版本

$ npm -v
2.3.0

升级 npm

cnpm install npm -g

升级或安装 cnpm

npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 NPM 安装

最新稳定版

$ cnpm install vue

命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

全局安装 vue-cli

$ cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

这里需要进行一些配置，默认回车即可

    进入项目，安装并运行：
    $ cd my-project
    $ cnpm install
    $ cnpm run dev
     DONE  Compiled successfully in 4388ms
    > Listening at http://localhost:8080

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等; components: 目录里面放了一个组件文件，可以不用; App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录; main.js: 项目的核心文件。
test	静态资源目录，如图片、字体等。
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

Vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：

  var vm = new Vue({
    // 选项
  })

在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，
在 div 元素中：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。

双大括号用于输出对象属性和函数返回值。
如:

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
当这些属性的值发生改变时，html 视图将也会产生相应的变化。

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

Vue语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到
DOM 操作上.

插值

文本

数据绑定最常见的形式就是使用(双大括号)的文本插值：

文本插值

Html

使用 v-html 指令用于输出 html 代码：
v-html 指令

属性

HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向
数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由”管道符”指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

在 v-bind 指令中

<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值
将被求值然后传给过滤器作为第三个参数。

缩写

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

Vue.js 条件与循环

v-if
条件判断使用 v-if 指令：
在元素 和 template 中使用 v-if 指令：

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

v-else
可以用 v-else 指令给 v-if 添加一个 “else” 块：
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show
我们也可以使用 v-show 指令来根据条件展示元素

v-show 指令

<h1 v-show="ok">Hello!</h1>

循环语句

循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且
site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

模板中使用 v-for：

你也可以提供第二个的参数为键名：

第三个参数为索引：

v-for 迭代整数
v-for 也可以循环整数

Vue.js 计算属性

计算属性关键词: computed
反转字符串的例子：

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它
的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，
函数总会重新调用执行。

使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

从实例运行结果看在运行 vm.site = ‘前端框架 http://www.tangdev.top'; 时，
setter 会被调用，vm.name 和 vm.url 也会被对应更新

Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化

以下实例通过使用 watch 实现计数器：

实现效果:

购物车案例:

实现效果:

Vue.js 样式绑定

Vue.js class

class与style是 TML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。vue.js
v-bind在处理class和style时,专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class属性绑定

v-bind:class设置一个对象，从而动态的切换 class:

可以在对象中传入更多属性用来动态切换多个 class

text-danger 类背景颜色覆盖了 active 类的背景色：
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

也可以直接绑定数据里的一个对象：

也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

数组语法

把一个数组传给 v-bind:class ，实例如下：

使用三元表达式来切换列表中的 class ：

Vue.js style(内联样式)

在 v-bind:style 直接设置样式：

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测
并添加相应的前缀。

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

v-on 可以接收一个定义的方法来调用

直接绑定到一个方法，也可以用内联 JavaScript 语句：

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

实例:

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Vue.js 表单

用 v-model 指令在表单控件元素上创建双向数据绑定

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

结果:

单选按钮

单选按钮的双向数据绑定：

结果:

select 列表

下拉列表的双向数据绑定：

结果:

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象
为一个组件树：

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>

钩子

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行
一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，
可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
    name: 指令名，不包括 v- 前缀。
    value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
    oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
    无论值是否改变都可用。
    expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ，
    expression 的值是 "1 + 1"。
    arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
    modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar,
    修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue.js 过渡 & 动画

过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

<transition name = "nameoftransition">
   <div></div>
</transition>

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之
前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效
(与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时
立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效
(与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

####自定义过渡的类名
通过以下特性来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库
结合使用。

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

显性的过渡持续时间

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)

JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>

多个元素的过渡

设置多个元素的过渡，一般列表与描述：
需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>抱歉，没有找到您查找的内容。</p>
</transition>

Vue.js Ajax(vue-resource)

Vue 要实现异步加载需要使用到 vue-resource 库。

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

Get 请求

点击:

结果:

如果需要传递数据，可以使用 this.$http.get(‘get.php’,jsonData) 格式，第二个参数
jsonData 就是传到后端的数据。

post 请求

post 发送数据到后端，需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，
可以启用 emulateJSON 选项。

语法 & API

可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求

属性	类型	描述
url	string	请求的目标URL
body	Object, FormData, string	作为请求体发送的数据
headers	Object	作为请求头部发送的头部对象
params	Object	作为URL参数的参数对象
method	string	HTTP方法 (例如GET，POST，…)
timeout	number	请求超时（单位：毫秒） (0表示永不超时)
before	function(request)	在请求发送之前修改请求的回调函数
progress	function(event)	用于处理上传进度的回调函数 ProgressEvent
credentials	boolean	是否需要出示用于跨站点请求的凭据
emulateHTTP	boolean	是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSON	boolean	设置请求体的类型为application/x-www-form-urlencoded

Vue.js 响应接口

Vue 可以添加数据动态响应接口。
例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外
才能实现正确的响应。
实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。

Vue.set

Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

Vue.set( target, key, value )

参数说明：

target: 可以是对象或数组
key : 可以是字符串或数字
value: 可以是任何类型

Vue.delete

Vue.delete 用于删除动态添加的属性 语法格式：

Vue.delete( target, key )

参数说明：

target: 可以是对象或数组
key : 可以是字符串或数字

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦