Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。
知识储备
阅读本教程前，您需要了解的知识：
-
HTML
-
CSS
-
JavaScript
本教程主要介绍了 Vue2.x 版本的使用。
2017年9月4日小于 1 分钟
直接下载 vue.min.js，然后通过 script 标签引入。
使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
2017年9月4日大约 5 分钟
下面让我们一起来学习下 vue 的目录结构
λ ls
build/ config/ index.html node_modules/ package.json package-lock.json README.md src/ static/2017年9月4日大约 2 分钟
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})2017年9月4日大约 2 分钟
文本
\{\{ message \}\}
var vm = new Vue({
el: '#vue',
data: {
message: '你好呀，李银河！'
}
})2017年9月4日大约 4 分钟
Document
var vm = new Vue({ // 创建新的 vue 实例
el = "#app", // 获取id
data = {}, // 数据对象
// 发起请求
getInfo () { // 发起 get 请求
this.$http.get(url, {params: {JSONdata} }.then(function(result){
console.log(result)
console.log(result.body)// 通过 result.body 拿到服务器返回内容
})）
},
postInfo () {
// 第一个是地址，第二个是提交数据，第三个是格式 为普通表单
this.$http.post('url', {}, {emulateJSON: true}).then(
result=>{
console.log(result.body)
}
)
},
})2017年9月4日小于 1 分钟
最基本的，直接依赖 cdn 的方式。
引入
用户首页2017年9月4日小于 1 分钟
最基本的 CRUD
后端
import com.baomidou.mybatisplus.toolkit.IdWorker;
import com.github.houbb.privilege.admin.common.dto.BasePageInfo;
import com.github.houbb.privilege.admin.common.dto.BaseResp;
import com.github.houbb.privilege.admin.common.dto.common.CommonPageReq;
import com.github.houbb.privilege.admin.common.util.RespUtil;
import com.github.houbb.privilege.admin.dal.entity.User;
import com.github.houbb.privilege.admin.service.service.UserService;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;
/**
*
* 用户表 前端控制器
*
*
* @author binbin.hou
* @since 2020-09-18
*/
@Controller
@RequestMapping("/user")
public class UserController {
private final UserService userService;
public UserController(UserService userService) {
this.userService = userService;
}
/**
* 首页
* @return 首页地址
* @since 0.0.5
*/
@RequestMapping("/index")
public String index() {
return "user/index";
}
@RequestMapping("/add")
@ResponseBody
public BaseResp add(@RequestBody final User user) {
user.setUserId(IdWorker.get32UUID());
userService.insert(user);
return RespUtil.success();
}
@RequestMapping("/edit")
@ResponseBody
public BaseResp edit(final User user) {
userService.updateById(user);
return RespUtil.success();
}
@RequestMapping("/remove/{id}")
@ResponseBody
public BaseResp remove(@PathVariable final Integer id) {
userService.deleteById(id);
return RespUtil.success();
}
@RequestMapping("/list")
@ResponseBody
public BaseResp list(@RequestBody CommonPageReq pageReq) {
BasePageInfo pageInfo = userService.pageQueryList(pageReq);
return RespUtil.of(pageInfo);
}
}2017年9月4日大约 5 分钟
{{ 3.1415926 | number(2) }}
var vm = null;
window.onload = function(){
vm = new Vue({
el: "#app",
data: {
age: "",
name: "",
obj: {
value: "",
name: ""
}
},
watch: {
age: function(newValue, oldValue){
console.log("监听年龄修改")
},
name: function(newValue, oldValue){
console.log("监听姓名修改")
},
obj: {
handler: (newValue, oldValue) => {
console.log("obj 属性监听");
},
// deep: true 表示监听对象的属性变化，执行handler,获取newValue
// deep: false 关闭监听，看不到属性变化，不执行handler. 数组无需此设置
deep: true,
},
}
methods: {
fun1(){},
fun2: function(){}
}
});
}
// 全局监听
Vue.$watch("number", function(data){
return ....
})2017年9月4日大约 6 分钟
想做一个登录页，本来想把图片放左边，登录表单放在右边。
调整了半天也不满意，直接全屏得了。
效果图
源码实现
登录
html, body, #app {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100%; /**宽高100%是为了图片铺满屏幕 */
z-index: -1;
position: absolute;
overflow: hidden;
margin: 0;
}
.front {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.box-card {
width: 400px;
margin: 0 auto;
margin-top: 15%;
background-color: rgba(200,200,200,0.5);
border-color: rgba(200,200,200,0.5);
border-radius: 10px;
}
.title {
text-align: center;
font-size: 24px;
color: rgba(50,50,50,0.8);
}
P-ADMIN 权限管理
登录
new Vue({
el: '#app',
data: {
asideImg: '/img/pic1.jpg',
form: {
token: '',
},
rules: {
token: [
{required: true, message: '请输入登录密匙', trigger: 'blur'},
{min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur'}
]
},
},
methods: {
doLogin(form) {
}
}
})2017年9月4日大约 1 分钟