我们编写代码可以使用VSCode进行编辑。
要熟悉理解其编译环境,可以了解VSCode快捷键和基本的常规编辑。
我们开发Vue有几个推荐的插件
- 1.jshint:js代码规范检查
- 2.Beautify:一键美化代码的插件
- 3.Vetur:.vue文件识别插件
- 4.Javascript(ES6) code snippets:ES6语法提示。
- 5.Auto Rename Tag:自动重命名标签。标签都是成对出现的,开始标签修改了,结束标签也会跟着修改。
- 6.Auto Close Tag:自动闭合标签。针对一些非标准的标签,这个插件还是很有用的。
- 7.vue helper:一些Vue代码的快捷代码。
- 8.vscode-icons:可选。提供了很多类型的文件夹icon,不同类型的文件夹使用不同的icon,会让文件查找更直观。
- 9.open in browser:可选。右键可以选择在默认浏览器中打开当前网页。
Vue介绍
Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页简单,并且技术生态环境完善,社区活跃,是前后端工作必备技能!
Vue安装和使用
vue的安装大体上分成三种方式,第一种是通过script标签引用的,第二种是通过npm(node package manager)来安装,第三种是通过vue-cli命令行来安装。作为初学者,建议直接通过第一种方式来安装。最重要的是需要掌握Vue的学习,安装方式不重要。
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>
# 生产环境,使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
基本使用
要使用Vue,首先需要创建一个Vue对象,并且在这个对象中传递el参数,el参数全称是element,用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数,data中的所有值都可以直接在根元素下使用{{}}来使用。
<div id='app'>
<p>{{username}}</p>
</div>
<script>
let vm = new Vue({
el:#app
data:{
"username"="lzihe"
}
});
</script>
其中data中的数据,只能在vue的根目录下使用,在其他地方不能被vue识别和渲染的
<div id='app'>
</div>
<!-- 在这里不太行,不能渲染-->
<p>{{username}}</p>
<script>
let vm = new Vue({
el:"#app",
data:{
"username":"lizhelizhe"
}
});
</script>
另外也可以在vue对象中添加methods,这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用,并且在methods中的函数来访问data中的值,只需要通过this.属性名就可以访问到了,不需要额外加this.data.属性名来访问
<div id="app">
<p>{{greet()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "lizhelizhe"
},
methods: {
greet: function(){
return "晚上好!" + this.username
}
}
});
</script>