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

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>