第一个vue程序
基本步骤:
- 创建一个文件夹
- 在idea中open该文件夹
- 在idea中安装vue的插件
- 编写第一个vue程序
在idea中安装vue插件
File–>setting–>plugins搜索vue进行安装
安装完成后重启idea
在项目上右键new会发现多了Vue Component[如果没有则按照下述方法解决]
-
点击 file 打开设置 settings,展开 Editor 找到 file and code templates
-
找到 Vue single file component 并选中它,然后点击copy
-
复制后底部出现了一个新的文件
-
把 Name 改成 Vue Component,然后把代码里的 “COMPONENT_ ”删掉,最后点 ok 就完事了
编写第一个vue程序
要使用vue首先需要引入
这里我们使用cdn版
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
编写html代码
<div id="app">
{{msg}}
</div>
创建vue对象
<script>
var vm =new Vue({
el:"#app",
data: {
msg:"hello VUE"
}
})
</script>
{{msg}}:文本插值
new Vue:是vue的内置对象
el:用于绑定具体的标签
data:存放有效的自定义数据