【Vue】基础系列(二)模板语法 - 插值语法 - 指令语法 - | v-bind | v-model | v-on | v-if | v- show
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号:
yk2012yk2012
,微信公众号:ykyk2012
]
「这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战」
今天学习Vue基础知识...从头开始学,学的还是Vue2, Vue3之前博文里介绍过了,其实本文是我刚学Vue时的笔记,参考的是B站尚硅谷的视频....
1. 模板的理解
- 动态html页面
-
包含了一些==js语法代码==
-
【插值语法】双大括号表达式 (“Mustache”语法)【一个】
-
【指令语法】指令(以v-开头的自定义标签属性)【很多】
-
插值语法: 功能:用于解析标签体内容 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
-
指令语法: 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....) 举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性 备注:Vue中有很多的指令,且形式都是:v-????
2. 插值语法:双大括号表达式
- 语法:
{{exp}}
- 功能: 向页面输出数据
- 可以调用对象的方法
里面写js表达式:有返回值的js代码,而不是js语句
3. 指令语法:强制数据绑定 v-bind:
功能:指定变化的属性值
完整写法
javascript
v-bind:xxx='yyy' // yyy会作为表达式解析执行
简洁写法
javascript
:xxx='yyy'
单向数据绑定
- 语法:
v-bind:href ="xxx"
或简写为:href ="xxx"
- 特点:数据只能从 data 流向页面
双向数据绑定 指令 v-model
- 语法:
v-mode:value="xxx"
或简写为v-model="xxx"
- 特点:数据不仅能从 data 流向页面,还能从页面流向 data
4. 指令语法:绑定事件监听 v-on:
功能:绑定指定事件名的回调函数
完整写法
javascript
v-on:click='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
简洁写法
javascript
@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'
5. 示例
v-text
1. 作用:向其所在的节点中渲染文本内容。
2. 与插值语法的区别:v-text
会替换掉节点中的内容,{{xx}}
则不会。
v-html
1. 作用:向指定节点中渲染包含html结构的内容。
2. 与插值语法的区别:
(1).v-html
会替换掉节点中所有的内容,{{xx}}
则不会。
(2).v-html
可以识别html结构。
3. 严重注意:v-html
有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html
,永不要用在用户提交的内容上!
```html
1. 大括号表达式
{{msg}}
{{msg.toUpperCase()}}
2. 指令一: 强制数据绑定
3. 指令二: 绑定事件监听
```
6. 条件渲染指令
移除标签删除
- v-if
- v-else
写法:
1. v-if="表达式"
2. v-else-if="表达式"
3. v-else="表达式"
适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
添加样式隐藏(display: none)
- v-show
写法:v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
【备注】使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。
7. 比较v-if与v-show
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析
```html
成功了
失败了
又成功了
又失败了
```
最后,欢迎关注我的专栏,和YK菌做好朋友
- 【TS】快速上手(四)配置选项 - 编译选项compilerOptions
- 【LeetCode】图解反转链表 - 迭代 - 递归
- 【LeetCode】最大子序和从O(N^3)到O(N) - 暴力初探 - 分而治之 - 在线处理
- 【JS】JavaScript基础知识自我检查大过关(第三关)函数定义与调用
- 【Vue】高级系列(六)Vue-cli配置代理 -demo3-GitHub用户查询-axios
- 【Vue】高级系列(五)组件间通信
- 【Vue】高级系列(四)Vue模块化实战-demo2-任务清单todoList
- 【TS】快速上手(二)类型声明
- 【Vue】高级系列(三)Vue模块化实战-demo1-动态评价页面
- 【Vue】高级系列(二)Vue相关小知识
- 【Vue】高级系列(一)Vue组件定义与使用 - 非单文件组件 - 单文件组件 - VueComponent
- 【Vue】基础系列(十一)Vue指令-常用内置指令-自定义指令-全局指令-局部指令
- 【Vue】基础系列(九)动画与过渡-trasition-enter-leave
- 【Vue】基础系列(八)生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件
- 【Vue】基础系列(七)v-model - 自动收集数据 - 表单数据自动更新
- 【Vue】基础系列(六)事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符
- 【Vue】基础系列(四)样式绑定 - class - style
- 【Vue】基础系列(二)模板语法 - 插值语法 - 指令语法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】实战项目:电商后台管理系统(九)项目优化 上线
- 【Vue】实战项目:电商后台管理系统(八)数据统计模块