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
浙公网安备 33010602011771号