可以直接把Vue当做一个js库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。
比如：我们有一个需求，一个网页上一个Div标签，把json对象上的数据放到Div上去：
<script src="https://unpkg.com/vue/dist/vue.js"></script>最终的代码如下：
<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<!--第二步：引入Vue库-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--第三步:创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法-->
{{ message }}
</div>
<!--第四步：创建Vue的对象，并把数据绑定到div上-->
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
message: 'Hello Vue!' // message 自定义的数据
}
});
</script>
</body>
</html>最基本的就是通过双花括号进行设置，里面可以是数据、JS单表达式等。
<div id="app">
{{ message }}
</div>v-bind和v-model
v-bind(:)：单向绑定数据到DOM。bind的属性是标签的prop属性。
具有修饰符属性。
可以与class或style结合。
v-model：双向绑定数据和DOM。
具有修饰符属性。
特别的，v-html用于将数据显示为html，防止XSS攻击。
v-if和v-for
v-if：用来决定显示元素，效果类似于visibile。注意Vue默认用“就地复用”策略，可以通过添加key来解决。
v-show：用来决定是否显示元素，效果类似于display。
v-for：用来决定重叠元素。注意Vue默认用“就地复用”策略，可以通过添加key来解决。
v-for的优先级大于v-if。v-for的数据元素对象如下:
{
index:number,
item:{
key:object,
value:object
}
}v-on
用于绑定事件，简写为@。具有修饰符属性。
特别注意
像对象、数组的一些方法改变对象或数据后数据并不能反应到Vue上，因此Vue提供了以下一些方法：
关于对象的
Vue不能检测对象属性的添加或删除。因此Vue提供了Vue.set(object, key, value) 方法向数据对象添加响应式属性。
关于数组的
Vue不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如vm.items[indexOfItem] = newValue
可以通过Vue.set(vm.items, indexOfItem, newValue)进行设置。
当你修改数组的长度时，例如vm.items.length = newLength
可以通过vm.items.splice(newLength)设置。
一个完整的vue实例如下：
var vm = new Vue({
el: '#app',
name: 'app',
data: {
a: 1
},
watch: {
// 完整写法
a: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
computed: {
compA: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
},
methods: {
methA: function () {
this.a++
}
},
[hooks]:...
})el
提供一个在页面上已存在的 DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可是个 HTMLElement实例。在实例挂载之后元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程。否则需显式调用 vm.$mount() 手动开启编译。
data
data的类型是Object或者Function。如果是组件对象中data必须是Function类型。
watch(侦听属性)
watch含有的属性是动态计算的(计算是有缓存的。)，而data含有的属性是静态的。当watch含有的属性依赖于data含有的属性时，data含有的属性改变也会导致watch含有的属性刷新。
watch的key是需要观察的表达式(值也可以是方法名，或者包含选项的对象)，value是对应回调函数。Vue 实例将会在实例化时调用 $watch()，遍历watch对象的每一个属性。计算是有缓存的。
虽然计算属性比侦听属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过
watch选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
computed(计算属性)
computed含有的属性是动态计算的(计算是有缓存的。)，而data含有的属性是静态的。当computed含有的属性依赖于data含有的属性时，data含有的属性改变也会导致computed含有的属性刷新。
computed属性会自动混入Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例。这就很强大：在计算属性中定义的函数里面可以直接使用指向了vue实例的this，异常方便。
methods(方法属性)
methods属性会自动混入到Vue实例中。方法中的 this 自动绑定为Vue实例。可以直接通过VM实例访问这些方法，或者在指令表达式中使用。
注意，不应该使用箭头函数来定义method函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.a将是undefined。
[hooks]
生命周期的钩子函数，具体看下面的解释。
Vue实例有一个完整的生命周期，从创建、挂载、渲染\更新\渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
beforeCreate
在实例初始化之后，数据观测和事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步实例已完成以下的配置：数据观测(属性和方法的运算)和事件配置(事件回调)。然而挂载阶段还没开始，$el属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。
mounted
el被新创建的vm.$el替换并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当 mounted被调用时vm.$el也在文档内。
beforeUpdate
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之前会调用该钩子。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
实例销毁之后调用。调用后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
全局配置
silent：
// 取消 Vue 所有的日志与警告
Vue.config.silent = truedevtools：
// 务必在加载Vue之后，立即同步设置以下内容
// 配置是否允许vue-devtools检查代码。开发版本默认为true，生产版本默认为false。生产版本设为 true可以启用检查。
Vue.config.devtools = true全局API
Vue的全局API提供大量的功能，比如扩展组件Vue.extend 的用法、Vue.use加载插件、Vue.filter加载过滤器、Vue.directive自定义指令等。这里不再进行介绍，请参看这里。
组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。Vue提供了一个全局的APIVue.extend帮助我们对Vue实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的Vue实例了。 类似于继承的方式。
学习教程：https://www.aicoder.com/vue/preview/all.html
学习教程：https://github.com/malun666/vue-stepbystep
原文：https://www.cnblogs.com/vpdong/p/10708353.html