Vue-指令之{{ }}、v-text、v-html(基础指令-02)
2019-04-18 09:43
435 查看
---什么是Vue的指令?---
指令 (Directives) 是带有 v- 前缀的html标签的特殊属性。指令属性值应该是一个单独的javascript表达式(V-for除外)。指令的工作是在其表达式的值发生变化时,将其产生的连带影响,响应式地作用于 DOM。
其实通俗一点来讲:Vue 中,通过一些特殊的语法,扩展了 HTML标签 的能力。
(一)插值表达式 {{ }}
语法:
[code]<标签>{{ 表现的数据信息 }}</标签> 数据信息:javascript表达式
表达式:常量、变量、各种运算符(算数、比较、逻辑、三元)
注意:变量值不改变的前提下,可以使用各种运算符表达式。
Dome:
效果:
(二) v-text
注意:
1-v-text所在的标签如果有默认内容,其会覆盖之
2-{{ }}左右也可以提供默认内容,与插值表达式没有关系
3-v-text如果和{{}} 同时存在,v-text覆盖{{ }}
4-如果在网速慢的情况下,相比{{ }}来讲,会出现 闪烁的效果,而v-text是不会有闪烁的,最多不给自己显示。
Dome:
效果:
(三)拓展
< <
> >
这个也很重要哦。
(四)v-html
Dome:
效果:
---下一章继续讲Vue其他指令---
相关文章推荐
- Vue的系统指令 v-text v-html v-cloak的区别
- 参见vue指令v-text.v-html.v-show.v-if.v-pre
- 9-Vue指令之V-text/V-html
- vue学习笔记之指令v-text && v-html && v-bind详解
- vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak
- Vue学习笔记3.3 基础模板语法--{{content}}、v-text、v-html
- 5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- vue学习02--处理用户输入(v-on/v-model/v-show/v-text/v-html)
- Vue-指令 v-text v-html v-model v-bind
- vue学习笔记2——指令v-text && v-html && v-bind
- Vue指令中的v-html和v-text
- (一)快速上手VUE 基础 常用语法示例(html纯引用vue.js)
- vue.js基础-模板语法-指令
- int指令02 - 零基础入门学习汇编语言65
- 【HTML 基础】02 基本标签
- html基础02
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
- 前端开发学习笔记02----HTML基础
- vue-基础-02