Vue篇:常用指令
1.v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
内部支持表达式。
<script src="assets/js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
{{name}}
{{addr}}
{{tell}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"乐心湖",
addr:"广东深圳",
tell:"137222222"
}
})
</script>
2.v-html指令的作用是设置元素的innerHTML
内容中含有html结构会被解析为标签
而v-text指令无论内容是什么,只会解析为文本
解析文本时用v-text,需要解析html结构的使用v-html
3.v-show指令的作用是根据表达式的真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true时元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新.
4.v-if 指令的作用是根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换使用v-show,反之使用v-if,前者切换的消耗小.
5.v-bind指令的作用是为元素绑定属性
完整的写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式.
6.v-on指令的作用是为元素绑定事件
事件名不需要写on,指令可以简写为@
绑定的方法定义在methods,方法内部通过this关键字可以访问定义在data中的数据。
7.v-for指令的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index)in 数据, item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的.
8.v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联,绑定的数据和表单元素的值双向绑定
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 图像处理笔记(8)---- OpenCV 获取追踪对象的HSV值
- (数据科学学习手札95)elyra——jupyter lab平台最强插件集
- Python 序列化/反序列化自定义类型
- Windows10下使用VS2017编译和使用yaml-cpp库
- CentOS7下编译yaml-cpp库
- SAP Spartacus CurrentProductService返回的null对象
- SAP Spartacus产品明细页面用Observable显示产品名称
- 关于rxjs里operators filter和map的详细讨论
- 用代码查看SAP Spartacus购物车内的行项目
- rxjs的map和switchMap在SAP Spartacus中的应用
- 用代码查看SAP Spartacus购物车内的行项目
- rxjs fromEvent的用法
- Python2和Python3的区别简单总结
- Django操作数据库
- Hive元数据服务MetaStore