大家好，我是渣哥，是一个每天都在攒钱植发的程序员。
上周渣哥跟大家聊了下Vue的全家桶，我们知道了Vue全家桶里最基础的部分就是Vue.js了，那么万丈大厦平地起，我们要学习Vue全套知识，首先肯定要从Vue.js去学，那么我们今天就来学习Vue.js的基础部分。
本文目标：
●安装前端编程工具：Hbuilder X
●学习基础语法之插值表达式、条件判断、循环、事件绑定等语法
●使用本次学习到的知识，做一个小Demo
工具安装
工欲善其事，必先利其器！我们开始学习之前呢，肯定是要先安装一些工具，可以让我们快速的上手Vue的学习；因为Vue是一个前端框架，学习Vue我们写的也基本都是前端代码，那么工具的话，我们就选择前端开发比较常用的一个HBuilder X 来作为我们前端的开发工具吧！下载链接已经放在下面啦，需要的话请自取：https://www.dcloud.io/hbuilderx.html
工具下载安装好了之后，我们就可以开始Vue的学习了，我们先看看如何创建我们的第一个Vue的程序吧，惯例，咱们先跟世界问个好。
首先在右侧的项目文件管理区，创建一个html文件，渣哥这边把它命名为01-HelloVue，然后加入Vue.js的JavaScript引入：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>现在，我们就已经在这个页面中使用到Vue.js。
不费吧！这么简单？
对，就是这么简单，不信你用下面的这段代码，替换你刚刚创建的页面文件的body标签：
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello,Vue'
}
})
</script>然后点击顶部工具栏的运行--> 运行到浏览器-->然后选择一个浏览器（(Ps:灰色小字)渣哥建议：最好还是用Chrome浏览器，没有的话就去装一个）
然后你会看到如下的一个界面：
纳尼？源码的h1标签里好像不是Hello,Vue呀，那这是哪里来的？
原来呀，玄机就在下面的script代码段中，首先第一句，我们创建了一个Vue的实例对象，在Vue中，这个是核心 ，我们后面再讨论。在创建Vue实例对象的时候，我们需要传进去一个对象，这个对象是有一些属性名称的，比如在这个例子中，我们创建的Vue实例对象有两个属性，一个是el，这个很好理解，就是element的缩写，表示我们要把这个Vue对象绑定给页面的哪个元素，在这个例子中，我们把我们创建的这个Vue实例对象绑定给了Id为app的这个div元素；
然后是data，顾名思义，就是Vue实例对象的数据了，因为Vue是一个MVVM的结构，所以我们知道它的数据和视图是可以通过Vue的实例对象来动态绑定的，那么如何把数据绑定到视图层呢？我们来看看Vue的第一个语法：插值表达式。
插值表达式
{{ }}
我们看到在第一个例子中，Vue实例对象的Data属性里有一个名为message的字段，它的值为Hello,Vue，然后在页面里有一个{{message}}，这样就是插值表达式最基础的一个用法，将data的数据绑定到页面中。
插值表达式里面写的是data里面的属性名，在页面渲染的时候，Vue会将该属性名的值渲染到页面的对应位置，是不是很简单呢？
另外我们在用一个小例子来体验一下Vue的双向数据绑定吧，在页面按下F12，打开我们的页面调试器，在控制台输入如下代码，并回车，看看页面发生了什么变化吧。
vm.message = '你好，世界！'
你看，我们修改了Vue实例对象的message，页面上显示的文字也被动态修改了，这就是Vue的动态数据绑定，当检测到某项数据有变化时，Vue会实时的将页面应用到该数据显示的内容也同步更新，是不是特别简单省事，再也不用我们自己去手动操作Dom了。
我们接着去看看Vue的其他基础语法。
基础指令
关于指令，官方给出的解释是：
指令 (Directives) 是带有
v-前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM.
讲的通俗点就是，指令可以根据表达式的结果，操作元素做出响应的改变，那我们来试一下吧？
条件判断：
v-if与v-else
任何一个程序都可能会有条件判断，告诉程序，如果条件成立将怎么做，条件不成立将怎么做，那么Vue当然也不例外，但是Vue的条件判断会更加的简单直观，我们来创建第二个html页面，取名为02-if.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isRich">
{{msg}}
</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isRich: true,
msg: '有钱'
}
})
</script>
</html>在这个例子中，我们首先在Vue实例对象的数据中，定义了两个属性，一个是isRich，它的默认值是true，然后还有一个msg，作为消息提示，它的值是一个字符串：'有钱'，
然后我们在vue绑定的div标签内部创建了一个h1标签，这个标签跟上面的例子不一样，看，他有一个v-if指令，他这个指令指向了isRich，但是没有加{{}}，这里需要注意，在标签内部调用Data内的数据时是不需要加{{}}的，然后里面就是一个我们上面学过的插值表达式，它把msg的数据绑定到这里来。那我们把页面运行以下，看看页面会显示什么。
页面的内容被正常显示，可能是因为isRich的值是true的原因，那么，我们再打开调试器，修改isRich的值为false试一下。
哦偶，没有了，通过这个例子，我们可以知道，v-if的作用就是，当表达式的结果为true时显示，当表达式的结果为false时不显示。那么有if就肯定有else，我们试着在下面再添加一个h1标签，这个里面我们写个v-else指令：注意，v-else指令表示如果上一个v-if指令的条件不满足时执行v-else，所以我们v-else里面不需要写东西。
<h1 v-else>
没钱
</h1>运行，然后去控制台修改isRich，我们会发现，当isRich的值为true时，显示的是“有钱”，当isRich的值为false时，显示的是没有钱。
通过这个小例子，我们知道，当v-if单独使用的时候，条件满足就显示，条件不满足就不显示，当跟v-else连用的时候，满足显示v-if所在的标签，不满足显示v-else所在的标签。
我们再看下一个指令：v-show
v-show
我们把上面的例子中的代码全部复制一份，然后创建03-show.html，粘贴进去，把页面内的v-if指令，更换为v-show指令，删除掉v-else所在的h1标签，并运行，也是能正常显示“有钱”，然后我们打开调试器，修改isRich的值为false，“有钱”也消失了，好像跟v-if标签没啥区别嘛，别急我们去打开调试器，刷新一下页面，查看元素，
我们看到，在一开始的时候，isRich为true，界面是显示“有钱”，然后我们修改isRich为false，页面不显示了，我们去看一下元素，哦原来是被隐藏了：
那我们把页面的v-show换成v-if，用同样的流程再去试一下，我们发现，当用v-if的时候，h1标签整个不见了。
那么我们可以总结一下v-if跟v-show的区别：
v-if是如果条件为真，则渲染所在的标签，为假则不渲染
v-show是如果条件为真，则渲染，为假则加上一个display：none把所在的标签不可见
另外还有一个需要注意的点，v-show是不支持搭配v-else一起使用的。
从性能的角度去看：如果需要非常频繁的切换，用v-show，如果不需要频繁切换，就用v-if；
循环：
除了条件判断，循环也是必不可少的，Vue中使用v-for指令来进行数组的循环
v-for
我们继续用一个例子来体会v-for如何实现数组循环，继续在我们的目录中创建04-for.html，
写上下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
todos: [{
text: '好好'
}, {
text: '学习'
}, {
text: '天天'
}, {
text: '向上'
}]
}
})
</script>
</html>在上面的代码中，我们在data里面写了一个数组对象todos，todos里面有四个对象，每一个对象都有一个text属性，我们要把这个数组在页面中遍历出来，我们就要用到v-for，v-for使用的是特殊形式的语法item in items，在这个例子中应该你也能猜出来它的含义，items代表的是一个数组，而item代表的是每一次被循环迭代的元素的别名，那么我们可以理解这个语句的含义就是从items中取出一个元素，然后把它赋值给一个名为item的变量；然后在标签体里面就可以获取item的属性，然后对它做一些操作，比如在本例中，就是把他的text属性打印了出来；
截至到现在都是显示的东西，那么我要怎么样让我的页面跟用户有交互呢？这就要用到Vue的事件绑定指令：v-on了。
事件绑定
我们知道，在原生的前端代码中很重要的一个事情就是事件处理，之前用JavaScript写事件处理的过程真的是很折磨人的精神，又要获取元素对象，又要绑定事件，写一大堆代码，在Vue中，事件绑定特别特别的简单，一起来看看吧！
v-on
还是老规矩，创建文件：05-on.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
兜里的钱: {{num}}元
<button type="button" v-on:click="num+=5"> 中彩票，+5块钱</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num: 0
}
})
</script>
</html>在这个代码中，我们使用v-on为按钮绑定了一个点击事件（click），点击之后干嘛呢？点击之后就会调用后面的表达式，把num的值+=5，这样就可以为兜里的钱加上5块了。哈哈，如果真的有这么一个按钮的话，我一定要昼夜不停的点。开个玩笑，咱们说回这个v-on，通过这个例子，我们知道了v-on的用法，它需要绑定一个事件，然后指定这个事件发生之后如何处理。在这个例子中，num+=5是直接写在后面的，不过开发中更常使用的方法是指定一个方法，当事件发生时，就会去调用这个方法，那我们把上面的例子改写一下吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
兜里的钱: {{num}}元
<button type="button" v-on:click="addMoney"> 中彩票，+5块钱</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
addMoney() {
this.num += 5;
}
}
})
</script>
</html>这里我们改写了一下，让绑定的点击事件指向了一个方法，vue的方法需要在Vue实例对象的methods属性中定义，我们在这里定义了一个加钱的方法，按钮每一次点击，都会调用这个加钱方法，来加上5块钱。
产品经理需求表Demo
最后我们用一个小例子来将今天的内容全部串联一遍吧，都知道咱们程序员最烦的就是产品经理提各种各样的需求， 又不给加钱，如果给加钱的话，一切好商量嘛，对吧，那么我们就来做一个产品经理需求表吧， 首先呢，这个产品经理需求表中有一些需求，我们要把它遍历出来，然后呢，有一个出价，默认为0，如果它出价不满足我们的预期，我们就不给他做事，如果钱出够了，我们再开始干活，对吧，那么我们开始写啦：
首先创建06-demo.html，然后引入Vue.js；
第二步，我们需要再body标签内，创建一个id为app的div标签，然后body标签之后写上我们的script代码块，在这里写我们的vue实例对象：
el就不必说了，我们想一下data里面怎么写，首先要有一个需求的数组，我们就叫他todos，然后在里面定义三个需求吧：五彩斑斓的黑、根据心情变色、马上上线。
然后我们还需要一个字段用来显示产品经理出了多少钱，就叫money吧，默认为0；
最后是一个我们的心理价位，如果到了这个数，我们就给他做事，如果出价不够，就不做。
界面上呢，首先要有一个列表展示，把产品经历的需求显示出来，然后显示目前出价，如果价格低于预期，就显示一行提示：钱不够，没办法干活！
然后下面有两个按钮，一个是加钱，点击一下，钱加100，一个是完成需求，点击一下，执行判断，如果钱够了，就干活，清空需求列表，如果钱不够，就提示：你这点钱，我很难给你办事呀！
如果需求列表被清空了，在原来的需求列表的位置提示：活肝完啦！
好了，看到这里的小伙伴在这暂停一下，先去用今天所学到的知识完成这个小Demo，然后再继续往下看。
·
·
·
·
·
·
·
·
·
·
·
·
·
好了，看到这里，我想你应该已经完成了吧！
那渣哥就把代码贴在这里，一起做个参考吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品经理需求表</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>产品经理需求表</h1>
<ol v-if="todos.length">
<li v-for="todo in todos">{{todo}}</li>
</ol>
<h2 v-else >活肝完啦！</h2>
<div>目前出价：{{money}}</div>
<div v-if="money<maxMonney" style="color: red;">钱不够，没办法干活！</div>
<button type="button" v-on:click="addMoney">加钱!</button>
<button type="button" v-on:click="goRun">完成需求</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
money: 0,
maxMonney: 1000,
todos: ['五彩斑斓的黑', '根据心情变色', '马上上线'],
},
methods: {
addMoney() {
this.money += 100;
},
goRun() {
if (this.money < this.maxMonney) {
alert("你这点钱，我很难给你办事呀~")
} else {
alert("得嘞！这就为您干活！")
this.todos = []
}
}
}
})
</script>
</html>这个例子很简单，相信你自己也能做的出来。
好啦，本节的语法基础就到这里了，我是渣哥，我们下期再见！
发表评论