Vue.js与Angular2和React相比，Vue.js一开始就为我们铺平入门的道路，脚手架vue-cli。
因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入Vue.js开发的殿堂。
在开始之前，先安装npm，然后输入vue-cli安装到全局环境
npm i vue-cli -g
然后，开始建立工程
vue init webpack-simple vue-todos
然后进入vue-todos目录，安装脚手架项目的基本支持包：
npm i
安装完支持包后键入以下指令就可以运行一个由脚手架构建的基本Vue.js程序
npm run dev
vue-cli的代码结构
——README.md
——index.html # 默认启动页面
——package.json # npm 包配置文件
——src
——App.vue # 启动组件
——assets
——logo.png
——main.js # Vue 实例启动入口
——webpack.config.js # webpack 配置文件
main.js文件
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Vue2新增的特色Render方法，与React渲染机制一样。为了得到更好的运行速度，Vue2也采用了Virtual DOM。一种比浏览器原生的DOM具有更好性能的虚拟组件模型。
通过import将一个Vue.js的组件文件引入，并创建一个Vue对象的实例，在Vue实例中用Render方法来绘制这个Vue组件（App）就完成了初始化。
将Vue实例绑定到一个页面上，真实存在的元素App Vue程序就引导成功了。
打开index.html文件就能看到Vue实例与页面的对应关系：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Vue 的实例所对应的页面元素 -->
<div id="app"></div>
<!-- 由Webpack 编译后的运行文件 -->
<script src="/dist/build.js"></script>
</body>
</html>
一个Vue实例必须与一个页面元素绑定。Vue实例一般用作Vue的全局配置来使用，例如向实例安装路由、资源插件，配置应用于全局的自定义过滤器、自定义指令等。
App.vue文件被称为单页式组件。.vue文件可以同时承载“视图模板”、“样式定义”和组件代码，使得组件的文件组织更加清晰与统一。
单页组件由三个部分组成
<template> 视图模板
<style> 组件样式表
<script> 组件定义
template属性是V，也就是视图，title属性是M，也就是模型。
从Vue2开始，组件模板必须有且只有一个顶层元素，如果在组件模块内设置多个顶层元素将会引发异常编译。
Vue的视图模板是基于DOM实现的。我们在模板上定义一个网页标题，并通过数据绑定语法将App组件上定义的数据模型绑定到模板上。
在组件脚本定义中使用data定义用于内部访问的数据模型。
使用函数返回是为了可以具有更高的灵活性，例如对内部数据进行一些初始化的处理，官方推荐的用法是采用返回Object对象的函数。
export default {
data () {
return {
title: "vue-todos"
}
}
}
数据绑定
我们可以将Vue实例定义看作一个类的定义，data相当于这个类的内部字段属性的定义区域。在Vue实例内的其他地方可以直接用this引用data内定义的任何属性，比如this.title就是引用了data.title。
v-for指令
可以用于枚举一个数组并将对象渲染成一个列表。如果要输出序号，可以用隐藏的index值来进行输出。（:id=“index”）index的值输出到DOM的id属性上，不加’:’，会被认为正在为id属性赋予一个字符串。
Vue的代码中不推荐直接操作DOM。
样式绑定
由于纯CSS的代码量很大，而且需要不断地重复，less更高效。
webpack支持less编译的包的方法：
npm i less style-loader css-loader less-loader -D
安装完成后在webpack.config.js的modules设置内加入以下的配置：
module: {
rules: [
{
test: /\.less/,
loader: 'style!css!less'
}
]
}
在/assets/中添加一个todos.less文件，并在App.vue的组件定义内引入less样式表：
import './assets/todos.less'
export default {
// ...省略
}
使用import将样式表直接导入到代码的效果是：webpack的less-loader会生成一些代码，在页面运行的时候将编译后的less代码生成到<style>标签内并自动插入到页面的<head>中，有一点要注意，这种做法是全局的，在后面介绍路由部分时会有多个组件页面加载到同一个页上，如果使用import导入样式的话，样式就会长期驻留页面直至Vue的根（root）实例被销毁。这样做得缺点是很容易导致样式冲突。如果希望样式表仅应用于当前组件，可以使用<style scoped>，然后使用CSS的@import导入样式表：
<style scoped>
@import '/.assets/todos.less'
</style>
属性绑定
Vue的属性绑定语法是attribute=“expression”，attribute就是元素接收的属性值（既可以是原生的也可以是自定义的），expression则是在Vue组件内由data或props内定义的对象属性，又或是一个合法的表达式。
如果在元素属性中不加上’:’，Vue认为是向这个属性赋上字符串值而不是Vue组件上定义的属性引用。
样式绑定必然是绑定到判断对象上的:class="{'checked': true}"，不能直接写CSS类名，即使要绑定一个固定的CSS类也都要这样写，即:class="{'btn',true}"，除非不使用样式绑定。
无论绑定的是样式类还是样式属性，:class和:style表达式内一定是一个JSON对象。
- :class的JSON对象的值一定是布尔型的，true表示加上样式，false表示移除样式类。
- :style的JSON对象则像是一个样式配置项，key声明属性名，value则是样式属性的具体值。
过滤器
安装一个很出名的时间格式化专用的包——moment.js
npm i moment -S
Vue中用“过滤器”进行模板格式化，实质上是一个只带单一输入参数的函数，在Vue2中已经将原有的内置过滤器移除。在Vue组件中加入自定义过滤器非常简单，只要在filters属性内加入方法定义就可以在模块上使用了。
引入moment
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
加入过滤器
export default {
filters: {
date(val) {
return moment(val).calendar()
}
}
}
模板上应用
<time>{{todo.created | date}}</time>
在所有过滤器中是没有this引用的，一个undefined值。
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
