Vue是构建用户界面的渐进式框架，现在很多应用都是用SPA（单页面）应用，他是基于数据驱动的，通过更改数据源，界面就是发生变化。他是MVVN（Model、View、ViewModel）模式。
MVC是后端的开发概念，比如JAVA WEB的SpringMVC。 MVC分成模型、视图、控制器。 MVVN是前端视图层的感念，主要关注与视图层的分离，将前端视图层，分为了：Model（模型）、View（视图）、ViewModel（模型与视图绑定）。
Vue使用有多种方式，如果不是用Nodejs的话可以直接引入CDN 以下是官网提供的CDN：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>如果是Nodejs环境的话：
$ npm install vue官方地址: https://cn.vuejs.org Github: https://github.com/vuejs/vue 参考文档： https://cn.vuejs.org/v2/guide/installation.html
v-cloak指令用来解决表达式闪烁的问题，在实际的环境，我们的数据是通过网络ajax请求的，那么如果网络的慢的请求，那么页面显示{{ xxx }}这样的内容，影响用户体验。解决方式一，可以使用该v-cloak配合样式“[v-cloak]{ display: none;}”来解决。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> [v-cloak]{ display: none;} </style> </head> <body> <div id="app"> <p v-cloak>{{ message }}</p> </div> <script type="text/javascript"> window.onload = function(){ new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); } </script> </body> </html>v-text指令与{{ message }}表达式功能类似，用于显示数据。他们也有一些区别 v-text没有表达式闪烁的问题 v-text会将元素内替换调用，而表达式方式只是替换占位符内容
<div id="app"> <p v-text="message"></p> </div>Vue默认会将date数据中包含html标签的进行转移输出，如果我们需要显示数据的标签，可以使用v-html指令
<div id="app"> <p v-html="message"></p> </div>v-bind指令其实就是将标签内部属性通过指令绑定到Vue的data的数据名，那么标签被绑定的属性值，取的是数据里面的值。 使用方式 v-bind:title=” 或者 :title=”
//双引号title是当成js表达式进行执行的，我们可以在双引号中写js表达式 <input type="button" v-bind:title="title">v-on指令是标签事件绑定机制。绑定事件需要在vue的methods属性中声明方法 使用方式： v-on:click=”show” 或者 @click=”show”
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Hello</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <!--show 是方法名称--> <input type="button" value="点击" title="点击" v-on:click="show"> </div> <script type="text/javascript"> window.onload = function(){ new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods:{ show : function(){ alert("点击率"); } } }); } </script> </body> </html>.stop .prevent .capture .self .once .passive
<!-- 阻止单击事件继续传播 阻止事件冒泡--> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>