Vue（四）：Vue的基础操作

这篇文章盘点了Vue的所有基础操作，如果有人找到了不在文章中的基础操作，这就说明它对我来说已经不是基础了。

1、v-if、v-else-if、v-else、v-show
　　这四个属性中，只有v-else后面没有跟上=""，且v-else前面必须跟着v-if或者v-else-if，v-else-if前面必须跟着v-if。
v-show和前面仨货的区别就是v-show是隐藏了自己，就是display的操作，前面仨货如果判断元素不存在，是真的没有渲染元素，也就是说在html代码里是找不到的

<span v-if="bool1"></span> //bool1都是data中定义的布尔值
<span v-else-if="!bool1"></span>  //也可以在引号中写上一些简单的判断
<span v-else></span>
<span v-show="bool1"></span>

2、v-bind、v-on和v-model
　　v-bind绑定属性，可简写为" : ";v-on绑定事件，可简写为" @ ";v-model一般都是绑定表单内元素，实现双向绑定。具体使用方法会在下文有体现。
如果v-model绑定的是输入框的话，还可以写成v-model.number，这样输入框内就只能输入数字了。
3、v-html、key

<span v-html="htmlStr">123</span>  //htmlStr的值会完全代替原有span标签中的"123"
data:{htmlStr:'<span style="color:red;">this is red text</span>'}

　　下面说一下key，这个就不贴代码，具体的大家可以去官网看，这里主要说一下自己的看法。官网中说如果两个模板中用了相同的元素，vue不会重新渲染该元素，除非用key标明。这样就会导致你在第一个模板中输入的数值在切换之后还会继续存在，造成数据混乱。但是，一般输入的元素都会通过v-model双向绑定，如果该元素绑定的不是同一个属性的话，即使vue不重新渲染，该元素的值也会发生改变，反而节省了系统的资源。希望大家不要滥用key，嗯，主要是提醒自己。

4、样式的绑定
　　可能是前端做的比较少吧，我觉得这个东西用处不大，反而是觉得通过它可以举一反三，试试事件的绑定，属性值的绑定，要抱着一颗啥玩意都能绑的心态撸代码。搞一个长一点的示例代码吧，不写那么多注释了，一是比较懒，二是觉得不会再看了。嗯，主要是懒。。。

<template>
  <div>
    <div :class="{class1:isClass1,class2:isClass2}">你好</div>
    <div :class="classObject">你好</div>
    <div :class="[className1,className2]">你好</div>
    <div :class="[isClass1?className1:'']">你好</div>
    <div :class="[{'class1':isClass1},className2]">你好</div>
    <todo-item :class="[isClass1?className1:'']"></todo-item>
    <div :style="styleObject">你好</div>
  </div>
</template>

<script>
import Vue from "vue";   //引入vue
Vue.component('todo-item',{template:'<div>你好</div>'})  //声明一个全局的组件
export default {
  data(){
    return{
      isClass1:true,
      isClass2:true,
      classObject:{
          class1:true,
          class2:false
      },
      className1:"class1",
      className2:"class2",
      styleObject:{
          background:'pink',
      },
    }
  }
}
</script>

<style>
.class1{
    background: red;
}
.class2{
    background: pink;
}
</style>

5、v-for
　　"{{}}" 两个大括号中间可以填属性值，在某些版本之后，使用v-for，必须绑定对应的key，要不然会报错的

<ol> <!-- 循环数组，item为数组内对象，index为下标 -->
    <li v-for="(item,index) in arr1" :key="item.id">{{item.id}}--{{item.name}}--{{index}}</li> 
</ol>
<ol> <!-- 循环对象，value为属性值，name为属性名，index为下标 -->
    <li v-for="(value,name,index) in obj1" :key="value">{{name}}--{{value}}--{{index}}</li>
</ol>
<ol> <!-- 循环数字，item为数组内对象，index为下标 -->
    <li v-for="num in num1" :key="num">{{num}}</li>
</ol>
//下面是对应的属性
arr1:[{id:0,name:"张三"},{id:0,name:"李四"},{id:0,name:"王二麻子"}],
obj1:{name:"张三",age:"18"},
num1:3

下图为显示的效果

就到这里结束吧，要不然太长了就没人看了，毕竟写的不仅长，还臭。是不是觉得基础缺了组件、事件啥的，开头都说了，对我来说，不是基础了，后面会单独写。