注意，本系列帖子主要是本人的学习记录，由于有一点点的前端经验，也看过官网的教程，而这次呢，是在基础之上记录下核心知识点，然后就准备入手去做项目了。 所以从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=""
绑定样式或者类的写法：
- :class=""
这种写法，双引号中就是作为一个变量去找寻js中赋的值，而不是作为字符串去解析。
- :class=""
-
以对象的形式传参
: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方法。
网友评论