什么是 Vue.js
Vue.js 是一个用于构建数据驱动的 Web 界面的库。 从技术上讲，它专注于 MVVM 模式的各层，因此非常容易学习，并且非常容易与其他库或现有项目集成。
Vue.js 的目标是使用尽可能简单的 API 来实现响应式数据绑定和组合视图组件。
从本质上讲，Vue.js 是一个响应式数据绑定系统，可以非常简单地保持数据与 DOM 同步。 当手动操作 DOM 时，我们的代码通常是命令式的、重复的并且容易出错。 Vue.js 采用数据驱动视图的概念。 通俗地说，就是我们在普通的 HTML 模板中使用特殊的语法来将 DOM 与底层数据“绑定”。
安装
独立版
直接用<>标签下载导入，Vue就会注册为全局变量。 下面的代码，使得Vue.js可以在脚本中使用。
cript src="lib/vue.js"> cript>CDN
也可以在或者cdnjs处获取（版本更新可能会稍微落后）。
国家公共管理
当使用 Vue.js 构建大型应用程序时，建议安装 NPM，NPM 与模块捆绑器（例如 或 ）配合得很好。 Vue.js 还提供了用于开发单文件组件的配套工具。
$ npm install vue
`# 获取CSP兼容版本：
`$ npm install vue@csp
`# 获取最新开发版本(来自于GitHub):
$ npm install yyx990803/vue#dev你好世界
现在让我们编写第一个 vue.js 实例。 下面的代码：
html代码：
{{ message }}
代码：
new Vue({
el: '#demo',
data: {
message: 'Hello World!'
}
})上面代码中div中的{{ }}部分就是数据绑定，我们在后面的学习中会讲到。 vue.js 代码实例化一个 Vue 对象。 使用vue之前必须先实例化。
构造函数
每个 Vue.js 应用程序首先通过 Vue 构造函数创建一个 Vue 根实例：
var vm = new Vue({
// 选项
})Vue 实例实际上正是 MVVM 模式中描述的内容 - 因此文档中经常使用变量名称 vm。
属性和方法
每个Vue实例都会代理其数据对象中的所有属性，代码如下：
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请注意，只有这些代理属性是响应的。 如果在创建实例后向实例添加新属性，则不会触发视图更新。
除了前面的数据属性之外，Vue 实例还有一些有用的实例属性和方法。 这些属性和方法以 $ 为前缀，以将它们与代理的数据属性区分开。 例如：
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` 改变后调用
})插值法
数据绑定的最基本形式是文本插值，使用 {{}} 语法（双括号）：
Message: {{ msg }}{{ msg }} 标记将被相应数据对象的 msg 属性的值替换。 每当此属性发生更改时，它也会更新。
也可以只处理单次插值，以后的数据变化不会引起插值更新：
This will never change: {{* msg }}下面的代码：
var data={msg:'Hello Vue.js!'};
new Vue({
el: '#demo',
data: data
})
data.msg="Hello World!";原始 HTML
双大括号标签将数据解析为纯文本而不是 HTML。 为了输出真正的 HTML 字符串，您需要使用大括号标签：
{{{ msg }}}下面的代码：
var data={msg:'Hello Vue.js!
'};
new Vue({
el: '#demo',
data: data
})HTML 特性
双大括号标签也可以用在 HTML 属性 ( ) 内：
代码如下所示：
var data={id:'demo'};
new Vue({
el: 'div',
data: data
})我们检查一下HTML源代码，看看id是否已经变成我们设置的id了。
表达
Vue.js 支持数据绑定中的全功能表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}筛选
Vue.js 允许在表达式后添加可选的“()”，由“管道符 (|)”表示。 过滤器本质上是一个函数，它接受一个值，处理它，然后返回它。
{{ message | uppercase }}这里我们将表达式的值“管道”到内置过滤器，这实际上只是一个返回大写值的函数。 Vue.js 提供了几个内置的过滤器，稍后我们将讨论如何开发自己的过滤器。
多个过滤器可以链接起来：
{{ message | filterA | filterB }}html代码：
'demo'>
{{msg | lowercase | capitalize}}
代码：
var data={msg:'heLLO!'};
new Vue({
el: '#demo',
data: data
})运行结果为： 你好
操作说明
Vue.js 指令 () 是以 v- 为前缀的特殊功能。 本质是模板中出现的特殊标记，让处理模板的库知道需要对这里的DOM元素进行一些相应的处理。 指令的职责是当其表达式的值发生变化时向 DOM 应用一些特殊行为。
Hello!
这里 v-if 指令将根据表达式 msg 的 true 或 false 值删除/插入 <p> 元素。
Vue.js中为我们提供了一些指令：v-text、v-html、v-model、v-on、v-else等，同学们可以查看Vue.js的指令api(/api/#指令) 。
代码：
var data={msg:0};
new Vue({
el: '#demo',
data: data
})计算属性
表达式在模板中非常方便，但它们实际上只用于简单的操作。 模板用于描述视图的结构。 在模板中放入过多的逻辑可能会使它们变得笨重且难以维护。 这就是为什么 Vue.js 将绑定表达式限制为一个表达式。 如果需要多个表达式的逻辑，则应使用计算属性。
在 Vue.js 中，您可以通过选项定义计算属性：
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})运行结果为：a=1，b=2。
更多Class和Style绑定、渲染指令、表单控件绑定、自定义指令和过滤器、方法和事件处理程序、组件等内容请参考：
