Vue的基础认知一---构建环境/v指令的使用
大家新年好啊，不对，今天是情人节呢，哈哈哈，祝大家节日快乐，你们是不是都出去约约约了啊，好吧，你们都去玩吧，我在家码代码，汗~讲真，这大过年的实在是不愿意学习啊，可是眼看着好久没写博文了，心里有点过意不去了，赶快看了两眼代码，过来更新一篇，呼呼~那我开始码代码了啊，闪开闪开，哈哈哈~~~
OK，从今天开始我们大家一起来看看Vue的使用，然后就是呢，我们今天就先来稍微认识一下，打个照面，看看这货到底是何方神圣搞得我们程序猿们如此难过……
一、vue.js是什么？
这一点vue官方有给出的解释：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
讲真我也没有搞太明白，但是其实我觉得吧，其实它最大的功能肯定还是精简代码，然后就是给我们省力气的，只不过学习它还是得花费很大的劲，哈哈。
二、基础认知
构建vue操作环境
使用vue.js有很多种方法，我们今天不先去构建vue环境，我们就先用script引入来认识一下vue的基础知识。
就像官方文档说的，vue只关注视图层，那既然这样的话，我们就应该要知道我们需要给vue定义一个操作的空间，需要注意的是这个空间有且仅能有一个哦。好了，说了好多有的没的了，开始上代码说明一下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetitle>
head>
<body>
<div id="app">div>
body>
<script src="../vue.js">script>
<script>
//构造vue实例，对上面定义的空间进行操作
new Vue({
el:"#app",//绑定操作的DOM节点
})
script>
html>有了上述操作，我们就为vue的操作搭好了基础，接下来我们就一起来看一些简单的基础操作吧。
vue的基础操作
对DOM节点的渲染
对DOM节点的基础渲染有两种方法，一种是{{}}，一种是v指令的方法。
（1）{{}}渲染
<div id="app">
<div>
{{message1}}
<br/>
{{message2}}
div>
div>
new Vue({
el:"#app",
data:function(){
return {
message1:"测试数据",
message2:"<h1>测试数据h1>",
}
}
})这样写，html页面运行出来就会显示测试数据的字样：
就这样，我们在vue实例中定义的message就在vue的操作空间中展示了出来。但是细心的小伙伴一定也注意到了，我们写的h1标签肯定目的不是让它直接显示在视图当中的啊，这也不符合常理啊，对不对，好吧，接下来，我们就来说第二种渲染方式，来解读标签要怎么解析完之后再进行展示。
（2）v指令渲染
在以上代码的基础上，我们再加入一个div，来展示h1标签的代码，这里用到的是v-html的指令
<div v-html="message2">div>
Duang，h1标签解析出来了哦。
但是这还不算晚，我们都知道带有html字样的指令肯定是会解析h5标签的，但是我们也都知道有html就会有text呀，所以这里我们也会有一个v-text指令，也是不会解析标签的，效果跟{{}}是一样的：
<div v-text="message2">div>
常用的v指令
好了，既然提到了v指令，我们就索性多说几个常用的v指令好了。
（1）v-if/v-else和v-show条件语句
①v-if/v-else
<div id="app">
if="num==1">num等于1
if="num==2">num等于2
else>num等于其他值
div>
new vue({
el:"app",
data:function(){
return {
num:2,
}
}
})以上代码执行完后，显示在页面的就是：num等于2，这是毋庸置疑的。
②v-show
<div id="app">
<p v-show="is_show">v-show指令1</p>
<p v-show="!is_show">v-show指令2</p>
</div>
new vue({
el:"app",
data:function(){
return {
is_show:true,
}
}
})同样的，毋庸置疑的，这里视图上展示的将是v-show指令1：
这就是条件语句的基础使用，当然了三元运算符等等也同样适用。
③v-if和v-show的不同：
就像我们以上看到的，我们想要的结果这两者都可以实现，那我们为什么要学习这两种呢，这就要从性能的角度来看了。
我们在运用的过程中，需要哪个就用哪个就好了。
（3）v-for循环语句
循环我们有对数组的循环和对对象的循环。
①数组循环
<div id="app">
<li v-for="v in arr">姓名是：{{v.name}},年龄是：{{v.age}}li>
<li v-for="(v,k) in arr">姓名是：{{v.name}}，年龄是：{{v.age}}，索引是：{{k}}li>
div>
new Vue({
el:"#app",
data:function(){
return {
arr:[{name:"张三",age:19},{name:"李四",age:20},{name:"王五",age:21}],
}
}
})
数组的循环除了有for-in还有for-of的循环：
<li v-for="(v,k) of arr">姓名是：{{v.name}}，年龄是：{{v.age}}li>
②对象的循环
<div id="app">
<li v-for="(v,k) in obj">键名是：{{k}}，键值是：{{v}}li>
<li v-for="(v,k,index) in obj">键名是：{{k}}，键值是：{{v}}，索引是：{{index}}li>
div>
new Vue({
el:"#app",
data:function(){
return {
obj:{name:"哈哈",age:18,height:"178cm"},
}
}
})
（4）v-on事件绑定
同样的，类似js的，vue也会有事件，那事件的绑定就是通过v-on来实现的，可简写为@。
如下例，两个div，一个红色一个蓝色，点击切换展示状态。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
style>
head>
<body>
<div id="app">
<button @click="change">点击切换divbutton>
<div class="div1" v-show="show">div>
<div class="div2" v-show="!show">div>
div>
body>
<script src="../vue.js">script>
<script>
new Vue({
el:"#app",
data:function(){
return {
show:true,
}
},
methods:{
change:function(){
this.show = !this.show;
}
}
})
script>
html>效果图在此我就不展示了，想要看效果的小伙伴，可以自行粘贴代码去试一下，见谅哦。
然后需要注意的就是事件的绑定有几个修饰符。
prevent：用于阻止默认事件
stop：阻止冒泡
once：事件只触发一次
用法：@click.prevent="事件函数名"（5）v-bind属性绑定
有事件的绑定，相应的就会有属性的绑定，例如class的绑定呀等等。
v-bind可简写为：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<style>
.active1{
width: 100px;
height: 100px;
background-color: red;
}
.active2{
width: 100px;
height: 100px;
background-color: blue;
}
style>
head>
<body>
<div id="app">
<button @click="judge=!judge">点击切换button>
<div :class="show?'active1':'active2'">div>
div>
body>
<script src="../vue.js">script>
<script>
new Vue({
el:"#app",
data:function(){
return {
show:true,
}
},
})
script>
html>除了加类名以外，也可以通过v-bind添加样式属性，又叫动态属性。
:style="{width:'100px',height:'100px',background:'yellow'}">OK，这篇的基础认知就说到这里，一会我们继续来说其他的基础知识。