VUE基础1.常用指令

注意，本系列帖子主要是本人的学习记录，由于有一点点的前端经验，也看过官网的教程，而这次呢，是在基础之上记录下核心知识点，然后就准备入手去做项目了。 所以从0开始的同学不必参考该教程，可以去网上找找从0开始的或者先去官网看看再来看这些。

1、v-once

只渲染元素和组件一次

2、v-text

文本内容，与{{}}差不多，不过在便签里面使用v-text会覆盖掉标签中的内容

3、v-html

与名字一样，就是用来放html元素的，与{{}}不一致的是，{{}}里面会将html元素给解析成文本，而不是html

4、v-cloak

image.png

5、v-bind

5.1 class

动态的绑定属性

如图中，如果我们这么写 src="{{imgUrl}}"或者src=“imgUrl” 到浏览器是仅仅当字符串解析的，这个时候我们就需要使用v-bind来绑定给属性赋值。

语法糖：也可以使用简写的方式 :src="" :alt=""

绑定样式或者类的写法：

• 1. :class=""
     这种写法，双引号中就是作为一个变量去找寻js中赋的值，而不是作为字符串去解析。

• 2. 以对象的形式传参
     :class="{class1:true,class2:false}" 以键值对的形式传参，示例中意思就是class1的样式展示，class2的样式不展示。 还可以通过变量的形式动态的控制样式的展示与否。如下图所示：

     
     
     
• 3.以数组的形式传参
  :class="[calss1,class2]" 或者直接放一个赋值了数组的变量也可以。

当然如果你还想自己去写样式就还像老样子写 class="red"这种就行，vue的写法不会覆盖。

5.2 style

与class不同的是style，需要按照规范来写样式的名称，但是我们可以指定值，当然也可以返回一个样式对象来控制样式。

6、v-on

6.1 基本使用

v-on是一种主动操作的属性，例如点击或者悬浮之类的。

详细的api可以查看官方的文档。

v-on:click 也有一个简写：@click,也就是v-on：操作可以简写为@操作=“”；这种形式。

6.2 参数传递

在没有参数的情况下，带有括号和没有带有括号，传递过来的参数是不一样的，带有括号过来的参数树undefined，没有带就默认传递了事件过来。

带有参数的实例：

其中使用arguments这个变量其实就是代表接收到的所有的参数。
需要注意的是传递的参数如果是具体的值那么没有问题，如果是一个变量的话，他会首先去js的数据中找变量的值。

如果需要传入事件对象可以使用 $event，这个对象无论放在哪里，方法都是可以接收到，但是我们一般都放在最后面，比较符合规范和约定吧。

6.3 事件修饰符

事件修饰符，一般分为两种，阻止冒泡事件和阻止默认事件。

阻止冒泡就类似于图中示例，点击button，仅执行了btnClick方法，而没有执行boxClick方法；

阻止默认事件就类似于图中的a标签，本身a标签就是放一个链接，点击就进行跳转，这是一个默认的事件，我们使用了方法之后这个a标签本身默认的事件就不会执行。

下面是点击仅触发一次的方法：

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

还有键盘按键修饰符：

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

详细的我们可以参考官网。

7.计算属性computed

{{}}也可以直接调用方法，不过需要加括号。

计算属性与函数最直接的区别就在于一个是属性，一个是函数的写法。

7.1 深入使用

对于一个计算属性，我们大部分时候都是默认只读的，也就是只调用他的get方法。

写一个计算属性的话，vue其实获取的是计算属性中的get方法。

而修改这个计算属性的时候才会去调用set方法。