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 则是被迭代的数组元素的别名。