【Vue】基础系列（二）模板语法 - 插值语法 - 指令语法 - | v-bind | v-model | v-on | v-if | v- show

最新推荐文章于 2022-06-01 01:03:34 发布

YK菌

最新推荐文章于 2022-06-01 01:03:34 发布

阅读量5k

点赞数 7

分类专栏：前端框架Vue 文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44972008/article/details/112780391

版权

在这里插入图片描述

1. 模板的理解

插值语法：
功能：用于解析标签体内容
写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???

里面写js表达式：有返回值的js代码，而不是js语句

功能：指定变化的属性值

完整写法

v-bind:xxx='yyy'  // yyy会作为表达式解析执行

简洁写法

:xxx='yyy'

功能：绑定指定事件名的回调函数

完整写法

v-on:click='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'

简洁写法

@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'

v-text

v-html

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{ {xx}}则不会。
(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！