Vue使用

Vue.js 教程

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

---

第一个HelloWord

  
{{ message }}

​

Vue.js 安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：

src/commponents/Hello.vue

 

---

Vue.js 模板语法

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

插值

文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
文本插值

  
{{ message }}

Html

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

v-html 指令

    


    

属性

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

表达式

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

JavaScript 表达式

    {{5+5}}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}
    
菜鸟教程

    

指令

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

    
现在你看到我了

    

参数

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

    
菜鸟教程

    

修饰符

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

用户输入

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

    
{{ message }}
    

    

过滤器

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

{{ message | capitalize }}

过滤器函数接受表达式的值作为第一个参数。

缩写

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

v-on 缩写

Vue 实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的：

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

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

Vue.js 条件与循环

条件判断

v-if
v-else
v-else-if

显示

v-show

---

循环语句

循环使用 v-for 指令。
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

v-for 指令

  

    

      {{ site.name }}
    
  

 

v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据
你也可以提供第二个的参数为键名：

v-for

  

    

    {{ key }} : {{ value }}
    
  

第三个参数为索引：

v-for

  

    

     {{ index }}. {{ key }} : {{ value }}
    
  

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

  

    

     {{ n }}
    
  

---

Vue.js 计算属性

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：

  {{ message.split('').reverse().join('') }}

computed vs methods

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

---

Vue.js 样式绑定

Vue.js class

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

数组语法

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

Vue.js style(内联样式)

1、我们可以在 v-bind:style 直接设置样式：

    
hello

2、也可以直接绑定到一个样式对象，让模板更清晰：

 
hello

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

 
hello

---

Vue.js 事件处理器

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

v-on

  增加 1
  
这个按钮被点击了 {{ counter }} 次。

 

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

  Say hi
  Say what

 

事件修饰符

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

• .stop
• .prevent
• .capture
• .self
• .once

...

...

全部的按键别名：

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

Vue.js 表单

这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

  
input 元素：
  
  
消息是: {{ message }}
    
  
textarea 元素：
  
{{ message2 }}
  

 

修饰符

.lazy

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

.number

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

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

.trim

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

Vue.js 组件

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

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

Vue.component(tagName, options)

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

Prop

prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

---

Vue.js 自定义指令

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

    
页面载入时，input 元素自动获取焦点：
    

 

---

Vue.js 路由

本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。

---

参考链接

菜鸟教程
官方文档：http://vuejs.org/v2/guide/syntax.html
中文文档: https://cn.vuejs.org/v2/guide/syntax.html