Vue

Vue是这两年比较火的H5轻量式框架，提供了MVVM数据绑定，它简单，灵活，易用，也容易上手，所以才会受到很多前端开发者的青睐.

安装

推荐使用 Vue-cli 安装，简单快捷。

#使用npm全局安装vue-cli
npm install --global vue-cli

#创建一个基于 webpack 模板的项目,xxx为项目名称
vue init webpack xxx

cd xxx
#安装依赖
npm install

#运行 dev 模式
npm run dev

之后在浏览器中打开http://localhost:8080/，就可以看到项目生成的站点了。

Vue文件结构由三分部组成

<template>
   <!-- HTML视图 -->
</template>

<script>
  <!-- javaScript代码 -->
</script>

<style>
  <!-- css样式 -->
</style>

双向数据绑定

<div id="app">
  {{ message }}
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

{{ message }} 的内容会跟着input的改变而变。{{}}为获取值的表达式，还支持javascript表达式。如

{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('')}}
{{ number + 1  }}

条件渲染

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-if是一个条件指令，v-if为true的时候该组件才会显示，否则则不渲染该组件。v-else，v-else-if同理。

循环

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

v-for 指令根据一组数组的选项列表进行渲染。items为数组，item为每个循环中的索引对象。

事件处理

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

v-on 指令用来监听 DOM 事件的事件，触发javascript代码

v-on支持的事件：

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

表单控件绑定

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

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

动态绑定 v-bind：

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

Vue-router

vue-router是vue官方推荐使用的路由映射组件。用 Vue.js + vue-router 创建单页应用非常简单。

安装

npm install vue-router

在项目中安装路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

配置路由

在项目中新建一个router.js来配置路由

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

/user/foo 和 /user/bar 等类似path都将映射到当前路由，

在path使用冒号开头的字段为路径参数，当匹配到一个路由时，参数值会被设置到 this.$route.params。
获取传递的参数：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

参数中可以传递多个字段。

router-link

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。当用户点击包含router-link组件的组件时，就会跳转到对应的目标地址。

如：

<router-link :to="{ path: 'home' }">Home</router-link>

传递路由参数：

<router-link :to="{ name: 'user', params: { userId: 123 }}">user</router-link>

<!-- 带查询参数，下面的结果为 /user?id=123 -->
<router-link :to="{ path: 'user', query: { id: '123' }}">Register</router-link>