vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、与原生JS的区别我们可以通过一个小案例来演示
案例：把输入框中的信息实时显示在span标签中
原生JS
<body> <input type="text"> <span></span> </body> <script> document.querySelector('#txt').addEventListener('keyup', function () { document.querySelector('#con').innerHTML = this.value }) </script>
Vue
<body> <div> <input type="text" v-model="msg"> <span>{{msg}}</span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { msg: "" } }) </script>
区别：其中明显的区别就是省去了对DOM元素的操作
总结：
创建DOM元素，使其成为Vue实例的挂载点，Vue实例中的所有数据这能在挂载点中使用
<div id=app> </div>
通过new Vue来创建实例对象
el属性指定当前Vue实例的挂载点
data中是模型数据，这些数据依赖于当前Vue的实例，可以通过控制台输入app.msg来查看数据
可以通过插值表达式使用data中的数据
三、数据绑定数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中
1、内容绑定将data中的数据显示成内容
<div> <p>{{msg}}</p> </div>
若想显示html标签只要是标签中用v-html即可
<div> <p v-html>{{msg}}</p> </div>
2、属性绑定将data中的数据作为某个元素的属性值
使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:
<p v-bind:id="id" :class="class">{{msg}}</p>
3、表单标签的值可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input> <textarea v-model:'msg'><textarea>
2、复选框
<div> <lable for:'swim'><lable> <input type='checkbox' id=swim v-model='isSwim'/> <label for="read">阅读</label> <input type="checkbox" v-model="isRead"> <label for="play">游戏</label> <input type="checkbox" v-model="isPlay"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ isSwim:true, isRead:true, isPlay:false } }) </script>
单选框
<div> <label for="man">男</label> <input type="radio" value="man" v-model="gender"> <label for="women">女</label> <input type="radio" value="women" v-model="gender"> {{gender}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ gender:'' } }) </script>
下拉框
<div> <select v-model="city"> <option disabled value="">请选择</option> <option value="bj">北京</option> <option value="sh">上海</option> </select> {{city}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ city:"" } }) </script>
传递参数
<div> <button v-on:click="showInfo('hello')">按钮</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ title:"元旦" }, methods:{ showInfo:function(message){ console.log(message) } } }) </script>
四、事件处理可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id=app> <button v-on:click='greet'></button> </div>
var app = new Vue({ el:'#app', data:{ name:'holle Vue' }, //在 methods 中定义方法 methods:{ greet:function(event){ //this在方法中指向Vue实例 alert(this.name + '!') if (event) { alert(event.target.tagName) } } })
五、列表渲染我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。