1，下载一个好用的IDE
建议安装visual Studio Code，下载地址：https://code.visualstudio.com/
安装完毕之后，还需要安装两个vue的扩展包，后面会用到：
1.vetur
2.vue vscode snippets
在这里搜索这两个扩展程序，安装一下就好了。
2，快速上手Vue：做点东西出来
随便找个地方，创建一个叫做project的文件夹，文件夹里面放一个vue.js，这个是vue的核心文件，你可以网上去下载，或者直接用本教程给出的资源包。
好了以后打开VSCODE，导入这个文件夹，作为一个新项目。步骤是: File -- Open Folder
导入成功后，点这个：
创建一个新的文件，就叫做index.html
在这个html文件中，打一个感叹号，自动提示的，用第一个快速生成文件结构。
没错，一下子就这样了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
步骤1，通过script引入vue
<script src="vue.js"></script>
步骤2，创建宿主元素div
<div id="app"></div>
步骤3，用vue去控制宿主元素
简单来说就是创建一个vue实例，从此可以去控制刚才的div
<script>
new Vue({
el:'#app',
});
</script>
#app是ID选择器，这样一来，vue就和那个div建立了密不可分的联系。
步骤4，理解一下MVVM
上面是MVVM呢，就是Model（模板）+View（试图）+ModelView（模板引擎）。现在，我在div里面写一点东西，就画一个按钮吧。
<div>
<button>{{buttonLabel}}</button>
</div>
注意，buttonLabel是被 双大括号 括起来的，这代表上面这段HTML代码是一个模板。刚才我们不是引入了vue.js吗？而且还创建了一个vue实例，通过id=app 做了宿主元素的控制。
于是，vue内部会做一些事情，什么事情呢？就是会把一个叫做app的div全部解码，封装为一个js函数！听起来不可思议，但是它就是这样运作的。有人可能会问，为什么要这样做呢？如果你想要去改变按钮的文字，用document.getElementById就可以了，改一下innerHTML的事情，多简单啊。
是的，用dom操作完全可以实现，但是MVVM的思想就是让数据来驱动视图。既然我们可以把整段HTML变成一个js函数，那么自然也可以通过里面某些变量的改变，去重新渲染这个函数，得到视图的实时变化！这样的好处就是，我们可以不必去关心DOM操作，而是只关心数据就行了。
OK，继续，为了绑定buttonLabel，我们需要把这个数据在vue中定义一下。这边用代码提示，写一个vdata，用第一个快捷提醒。
代码如下：
new Vue({
el:'#app',
data() {
return {
buttonLabel: '早起'
}
},
});
页面效果：
这个操作叫做Vue的响应式数据绑定，我们来一张图：
Vue的主要作用就是MVVM中的VM。什么叫响应式呢，就是data里面的数据变了，视图层也会发生变化。如果某种情况下视图层里的数据变了，也会反作用于data，这是相互的。
3，Vue核心语法
这一节介绍Vue的核心语法。
3.1 插值语法
插值语法是最简单的，就是像上面那样，用双大括号括起来一个数据，同时让这个数据在vue里面的data中去定义就行了。在HTML元素中，如果要绑定属性，就在原有属性的左边加一个冒号即可，像这样：
<div>
<button :title="buttonLabel">{{buttonLabel}}</button>
</div>
注意，如果属性左边加上了冒号，那么双引号里面的内容就是纯粹的JS表达式了，它并不是一个静态值哦！这个就是插值语法，很简单吧。
3.2 循环语法
刚才的案里中，我们只有一个按钮，现在思考一个问题，假如我有多个按钮怎么办呢？我们能不能定义一个数组，然后数组里面有多少个元素，页面就显示多少个按钮？比如，我们在data里面设置一个变量buttons。
buttons:['早睡','早起','写日记','跑步半小时']
页面上就这么写：
<button v-for="button in buttons" :title="button">{{button}}</button>
效果：
可以看到，几个按钮被成功渲染出来了。button是每次拿出的单个元素，buttons就是定义在data中的数组。注意，当你用v-for去做数组遍历的时候，一定要加上一个key属性，代表每一个项的ID。因为现在的数组比较简单，就是一个单值，所以我们就这样写了。
<button v-for="button in buttons" :key="button" :title="button">{{button}}</button>
button只是一个别名哦，你也可以写成item，随便你。emmm，是不是有点丑，我们稍微做一下美化。美化html元素，当然就少不了css了，为了方便起见，我们直接用style就行了。
<button
style="margin: 4px; border: none; font-size: 12px; padding: 4px 10px; color: #353535; background: #dbdbdb;"
v-for="button in buttons"
:key="button"
:title="button">{{button}}
</button>
效果：
3.3 输入绑定
现在数组buttons是写死的，我们不希望它写死，希望能够让用户去手动添加按钮。于是，我们非常熟练地写了一个input框。
<input />
够简单不?
哈哈哈。
我们随便在input框里面输入一些内容，希望按一下回车，就把这些内容变成一个按钮，追加在下面。你打算怎么做呢，是不是手中 锋利的jquery 已经蠢蠢欲动？
打住，亲！
我们是vue教程，给我个面子好不啦。在vue中，我们已经不用去关心dom操作啦，只需要关心数据如何绑定就行了。简单来说，你不就是想要input框里面的内容吗？想一个名字，就叫buttonName吧，放到data里面。
new Vue({
el:'#app',
data() {
return {
buttonName: "",
buttons:['早睡','早起','写日记','跑步半小时']
}
},
});
问题来了，你写个buttonName在data里面算怎么回事？当然还差一步啊，你需要使用v-model去input里面绑定buttonName。这样一来，input只要发生值变化事件，data里面的buttonName就会跟着变。我就不演示啦，反正这个知识点网上铺天盖地都是，懒得验证了，就是这样啊喵。
上代码：
<input v-model="buttonName" />
没错，这就完了，简单不？
OK，然后我们要敲回车，得到input框里面输入的内容哦。敲回车，这是一个事件，硬件里头叫中断，软件里头叫做事件，Event。JS的事件，是on一个事件名来做的。vue里面你就直接简写吧，不要v-on了，没啥意思，一般都是@一下。上代码：
<input v-model="buttonName" @keydown.enter="add" />
@keydown是监听键盘按下事件，后面的.enter是vue的修饰符，代表按下的按键是enter键。后面双引号里面的是JS表达式，这里对应的是vue对象中的某一个方法。vue对象的方法，我们需要一个methods区域，哎，我也不会讲，直接看代码吧，相信聪明的你一看就懂！
methods: {
add(){
this.buttons.push(this.buttonName);
this.buttonName = ''; //清空输入框
}
},
只要是data里面的数据，在vue对象的内部，我们都可以使用 this. 的方法直接调用哦，亲！
用vue写页面的好处就是，很清晰，你很清楚自己定义的变量在什么位置，还有调用的方法在什么地方？看看效果吧！
vue其他的修饰符还有很多，我这边就不多做介绍了，反正以后都是用UI，正常情况下，也很少自己去写底层的一些东西。无所谓啦。
网友评论