Vue ,读音是/vju/ ,是尤雨溪于2014年发布的一个前端框架,是一套用于构建用户界面的渐进式 javascript 框架,是国内比较流行的前端框架之一,占的市场份额最大,容易入门,可以和第三方库或者已有的项目进行整合,可以做复杂的单页应用。它与React,Angular 齐成前端的三大框架。官网:https://cn.vuejs.org/
vue像React ,Angular,等前端框架一样,让前端开发更加的规范和便捷,它结合前者框架的优点,这样子的好处表现在前端工程化、前后端分离(数据双向绑定)、组件化开发。
前端工程化,是一种当下流行的软件开发观念。可能很多小伙伴在学习前端的时候,是先从Html、Css、JavaScript开始学起的,在学习和使用的过程中会发现,这样的进行开发需要重复写很多的代码,而且,代码的逻辑关联性较低,还会出现Css或者JavaScript配置文件冲突或者相互之间产生干扰的问题,会给开发以及debug带来很多的问题,可能找半天都没有找到是什么地方错了,总之,比较凌乱。
而前端工程化是为了解决上诉的这些问题,针对具体的生产开发环境而提出的方案。前端工程化包含了:工程化的目的是为了,提高开发效率、保证开发质量。
1)规范化,也就是制定或者约定一个开发规则、开发标准,比如,类的命名规范、制定编码模板代码,等等,提倡约定大于配置(vue、springboot等等当中就有约定大于配置的规范)
2)可定量的过程化方法,简单来说就是制定衡量整个开发流程和进度的方法
3)版本控制,来管理代码的更新
4)开发使用的技术、方法。
前端:负责View(视图层)和Controller(业务模块流程控制层)
后端:负责Model层、业务、数据处理等
这样子的好处,前端UI的设计可以根据业务需求进行修改,而不会干扰,后端的开发,后端可以专注于后端的事情,前端也不用关心后端开发的问题,只需要留有前后端对接的接口就可以了。
组件化开发,让前端重复的使用的代码可以单独拎出来成为一个组件来供整个项目各个页面的使用,Css、JavaScript的脚本的内容可以限定作用的域,从而大幅度减少了开发的冲突问题
1. 直接引用script
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
2.安装脚手架
win+r 打开命令行 在命令行输入:npm install -g @vue/cli,即可安装
3.vue的使用
模板指定 :
<div id="app">
hello Vue!
div>
new Vue 函数创建一个新的应用实例
var vm = new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据
})
创建应用实例-完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个vue程序</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据
})
</script>