Vue 指令

目录

  • Vue 文本指令
  • Vue 事件指令
  • Vue 斗篷指令
  • Vue 属性指令
  • Vue 表单指令
  • Vue 条件指令
  • Vue 循环指令

Vue 指令


Vue 文本指令

  • 1 v-* 是vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义)

  • 2 v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉(

    123

    会被num替换)

  • 3 v-html可以解析渲染html语法的内容

  • 4)补充

    {{ 'abc' + num + 10 }}


    

{{ num | add(300) }}

123

总结:

1  v-* 是vue指令,会被vue解析
2  v-text是原样输出渲染内容
3  v-html可以解析渲染html语法的内容



Vue 事件指令

1 数据驱动

  • 操作是一个功能,使用需要一个方法来控制

  • 方法名是变量,所以控制变量就可以控制该方法

2 事件指令

  • 在实例成员 methods 中声明事件方法

  • 标签通过事件指令绑定声明的方法:v-on:事件名="事件方法名"

    eg:

  • 标签通过事件指令绑定声明的方法,且自定义传参: v-on:事件名="事件方法名()"

    eg:   不传任何参数
    eg:   传入事件对象,同不写()
    eg:   只传入自定义参数,当然也可以传入事件对象

​ v-on:

  • v-on: 事件="方法" => 系统传参,只默认传 $event
  • v-on: 事件="方法($event, ...)" => 完全自定义传参,可以手动传入$event



总结:

1  v-text:基本同{{}}
2  v-html:可以解析html语法的内容
3  v-on:
   v-on:事件="方法"   =>  系统传参,只默认传$event
   v-on:事件="方法($event, ...)"  => 完全自定义传参,可以手动传入$event


补充:


伪类操作



事件处理
# 总结: # 事件:@click @dblclick @mouseover|out|down|up # 鼠标单击、双击、悬浮、移开、按下、抬起


Vue 斗篷指令

v-cloak:避免屏幕闪烁

属性选择器,会将 v-cloak 属性所在的标签隐藏

当 Vue 环境加载后,会将 v-cloak 属性解析移除,所以内容 {{ num }} 就会显示出来

而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到 页面从{{ num }}闪烁成数值10


{{ num }}



Vue 属性指令

语法: v-bind: 属性名="变量"

针对不同属性,使用方式稍微有一点区别

自定义属性以及 title 这些,直接赋值的,使用方式如下

t 是变量,'o' 是常量

段落

class 属性(重点)

绑定的变量:值可以为一个类名 “p1”,也可以为多个类名 “[p1, p2]”

绑定的数组:数组的每一个成员都是一个变量

绑定的字典:key就是类名,value是绝对该类名是否起作用


案例:

    


style 属性(了解)

绑定的变量:值是一个字典

重点:事件指令 与 属性指令 都可以简写

1  属性指令 v-bind: 可以简写为 :
2  事件指令 v-on: 可以简写为 @




总结:

v-bind:title="变量"

:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"

:style="字典变量"



Vue 表单指令

  1. 语法: v-model="变量"。服务于文本输入框
  2. v-model 绑定的变量控制的其实就是 value 属性值
  3. v-model 要比 v-bind:value 要多一个监听机制
  4. 数据的双向绑定
    1. v-model 可以将绑定的变量值映射给表单元素的 value
    2. v-model 还可以将表单元素的新 value 映射给报道的变量



总结:

v-model绑定变量控制value属性,可以实现双向绑定



Vue 条件指令

  1. 语法:v-show="变量" | v-if="变量"

  2. 两者的区别

    1. v-show 在隐藏标签时,采用 display:none 渲染标签,标签通过 css 隐藏
    2. v-if 在隐藏标签时,不会渲染在页面上
  3. v-if 有家族:v-if | v-else-if | v-else

    1. v-if是必须的,必须设置条件
    2. v-else-if可以为0~n个,必须设置条件
    3. v-else可以为0~1个
    4. 上方分支成立会屏蔽下方所有分支,从上至下依次类推

    show控制显隐

    if控制显隐

    你是第1个p

    你是第2个p

    你是第3个p


案例:

    


总结:

v-show | v-if
v-if | v-else-if | v-else



Vue 循环指令

  1. 语法:v-for="ele in obj" obj 是被被遍历的对象,ele 是遍历得到的每一次结果

  2. 遍历可迭代对象的首要结果,都是可迭代对象容器中的值,其次还可以遍历得到索引及键等数据

    1. 字符串:v-for="v in str" | v-for="(v, i) in str"
    2. 数组:v-for="v in arr" | v-for="(v, i) in arr"
    3. 对象:v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"

    注:v-for 遍历要依赖于一个所属标签,该标签及内部所有内容会被遍历复用




    
    循环指令


    

{{ d1 }}

【{{ e }}】

{{ d2 }}

【{{ e }}】 【{{ i }}{{ e }}】

{{ d3 }}

【{{ e }}】 【{{ i }}{{ e }}】

{{ d4 }}

【{{ e }}】 【{{ k }}-{{ e }}】 【{{ k }}-{{ e }}-{{ i }}】


商品循环案例:




    
    Title
    
    
    
    


{{obj.title}}


总结:

字符串:v-for="v in str"  |  v-for="(v, i) in str"
数组:v-for="v in arr"  |  v-for="(v, i) in arr"
对象:v-for="v in obj"  |  v-for="(v, k) in obj"  |  v-for="(v, k, i) in obj"


你可能感兴趣的