编译器使用：VScode
推荐插件
-
JavaScript (ES6) code snippets：包含 ES6 语法中的 JS 代码段
-
Vetur：VSCode 支持 VUE 的工具
-
Auto Close Tag：自动添加 HTML/XML 结束标签
-
Auto Rename Tag：自动重命名对应的 HTML/XML 标签
-
Highlight Matching Tag：突出显示匹配的开始和结束标签
-
open in browser：预览 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>Document</title>
<!-- vue 的引入，相当于导包的过程 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<!-- 正文内容 -->
<body>
<!-- 定义一个容器，给容器一个id属性 -->
<div id="app">{{message}}</div>
</body>
</html>
<!-- JavaScript 脚本 -->
<script>
// 实例化vue
var vm = new Vue({
// 需要传入对象
// el通过css选择器，指定挂载元素
el:"#app",
// 提供数据，vue填充到vue的数据
data:{
message: "hello world!"
},
methods:{
}
})
</script>
<!-- CSS 样式表 -->
<style></style>
- 前端三大件：html，script（js脚本），style（css样式）
html标签中常用的属性
-
常见的全局属性
-
id：规定元素的唯一id
-
class：规定元素的类名
-
style：规定元素的行内样式
-
-
常见其他属性
-
click：全局事件属性，当单机鼠标时运行脚本
-
src：规定图象的url
-
href：规定链接的目标url
-