🦖我是Sam9029，一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
**🐱🐉🐱🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**
本来说，为了这个Vue系列同时写一个，可运行的vue代码项目模板的，最近隔一周有怠惰了，上次001都是周一周二的事，今天都周日了
欸！
目前看来vue代码项目模板 要往后放一放了，系列才写到002
在vue框架中，提供了许多的基础指令，其作用类似与在原生的html元素的身上，写属性值或者绑定事件，同时也做了扩展
以下是一些常用指令：
作用类似与 css 属性 display 控制隐现 ；
作用是 控制元素节点的渲染与否；
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
一定配合 v-if 使用
一定配合 v-if 使用
循环渲染元素节点
事件绑定 ；可缩写为 @
<div v-on:click='handleClick'>div> <div @click='handleClick'>div>
- 1
- 2
（数据）变量绑定 ；可缩写为 :
<img v-bind:src='url'>img> //在data中定义url <img :src='url'>img>
- 1
- 2
注意：一般实在 表单元素（input、select、、、）身上 实现双向数据响应
<input v-model='inputVal'>input> // data 中定义的 inputVal 将会实时的获得 页面 input 元素中输入的值
- 1
- 2
关于v-model 的用法是需要特别注意的，不同的表单元素绑定时，其变量类型是不一样的，详情参阅文档：表单输入绑定-基础用法
不常用
v-slot (写组件的时候会常常用到)
更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。<span v-text="msg">span> <span>{{msg}}span>
- 1
- 2
- 3
更新元素的
innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。
(感觉可用于优化) 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。说的太官方了：大概使用场景就是解决页面初始渲染时 的元素闪动
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
很好理解，编程语言的思维来处理HTML标签
条件：比如在符合条件的情况下才渲染某一个节点
循环：比如需要的创建多个重复的html标签元素，只是标签中的内容节点展示的值不一样时，就可以使用循环
实现上诉效果的指令如下：
<h1 v-if="awesome">Vue is awesome!h1> // data中定义awesome
<h1 v-else>Oh no 😢h1>
// awesome 为 真值 truthy 时渲染 <h1>Vue is awesome!h1>
// awesome 为 假值 false 时渲染 <h1 v-else>Oh no 😢h1>
key 管理可复用的元素-建议直接看文档Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：
<template v-if="loginType === 'username'">
<label>Usernamelabel>
<input placeholder="Enter your username" key="username-input">
template>
<template v-else>
<label>Emaillabel>
<input placeholder="Enter your email address" key="email-input">
template>
比如，我们需要很多个 li 元素时
<ul id="example-1">
<li v-for="item in 10" :key="item.message"> // 将渲染10个 li元素
{{ item.message }}
li>
ul>
建议尽可能在使用
v-for时提供keyattribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。不要使用对象或数组之类的非基本类型值作为
v-for的key。请用字符串或数值类型的值。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
li>
ul>
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
li>
ul>
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
🦖我是Sam9029，一个前端
文章若有错误，敬请指正🙏
**🐱🐉🐱🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
注意 不推荐同时使用**
不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
🦖我是Sam9029，一个前端
文章若有错误，敬请指正🙏
**🐱🐉🐱🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**