Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
既然后台已经基本掌握了一套框架，那么前端也应该学习一些基本的框架。两者一起才能使我们以后的开发速度变得更快嘛。然后我就发现了Vue.js，对于我这种前端新手刚好。
那么废话不多说，下面就开始我们的Vue.js的学习
首先是引入vue.js的组件，你可以从官网下载下来，然后在script中引入。
<script src="vue.min.js"></script>
其次你可以直接引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
全部准备都做好了，下面开始第一个例子
首先是建立一个后缀为js文件
要使用js文件的vue.js代码那么在html中必须引入，
在里面写
new Vue({
el:"#app",
data:{
message:"hello world",
name:"tony",
website:"https://www.baidu.com"
},
methods:{
greet:function(time){
return this.message+time
}
}
});
el:element，需要获取的元素，一定是html页面中的根容器
data:只能在HTML的根容器中获取到的数据元素
methods:只能在HTML的根容器中使用的方法
接下来是HTML中的调用
<div id="app">
<p>name:{{name}}</p>
<p>方法:{{greet("成功")}}</p>
<a v-bind:href="website">网址</a>
<input type="test" v-bind:value="name">
</div>
div:也就是上面所说的根容器，无论是数据还是方法只能在这里面获取到js文件里面的数据元素和方法。
数据和方法的调用是直接使用{{data}}，{{function()}}
下面是绑定事件(按钮的单击和双击触发方式)
new Vue({
el:"#app2",
data:{
age:30
},
methods:{
add:function(even){
this.age=this.age+even
},
sub:function(even){
this.age=this.age-even
}
}
});
<div id="app2">
<p>age:{{age}}</p>
<button v-on:click="add(1)">加一岁</button>
<button v-on:click="sub(1)">减一岁</button>
<button v-on:dblclick="add(10)">减十岁</button>
<button v-on:dblclick="sub(10)">减十岁</button>
</div>
v-on:click="function()":触发按钮的单击事件，例子是通过单击一次按钮使年龄增加一岁
v-on:dblclick="function()":触发按钮的双击事件，例子是通过双击按钮使年龄增加十岁
当然除了这种方式还有一次方式可以绑定单双击事件
<button @click="sub(1)">减一岁</button>
<button @dblclick="add(10)">减十岁</button>
接下来是数据的双向绑定
new Vue({
el:"#app3",
data:{
name:"",
age:""
},
methods:{
logname:function(){
this.name=this.$refs.name.value
},
logage:function(){
this.age=this.$refs.age.value
}
}
});
<div id="app3">
<input ref="name" type="text" v-on:keyup="logname">
<input ref="age" type="text" v-on:keyup="logage">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
给Input标签一个ref属性并给予一个标识，然后在js文件那边可以拿到用户输入的值，并显示出来
v-on:keyup:绑定用户键盘按键
除了该方法还有可以使用
<input type="text" v-model="name">
<input type="text" v-model="age">
v-model:为双向绑定
