【学习笔记02】vue指令学习
目录
一、常用的指令
（一）v-bind
1、绑定样式
2、$event
（二）v-on
1、v-on修饰符
2、按键修饰符
3、案例：Todolist
（三）v-model
1、 v-model和v-bind的区别
2、案例：数字倒数效果
3、修饰符
编辑
（四）v-show
（五）v-if、v-else-if和v-else
编辑
（六）v-for
1、v-for渲染表格
2、v-for遍历数字
3、v-for遍历字符串
4、v-for遍历对象
二、其他指令
三、计算属性
1、案例：统计还可以输入都是字数
2、案例：通过切换，显示通过和没通过，以及全部
3、案例：全选效果
一、常用的指令
（一）v-bind
- 动态的绑定元素的属性的值 可以简写为":"
1、绑定样式
abc 
2、$event
- 文本框输入的数据，在文本框外面也能同步显示出来
- $event 是vue当中的事件对象
{{str}}
（二）v-on
- 监听事件并响应
- v-on:事件="事件处理函数或语句" 可以简写为"@"
1、v-on修饰符
- stop —— 阻止冒泡
- capture —— 捕获模式
- prevent —— 阻止默认行为
- once —— 响应一次
- self —— 只有自身响应事件
- 点击small盒子时，同时触发small和big两个盒子，通过stop阻止冒泡
bigsmall
- capture：捕获模式
bigsmall
- prevent ：阻止默认行为
点击- once：响应一次
bigsmall
- self ：只有自身响应事件
bigsmall2、按键修饰符
- .enter
- .esc
3、案例：Todolist
- {{item}}
（三）v-model
- 双向绑定数据的指令
$event是vue当中的事件对象
1、 v-model和v-bind的区别
- v-model 双向绑定，数据变化了，视图变化，视图变化了，数据也变化
- v-bind 数据变化了，视图变化，视图变化了，数据不变化
2、案例：数字倒数效果
还可以输入{{maxLength-str.length}}个字
3、修饰符
- .lazy ——监听 change 事件而不是 input
- .number ——将输入的合法符串转为数字
- .trim ——移除输入内容两端空格
+ = {{m+n}}
（四）v-show
- 切换css样式，实现显示隐藏
v-if: hello worldv-show hello world 
（五）v-if、v-else-if和v-else
- 惰性指令，条件成立的时候，才进行渲染，条件不成立不进行渲染
猜字优秀：大了
小了
对了
（六）v-for
1、v-for渲染表格
id 姓名 年龄 {{index+1}} {{item.name}} {{item.age}}
2、v-for遍历数字
- {{n}}
3、v-for遍历字符串
{{char}}-4、v-for遍历对象
- {{key}}--{{value}}---{{index}}
二、其他指令
- v-html：渲染 html 代码
- v-text：相当于差值表达式
- v-pre：跳过编译这个元素和它的子元素的模板
- v-once：只渲染一次，忽略更新
- v-cloak：编译模板过程存在的指令，编译后自动取消
- v-html：渲染html代码
v-html:差值表达式：{{str}} 
- v-text：相当于差值表达式
差值表达式:{{n}}
v-text:
- v-pre：跳过编译这个元素和它的子元素的模板
{{n}}
v-prev:{{n}}
- v-once：只渲染一次，忽略更新
{{n}}
v-once:{{n}}
- v-cloak：编译模板过程存在的指令，编译后自动取消
{{n}} 
三、计算属性
- 根据数据的变化自动计算更新最新的值
- 数据变，值就变，数据不变，取缓存
{{reverseStr}} 
1、案例：统计还可以输入都是字数
{{info}} 
2、案例：通过切换，显示通过和没通过，以及全部
- {{item.name}} {{item.age}}
{{type}} 
3、案例：全选效果
{{select}}- {{item.name}} {{item.price}}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！