首页 前端知识 『VUE』03. 模板语法 使用js与插入html(详细图文注释)

『VUE』03. 模板语法 使用js与插入html(详细图文注释)

2024-05-29 10:05:39 前端知识 前端哥 407 223 我要收藏

目录

    • vscode终端中创建项目
    • 什么是模板语法?
    • 模板语法--js"变量"用法
    • 模板语法--插入html
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

vscode终端中创建项目

回顾一遍前面的cmd.
首先在vscode中打开一个新的空文件夹second
在项目的空白处右键,在集成终端中打开
在这里插入图片描述

初始化vue

npm init vue@latest

在这里插入图片描述

切换到新建的vue项目

cd vue-project
npm install

在这里插入图片描述

npm run dev

在这里插入图片描述


什么是模板语法?

我们的网页代码

<span>Message: {{ msg }}</span>

其中js中的msg会自动填充到上面的{{ msg }}的位置,也即{{ msg }}是一个模板,看成一个变量也行,php的tp6等框架也经常出现模板语法这个概念.

export default {
name: 'HelloWorld',
data(){
return{
msg:"我是msg"
}
}
}

处理一下app.vue,原来有很多代码,改为如下内容,方便展示模板语法.这个修改后你打开网页应该是一片空白的.<template>中放的是网页内容,<script>放的是js.

<script>

</script>

<template>

</template>

模板语法–js"变量"用法

app.vue

<template>
  <h3>正常写法的 msg</h3>
  <br />
  <p>{{ msg }}</p>
  <br />
  <p>{{ number + 1 }}</p>
  <br />
  <p>{{ ok_no ? "yes" : "no" }}</p>
  <br />
  <p>{{ skill.split("").reverse().join("") }}</p>
  <br />
  <!-- <p>{{ var a=1 }}</p>
  <p>{{ if(ok){return msg} }}</p> -->
</template>

<script>
export default {
  data() {
    return {
      msg: "模板语法的内容",
      number: 10,
      ok_no: true,
      skill: "qwer",
    };
  },
};
</script>


在这里插入图片描述
请注意,只要是单行的js就可以用模板语法var a=1 实际上是var a+a=1 也是两行的,if语言要用三目运算替代,不然会报错!最好不要有{{ number + 1 }}这种写法,最好是在js中就处理好的数据传回去,在js中就 number + 1,不要把计算放在网页中.


模板语法–插入html

直接用模板语法写入html代码会直接显示html代码文本本身.

<template>
  <p>文本html:{{ new_html }}</p>
  <br />
  <!-- <p v-html="new_html"></p> -->
</template>

<script>
export default {
  data() {
    return {
      new_html: "<a href='https://www.baidu.com'>百度</a>",
    };
  },
};
</script>

在这里插入图片描述
将html代码传入v-html 属性即可规避这个问题.在 Vue 中,v-html 是一个指令,用于将数据作为 HTML 解析并插入到元素中。它可以用于任何具有 innerHTML 属性的元素,例如

、 等。

v-html 指令直接将包含 HTML 标记的字符串渲染为实际的 HTML 内容。但请注意,使用 v-html 时需要格外小心,因为它会绕过 Vue 的模板编译,可能导致 XSS(跨站脚本攻击)安全漏洞。

当使用 v-html 时,请确保要插入的 HTML 内容安全,并且不要从不受信任的来源动态生成 HTML 字符串。同时,避免将用户提供的内容直接插入到 HTML 中,以防止潜在的安全风险。

<template>
  <p>文本html:{{ new_html }}</p>
  <br />
  <p v-html="new_html"></p>
</template>

<script>
export default {
  data() {
    return {
      new_html: "<a href='https://www.baidu.com'>百度</a>",
    };
  },
};
</script>

在这里插入图片描述

:通常被用作块级容器,它是一个通用的块级元素,可以包含其他元素,并且通常会独占一行。在使用v-html属性时, 可以包含大段的HTML内容,并且会以块级元素的形式显示。

:代表段落,通常用于包裹文本段落,它会在前后添加一些默认样式,例如段落之间会有一定的间距。在使用v-html属性时,

标签适合包裹一些文字段落的HTML内容。

:通常被用作行内容器,它是一个行内元素,不会强制换行,适合用于包裹少量文本或者内联元素。在使用v-html属性时,标签适合包裹少量的内联HTML内容。

总的来说,在使用v-html属性时,选择使用

、取决于您想要展示的内容的性质和在页面中的布局需求。


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


转载请注明出处或者链接地址:https://www.qianduange.cn//article/9954.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!