Vue常用指令(完结版)

模板语法(插值表达式)


数据绑定的最常见的形式是文本插值  {{  }}

插值表达式
运行图


指令


指令的作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM,一些指令能够接收一个参数,在指令名称之后以( : )形式去表示

v-bind

动态地绑定一个或多个属性,或一个组件prop到表达式

v-bind缩写为  ‘ :’

在绑定prop时,prop必须在子组件中声明

可以用修饰符指定不同地绑定类型

v-bind

data属性

data必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次的数据。

data属性

v-for

通过v-for来遍历一个对象的property,可以循环一个数组,也可以是遍历一个对象,第一个参数value是被迭代的数组元素的别名,第二个参数为property名称(也称键名),第三个参数作为索引

v-for
v-for运行结果

key

当vue正在更新使用v-for渲染的元素列表时,默认使用“就地更新”的策略,如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保他们在每个索引位置正确渲染。

当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保它们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供:key,就会报一个warning,如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

计算属性computed

每一个计算属性都包含getter和一个setter,默认是利用getter来读取,所有getter和setter的this上下文自动地绑定vue实例

计算属性地getter

在模板中绑定表达式是非常便利地,但是它们实际上只用于简单地操作,在模板中放入太多地逻辑会让模板过重且难以维护,所以,对于任何复杂地逻辑,都应当使用计算属性。

字符串反转
运行结果

v-text和v-html

v-html:  等价于innerHtml, 更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

v-text:   等价于innerText,  用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。

v-text和v-html
运行效果图

v-if与v-else

 v-if 指令将根据表达式 isShow的值(true 或 false )来决定是否显示h4 元素。

v-if根据表达式的值的truthiness来条件地渲染元素,通过创建或销毁元素节点,来达到元素地显示与隐藏。

v-if与v-else
滑动前
滑动后

v-show

v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。

v-on

绑定事件监听器

v-on
运行效果图

v-model

在表单控件或者组件上创建双向绑定

v-model
v-model初始值
v-model更改后的值

v-pre

跳过这个元素和它的子元素的编译过程

v-cloak

这个指令保持在元素上直到关联实例结束编译

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容