vscode如何运行html文件
文章目录
步骤
1、打开vscode软件，编写一个html页面，如下：
<!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>Vue.js的模板语法</title>
</head>
<body>
<!--View-->
<div id="app">
<!--简单的文本插值-->
<p>{{message}}</p>
<!--使用 JavaScript 表达式-->
<p>{{message.toUpperCase()}}</p>
<!--HTML代码将以普通文本的方式输出-->
<p>{{spanHtml}}</p>
<!--输出HTML代码-->
<p v-html="spanHtml"></p>
<!--使用v-bind指令对HTML元素的属性进行绑定-->
<a v-bind:href="url">新浪网</a><br>
<a :[attribute]="url">新浪网</a>
<p>
<!-- <button v-on:click="sayHello">问候</button> -->
<button @click="sayHello">问候</button>
</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = Vue.createApp({
data(){
return {
message: "Hello Vue.js",
url: "http://www.sina.com.cn/",
spanHtml: `
<span style='color: red'>
HTML元素，以红色字体显示
</span>`,
attribute:'href'
}
},
methods:{
sayHello(){
alert("你好!")
}
}
});
// const app = Vue.createApp(App);
const vm=App.mount('#app');
</script>
</body>
</html>
2、点击扩展图标
3、搜索open in browser,点击安装
4、在需要运行的html页面右键，选择open in default browser
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
2020-07-05 图的邻接矩阵存储结构