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

发现你走远了

于 2024-03-28 09:57:41 发布

阅读量1.5k

点赞数 31

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/u011027547/article/details/136644389

版权

vue零基础入门专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>