zoukankan      html  css  js  c++  java
  • 前端——框架——Vue——指令(内置)

      本篇介绍指令,内置指令和自定义指令。

    内置指令分为以下几类。

    第一类语法类,分支,v-if, v-else-if, v-else。循环v-for

    第二类客户端JS, 事件v-on。表单v-model,动画v-show。

    第三类绑定DOM关系,v-text,v-html,v-slot, v-bind。略。

    第四类杂项,v-pre,v-cloak,v-once。

    1、内置

    1.1    语法类

    1.1.1   分支

    v-if, v-else-if, v-else相当于编程语言中的if, else if, else语句。

    它根据条件去判断是否渲染DOM,条件的改变会导致重新渲染DOM结构,效率低下。Vue为了提高效率,会复用相同的组件,例如v-if, v-else下有input组件,它会被复用,导致错误,解决方案是为组件添加key,标识作用。

    1.1.2   循环

    v-for的使用场景有以下七组

    遍历数组,遍历对象,遍历范围(数字),与v-if指令结合使用,在template中使用v-for,在component中使用v-for。

    1.1.2.1     数组

    当为数组时,它的格式为:

    <li v-for='(item, index) in items' :key='item >
    	{{ index }} -- {{ item }}
    </li>
    

      其中items为数组,item为当前遍历的对象,index为当前遍历对象所在的索引值。

      当v-for执行完成之后,会产生数组大小相等的li标签,若不使用key属性,则li标签是无法区分的,若想操作某个li元素,基本无法实现。而当数组中某个元素的值改变,其他值不改变时,必须定位到改变的元素对应的li,否则需要重新渲染一遍,效率很低,所以为了准确定位,将数组的元素与li标签一一关联起来,此时元素必须是唯一的,若出现重复,则会抛错。

    若key重复,相当于数据库中有两条主键相同的数据,肯定会报错。

    数组发生变化时,不一定会改变li标签,只有通过某些方法改变数组才会导致li标签的变化。

    改变的方法:push, pop, shift, unshift, splice, sort, reverse。

    不改变的:执行delete items[0],执行items.length = 0等其他的语句。

    1.1.2.2     对象

    当为对象时,它的格式为:

    <li v-for='(value, name, index) in obj' :key='name'>
    	{{ index }} -- {{ name }} -- {{ value }}
    </li>
    

      其中obj表示对象,value表示属性的值,name表示属性的名称,index为属性的顺序,无意义。

    v-for指令循环,本质是调用Object.keys()方法,它只会返回可枚举的属性,即属性的元属性enumerable值为true。

    1.1.2.3    数字范围

    当为数字范围时,它的格式为:

    <li v-for='n in maxNumber' :key='n'>
    	{{ n }}
    </li>
    

      其中maxNumber表示最大值,n为当前遍历的数字,默认从1开始。

    它等价于for(let i=1; i< maxNumber; i++)。

    1.1.2.4    v-if

    与v-if配合使用有两种格式,

    <v-if> 
       <v-for>
    </v-if>
    <!-- 第二种 -->
    <v-for v-if>
    

      第一种情形相当于if(条件){for循环},第二种情形相当于for循环{if(条件)}。

      1.1.2.5     template

    在template中使用v-for, 除template无属性外,与其他的HTML标签用法是相同的。

    1.1.2.6    component

    在component中使用v-for,本质与其他没有任何区别,唯一有区别的在于可以将v-for作用域中的变量传递给component组件,例如遍历数组时,传递元素和索引。

    传递变量的方向为父组件中引用的子组件实例---->子组件(个人理解)。

    1.2     client js

    1.2.1   事件

    1.2.2   表单

    1.2.3   动画

    1.3   DOM结构类

    v-text,v-html,v-bind,v-slot等略。参考DOM部分。

    1.4     杂项

    1.4.1   v-once

    在标签上添加v-once,表示标签的内容为静态内容,意味着它只会被渲染一次。即使其中属性改变,也不会渲染。

    示例如下:

    <span v-once>This will never change: {{msg}}</span>
    

      msg属性改变,不会再次渲染span。

      1.4.2   v-pre

    在标签上添加v-pre,表示标签的内容无需渲染。即它将被Vue忽略。

    示例如下:

    <span v-pre>This will never change: {{msg}}</span>
    

      html为{{msg}} ,而不是msg的属性值

      1.4.3   v-cloak

    在标签上添加v-cloak,表示标签的内容在未渲染完成时,先隐藏。例如某些情况网路比较慢时,会直接显示源码,使用v-cloak解决此问题。

    示例参考

  • 相关阅读:
    Angular总结一:环境搭建
    适应移动端的地址四级(省市区街道)联动选择
    插入换行符
    自定义input[type="checkbox"]的样式
    使用zepto实现QQ消息左滑删除效果
    windows 下更新 npm 和 node
    [attribute |= value] 与 [attribute ^= value],[attribute ~= value] 与 [attribute *= value] 的联系与区别
    小程序父子组件onLoad和Created之间的问题
    小程序行内元素且有border的情况下,根据文字宽度自动调节元素宽度
    块级元素水平居中
  • 原文地址:https://www.cnblogs.com/rain144576/p/14752865.html
Copyright © 2011-2022 走看看