前端vue创建一个应用教程

最新推荐文章于 2024-06-28 14:34:55 发布

(((φ(◎ロ◎;)φ)))牵丝戏安

最新推荐文章于 2024-06-28 14:34:55 发布

阅读量757

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51341142/article/details/127301814

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这一节内容将介绍如何在本地搭建Vue单页应用。创建第一个vue应用

代码

<!DOCTYPE html>
<html lang="en">
<head>   
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <span>{{world}}</span>
        <p>
            胡须语法==> {{hello_html}}
        </p>
        <p>
            v-html指令=><span v-html="hello_html"></span>
        </p>
    </div>
    <!--脚本-->
    <script>
        const{createApp}=Vue;

        createApp({
            data(){
                return{
                    world:"Hello Vue!",
                    hello_html:'<span style="color:red">Hello world!!</span>'

                }
            }
        }).mount("#app");//创建根组件，并和模板进行挂载
    </script>
</body>
</html>

运行结果

胡须语法{{}}：由于表面像胡须，故而被称作胡须语法

v-html ：

v-html 指令类似于 v-text 指令
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
v-html 指令应尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击),一般只在可信任内容上使用 v-html，永不用在用户提交的内容上;