vscode如何运行html文件

别团等shy哥发育

发布于 2023-02-25 16:03:44

3.6K0

发布于 2023-02-25 16:03:44

文章被收录于专栏：全栈开发那些事

文章目录

步骤

步骤

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>