双向数据绑定/组件/表单||类型排序/过滤||路由||判断/循环迭代||计算机||CSS3样式绑定/时间处理
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
说到组件，我们要先了解MVVM框架。
-
M指的是model：数据访问层；
-
V指的是View：UI界面；
-
VM指的是ViewModel：他是view的抽象，负责view和model之间的信息转换，将view的command传送到model。
优点：
*简单：官方文档很清晰，比 Angular 简单易学；
*快速：异步批处理方式更新 DOM；
*组合：用解耦的、可复用的组件组合你的应用程序；
*紧凑：~23kb min+gzip，且无依赖；
*强大：表达式 & 无需声明依赖的可推导属性 (computed properties)；
*对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
*新生儿：新的项目，2014年3月20日发布的0.10.0 Release Candidate版本，目前github上面最新的是2.2.4版本，没有angular那么成熟；
*影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
*不支持IE8
一、使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
1.定义View；
2.定义Model；
3.创建一个Vue实例或"ViewModel"，它用于连接View和Model；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"， 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
二、MVVM 双向数据绑定:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
三、vue路由
原理一：History API (..?x=6);
原理二：hash (..#/home ;
类似：轮播插件（Swiper）；
一般用于移动app页面跳转；
<template>
<div id="app">
<h1>Hello App!</h1>
<ul>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<li><router-link to="/foo">Go to Foo</router-link></li>
<li><router-link to="/bar">Go to Bar</router-link></li>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
</ul>
<router-view ></router-view>
</div>
<template>
<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = {
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
};
const Bar = {
template: '<div><h1>About</h1><p></div>'
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{
path: '/foo',
component: Foo
}, {
path: '/bar',
component: Bar
}]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
</script>
<style scoped>
<style>
四、filters methods:
五、配置环境:
- 1.安装node.js;
- 2.通过npm命令安装vuejs:[Windows PowerShell]替代[node.js];
- 全局安装 vue-cli;
- npm install -g vue-cli;
- 创建一个基于 "webpack" 模板的新项目;
- vue init webpack project-name;
- npm install;
- npm run dev 启动项目;
- npm常用指令：d:||ls||cd rui+tab||cd ruilai||cd ./||cd../||cls
*Vue 指令总结
纯属个人观点,仅供参考！