Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 简单的理解：
-
简单应用：一个轻量小巧的核心库
-
复杂应用：可以引入各种Vue插件
Vue模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，
<template>
<!--模板代码，并不是直接渲染到页面的。而是需要被vue编译成虚拟DOM，最终渲染到页面。
Vue在渲染页面时，会将虚拟转换为真实DOM，并替换掉模板代码
-->
<div id="app">
{{message}}
</div>
</template>
<script>
// 第一种：通过el挂载
const vm = new Vue({
el: '#app',
data(){ // mvvm中的model，保存数据的地方
return {
message: 'hello vue'
}
}
})
// 第二种：通过$mout()挂载
const vm = new Vue({
data(){
return {
message: 'hello vue'
}
}
})
// 这种写法相比较第一种写法会更灵活
vm.$mount('#app')
</script>
声明属性
const vm = new Vue({
data(){
return {
// 属性： 值
message: 'hello vue'
}
}
})
插值语法
<!-- 获取data中的number属性的值 -->
获取number的值：{{number}} <br>
基于number的值进行运算： {{number + 1}} <br/>
判断奇偶数： {{number % 2 === 0 ? '偶数' : '奇数'}} <br />
插值语法中也可以调用方法，反转字符串：{{title.split('').reverse().join('') }} <br />
<!--
为按钮通过v-on指令绑定了单击事件
当点击了按钮是，修改number的值
通过观察发现，number的值一旦发生变化，页面中所有引用number的地方都会发生变化
-->
<button v-on:click="number++">当前number的值：{{number}}</button>
<script>
new Vue({
data() {
return {
number: 0,
title: 'hello vue'
}
}
})
</script>
v-bind指令
动态为页面中的标签绑定属性
<div id="app">
<!--
a标签通过href属性来指定要跳转的页面的地址
vue通过v-bind指令来为标签属性动态指定属性值
-->
<a v-bind:href="url">百度一下</a>
<!--v-bind缩写形式-->
<a :href="url">百度一下</a>
</div>
<script>
new Vue({
data() {
return {
url:'https://www.baidu.com'
}
}
})
</script>
v-on指令
为标签绑定事件
<div id="app">
<!--
v-on:事件名
-->
<h1>绑定单击事件</h1>
<button v-on:click="count++">递增count: {{count}}</button>
<button @click="count--">递减count：{{count}}</button>
<h1>keypress事件</h1>
<input type="text" v-on:keydown="getInput($event)">
<h1>鼠标悬浮事件</h1>
<button v-on:mouseover="mouseOver('鼠标移入按钮')" @mouseout="mouseOver('鼠标移出按钮')">
鼠标悬浮事件
</button>
</div>
<script>
new Vue({
data() {
return {
count: 0
}
}
})
</script>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
-
prevent：阻止默认行为（常用）
-
stop：阻止事件冒泡（常用）
-
once：事件只触发一次（常用）
-
capture：使用事件的捕获模式
-
self：只有event.target是当前操作的元素才触发事件
-
passive：事件的默认行为立即执行，无需等待事件回调执行完毕，一般使滚动条立即滚动而不等待事件回调执行结束后才滚动。
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 阻止单击事件冒泡 -->
<div @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 点击事件将只会触发一次 -->
<buton v-on:click.once="showInfo">点我提示信息</buton>
<!-- 修饰符可以连续写 -->
<div @click="showInfo">
点我提示信息
<a v-on:click.stop.prevent="showInfo">点我提示信息</a>
</div>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 事件在触发时，默认先进行捕获阶段，再进行冒泡阶段，事件的处理默认是在冒泡阶段。
通过设置capture，使事件在捕获阶段触发
-->
<div v-on:click.capture="showMsg(1)">
div1
<div v-on:click="showMsg(2)">
div2
</div>
</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div v-on:click.self="showMsg($event)">
div1
<div v-on:click="showMsg($event)">
div2
</div>
</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
理解MVVM
MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。
M：model，代表用户数据，一个javascript对象。 V：view，视图层，可以理解为html页面，用于展示数据。
以前的写法，通过操作dom，将model数据解析到html标签，最终使浏览器渲染出页面效果。 VM：有很多实现了VM概念的框架（vue，react，angular） vm具有两个最核心的功能：
-
-
data binding，数据绑定，vm监听model中的数据，从而更新到view
-
