Vue的基础认知一---构建环境/v指令的使用

大家新年好啊，不对，今天是情人节呢，哈哈哈，祝大家节日快乐，你们是不是都出去约约约了啊，好吧，你们都去玩吧，我在家码代码，汗~讲真，这大过年的实在是不愿意学习啊，可是眼看着好久没写博文了，心里有点过意不去了，赶快看了两眼代码，过来更新一篇，呼呼~那我开始码代码了啊，闪开闪开，哈哈哈~~~
OK，从今天开始我们大家一起来看看Vue的使用，然后就是呢，我们今天就先来稍微认识一下，打个照面，看看这货到底是何方神圣搞得我们程序猿们如此难过……

一、vue.js是什么？

这一点vue官方有给出的解释：Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
讲真我也没有搞太明白，但是其实我觉得吧，其实它最大的功能肯定还是精简代码，然后就是给我们省力气的，只不过学习它还是得花费很大的劲，哈哈。

二、基础认知

构建vue操作环境

使用vue.js有很多种方法，我们今天不先去构建vue环境，我们就先用script引入来认识一下vue的基础知识。
就像官方文档说的，vue只关注视图层，那既然这样的话，我们就应该要知道我们需要给vue定义一个操作的空间，需要注意的是这个空间有且仅能有一个哦。好了，说了好多有的没的了，开始上代码说明一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue</title>
</head>
<body><!--以下id名为APP的div就是我们定义的vue唯一的操作空间，记住有且仅有一个哦--><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"><p v-if="num==1">num等于1</p><p v-if="num==2">num等于2</p><p v-else>num等于其他值</p>
</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"><!--for-in循环--><!--不带索引--><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"><!--for-in循环--><!--不带索引--><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，一个红色一个蓝色，点击切换展示状态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><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">点击切换div</button><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可简写为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>.active1{width: 100px;height: 100px;background-color: red;}.active2{width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body>
<div id="app"><!--点击按钮，就会切换div的颜色--><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添加样式属性，又叫动态属性。

<div :style="{width:'100px',height:'100px',background:'yellow'}"></div>

OK，这篇的基础认知就说到这里，一会我们继续来说其他的基础知识。