谷粒学院项目实战44——hello，vue！
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选择即可生成。
java全栈日日学 文章被收录于专栏
java全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事
