vscode如何运行html文件
【摘要】 @[toc] 步骤 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...
@[toc]
步骤
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
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）