因为是学后端的,所以我用的是IDEA来开发的
这里放出官网想要详细学习的可以上官网查看
首先,如果想创建vue文件,那么必须在idea里安装插件,点开file-settings-plugins-marketplace中搜索vue
然后点击安装即可
之后在创建项目的时候就会出现vue component,就说明你您安装成功了。(如果没有,则到file-settings-plugins-editor-file and code templates中找到vue图标然后点击“-”旁边的复制即可)
那么这一些列操作完了以后就开始我们的代码时间
首先要知道,用vue是需要导包的,这里放出从vue官网粘贴下来的两个包提供使用
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
我们创建好html页面,然后在html页面中导入包,上面俩个都行
我们创建完以后,首先开始最简单的代码,去了解vue的基本构造。
这里放出来我的vue代码,代码写完以后,会在html页面显示hello,vue!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var vm =new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
那么从这个代码里我们就可以学到好多
1.显示在html页面的是message的值
通过{{}}符号来进行调用
<div id="app">
{{message}}
</div>
这个数值是可以在html页面随便改变的
2.这里就是vue的总体部分
通过创建vm对象来调用vue
el绑定的是div的id(也就是你要显示的窗口的id值)
data里面写数据,message为定义的数据名称。之后在div内完成调用即可
<script>
var vm =new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
});
</script>
最后在加一个v-bind标签
<span v-bind:title="message">
</span>
相当于将title和message保持一致