前端学习--vue2--2--vue指令基础-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端学习--vue2--2--vue指令基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面：
前置内容
- vue配置

vue指令只的是带有v-前缀的特殊标签属性

插值表达式

插值表达式{{}}是一种vue模板语法。
利用表达式进行差值，渲染到页面。
表达式可以是被求值的代码，js会计算
不能用差值表达式的

不存在的数据
{{data里面不存在的字段
js关键字
{{if}}
标签属性
<span id=“{{id}}”/>

v-html

设置元素的innerHTML
前端学习--vue2--2--vue指令基础,前端,学习,vue.js

可以动态的进行html的渲染，虽然用的会少。

条件渲染v-show和v-if

v-show和v-if都是通过后面的表达式来判断是否显示,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

前端学习--vue2--2--vue指令基础,前端,学习,vue.js

v-if

渲染分组
可以用一个大的元素配上v-if来进行
如：

<template v-if="ok">
  <h1>Title</h1>
  <p>P1</p>
  <p>P2</p>
</template>

v-if的扩展标签

v-else-if以及v-else
这个应该很好理解那就是v-if走不通就看一下v-else-if条件是否满足，不满足在解析else

复用组件

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。

所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

注意，元素仍然会被高效地复用，因为它们没有添加 key attribute。

v-show

和if作用一样，但是show只是不显示，不会移除掉这个标签。而if是会移除掉的。
所以我们在这个组件如果会多次显示和隐藏转换我们选择show，如果判断之后不会出现我们选择if，直接就不加载了。
show底层用style的display用的是css样式
if底层是条件判断是否创建或移除
前端学习--vue2--2--vue指令基础,前端,学习,vue.js
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。

v-on /@事件

注册事件
v-on:事件名=执行事件函数，也可以直接写函数名字就可以了
这个也可以省写为@click
前端学习--vue2--2--vue指令基础,前端,学习,vue.js

点击一下

可以发现无论我按了多少下这个flag永远是1，所以这的传参是按值传参。

v-bind /：属性

动态绑定标签的属性如url,title，name等
格式：v-bind：属性名=“”
或者：属性=“”
前端学习--vue2--2--vue指令基础,前端,学习,vue.js
修饰符
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
.camel - 将 kebab-case attribute 名转换为 camelCase。
.sync 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

前端学习--vue2--2--vue指令基础,前端,学习,vue.js
但是注意在表单元素中是不能动态绑定的，用下面的mode

v-bind对样式控制做了增强
:class=“{类名1：布尔，类名2：布尔}”，布尔为true才会添加（对象）
:class="[类名1，类名2]"数组类型都会添加

对样式的加强
:style=“{css属性:css属性,css样式2:css属性值}”（对象）因为属性名不支持-所以我们可以选择用’‘引号括起来样式，或者用驼峰。如background-color可以写成’background-color’ 或者 backgroundColor

v-model

用于表单的双向绑定，双向指的是视图和数据之间的双向，一方改了另一方也会改。
修饰符
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

v-for 循环元素

多次渲染
语法v-for=“(item,index) in 数组”
item是数组的每一项，index是对应的索引。

如果不需要index的时候可以不写直接v-for=“item in 数组”

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

为了确保它们在每个索引位置正确渲染v-for我们一般都需要指定一个key来作为唯一值来绑定。除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
就是如果是3个元素，删除第一个，没有加key就是只留下前2个然后把值赋给前2，如果加key就是只删除指定那个

<div v-for="item in items" :key="item"></div>

数组更新渲染，只有在原始数组改变的方法才会进行同步像

push 加入元素到最后
pop 删除最后一个
shift 删除元素第一个
unshift 添加到第一个
splice 删除/替换
sort 排序
reverse 反转
像filter/concat/slice不改变原始数组而是产生了新数组就不会同步。

v-slot

插槽
用于组件内部的结构支持自定义
插槽的详解

v-pre

不进行vue渲染，加快效率

v-cloak

解决网速慢的时候，vue还没渲染出来，文字就出来了，如出来了一堆{{name}}什么的
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

v-once

只渲染元素和组件一次。然后就不在改变，不在进行双向绑定

key

在v-for的时候介绍了一下
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，就是在渲染更换的时候进行识别，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
而不使用的时候，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

ref

就是相当于vue元素的id，可以在script中用$refs获取元素。
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。