vue中常见指令及作用,vue的一些指令
在这篇文章中，边肖整理了一份关于Vue中常见指令和用法的总结，有兴趣的朋友可以关注一下。
首先说一下Vue框架。Vue是一个用于构建用户界面的渐进式JavaScript框架，对初学者非常友好。Vue的虚拟Dom和数据的双向绑定都可以让开发者快速上手。个人感觉Vue的说明书用起来很方便。今天就来说说本文常用的Vue指令吧！
v-for
在学习任何语言之初，我们或多或少都接触过for。
for(设I=0；长度；i ) {
}
Vue的v-for和我们js中最根本的概念是一样的，就是两个字循环。
v-for后面括号中的Item和index相当于for循环中的arr[i]和I，即每个对应的元素和下标，后面的arr是我们要循环的最后一个数组：key=item.id 是v-for的核心。没有这个：Key，Key Vue会报错，那为什么还有Key？钥匙会给出哪些参数？Key的参数是唯一的，即无论我们循环多少次，每次循环的Key都不能重复。在这里，我们不建议使用index作为您的键。归根结底，key的作用是在更新组件时判断两个节点是否相同。重用相同的，删除旧的，如果不同就创建新的。当渲染一个简单的无状态组件时，如果你不添加一个关键组件，默认情况下，它会被多路复用。添加的节点不会被删除，但列表项中的文本值将被更改。要知道，节点操作是非常消耗性能的。添加密钥后，当比较内容不一致时，会认为是两个节点，先删除旧节点，再添加新节点。
li v-for=(item，index) in arr :key=item.id
{{ item.name }}
/李
v-show
V-show是根据布尔值来呈现的，如果为true，它将显示在页面上，如果为false，它将不会显示在页面上。他的原则实际上是控制css样式，使我们相应的组件或框显示，隐藏display:“无”和显示display:“块”
div-show= true I display: block pull/div
假装我藏起来了，你看不见我
v-if
V-if也是根据布尔值渲染的，类似于v-show。页面上显示true，页面上不显示false，但是v-if是惰性的。如果初始值为false，则不会呈现组件。在他的参数第一次变为真之前，他不会渲染，但是当他的条件再次变为假时，子组件将被销毁并正确地重建。如果需要非常频繁的切换，用v-show比较好。如果运行时条件很少改变，那么最好使用v-if。
div v-if=true /div
V-if= false 我被毁灭了呜呜呜/div //假装我藏起来了，你看不见我
v-else
提到v-if，我们就说v-else。当v-if条件不成立时，我们直接进入v-else。记住v-else后面不能跟等号，组件后面必须跟v-if。
P-if= score=90 太棒了/p
P-else-if= score=60 差不多/p
v-else-if
在提到v-if和v-else的时候，也想到了v-else-if在v-if条件不成立的时候会直接到v-else-if，看条件是否成立。如果条件成立，就渲染组件，组件必须跟在v-if之前。
P-if= score=90 太棒了/p
P-else-if= score=60 差不多/p
v-once
v-once的作用是定义其元素或组件只渲染一次，第一次渲染后，不会随着数据的更新而重新渲染，相当于一个静态内容。
模板
div v-once{{count}}/div
按钮v-on:click=addCount 你点击了我的计数而没有添加/按钮
/模板
脚本
导出默认值{
data() {
return { count: 10 }
},
方法：{
addCount: function () {
this . count=1；
console . log( this . count: this . count )；
}
}
}
/脚本
v-text
V-text以文本的形式插入数据，用于操作纯文本。它会替换自己元素上的内容，如果数据更新，它也会改变。
P-html= data awesome /p
页面显示：p
嗨h1嗨h1
/p //外层还是会有P标包裹。
数据：h1你好h1
v-on
有一个简单的方法可以把v-on写成 @ 。简单来说，v-on就是一个绑定事件。您可以在一个标记中绑定多个事件。v-on:第一个是一个事件，后面跟着一个自定义方法。
按钮v-on:mouse enter= onenter @ click= leave click me/button
v-bind
V-bind也写作:。简而言之，v-on用于绑定数据和元素属性，最常用的方法是动态绑定class。
ul:class=" object "/ul
v-model
V-model是Vue双向绑定指令，可以在页面处于输入状态时改变绑定的数据属性，也可以在数据属性改变时更新页面状态。我们往往能在输入上发现它的存在，其实本质上是绑定的。v-model可以与修饰符一起使用，例如。懒，修剪和编号
Lazy将输入的实时更新更改为一个更改事件，输入只有在失去焦点时才会触发事件。trim删除字符串开头和结尾的空格。
Number将数据转换为值类型。
输入垂直模型=测试
输入v-model.lazy=msg
输入v-model.trim=msg
输入v-model . number= age type= number
关于Vue中常见指令和用法的总结，本文到此为止。有关Vue中一些常见指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。