hello，vue！

1 什么是vue

用于构建用户界面的渐进式框架。

2 hello，vue

新建目录vuedemo下创建一个新的html文件。

参考博客下载vue.js和vue.min.js：Vue官网下载Vue.js和Vue.min.js_醉梦洛的博客-CSDN博客，将其拷贝到目录vuedemo，参考下列代码实现hello，vue.在浏览器中打开后页面将会打印Hello,vue.

<!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>
</head>
<body>
    <!--  用于存放显示内容的容器 -->
    <div id="app">
        <!-- 插值表达式，取出脚本中message对应的值：hello，vue -->
        {{message}}
    </div>

    <!-- 在html中导入vue.min.js. -->
    <script src="vue.min.js"></script>

    <script>
        new Vue({
            el:'#app', // 用于绑定vue的作用范围,即id为"app"的div块
            data:{ // 定义页面中的模型数据
                message:'Hello,vue!'
            }
        })
    </script>
    
</body>
</html>
3 vscode抽取代码片段

在使用vue时步骤基本上是固定的:创建html，导入vue.min.js，创建内容显示的容器，编写脚本。我们可以在vscode中把这种频繁使用的代码片段抽取出来，避免重复编程。选择:文件=>首选项=>用户片段=>新建全局代码片段.内容如下。

{
		"vue htm": {
			"scope": "html",
			"prefix": "vuehtml",
			"body": [
				"<!DOCTYPE html>",
				"<html lang=\"en\">",
				"",
				"<head>",
				"    <meta charset=\"UTF-8\">",
				"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"    <title>Document</title>",
				"</head>",
				"",
				"<body>",
				"    <div id=\"app\">",
				"",
				"    </div>",
				"    <script src=\"vue.min.js\"></script>",
				"    <script>",
				"        new Vue({",
				"            el: '#app',",
				"            data: {",
				"                $1",
				"            }",
				"        })",
				"    </script>",
				"</body>",
				"",
				"</html>",
			],
			"description": "my vue template in html"
		}
}

注意到上面代码"prefix": "vuehtml"，这就是生成代码的快捷关键字。新建一个html，输入vuehtml就会出现对应代码的提示片段，按enter选择即可生成。

image-20211011211903149 alt