Vue
了解
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网：https://cn.vuejs.org/
先建一个HelloWord玩玩
-
下载vue.js
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
-
创建一个静态项目
-
把下载好的vue.js导入项目
-
编写页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello-vue</title> <script src="/js/vue/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> -
启动服务，看效果
vue的常见指令
{{}}
vue直接解析数据指令
v-bind
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
v-bind: 表示通知vue在渲染的 DOM 标签时，将bind绑定的属性 和 Vue 实例data中同名属性值保持一致。
例子：
<div id="app">
{{message}}
<!--v-bind-->
<span v-bind:title="title">看这里 看这里</span>
<!--简写-->
<span :title="title">简写方式</span>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
title: "啦啦啦"
}
})
</script>
其他用法
绑定图片：v-bind:src 或者 :src
绑定样式：v-bind:class 或者 :class
绑定链接： v-bind:href 或者 :href
v-model
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似， 不过数据可同步改动
例子：
<!--model双向绑定--->
<div id="app">
<!--v-bind:表示数据单项绑定，可以给html标签属性绑定参数，如果html属性值改变，vue中data数据值不会变动 -->
v-bind：<input type="text" name="name" v-bind:value="name">
<!--v-model:表示双向绑定，绑定数据功能跟v-bind是一样的， 区别在如果htmle属性值改变， vue的data数据也会变动-->
v-model:<input type="text" name="name" v-model:value="name">
<br>
<span>{{username}}</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
name:"小云"
}
})
</script>
v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。如果说数据是带有html格式的数据时，此时需要使用v-html指令。
例子：
<!--v-bind属性绑定--->
<div id="app">
<!--{{content}}-->
<a v-html="content"></a>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
content:"<img src='https://cn.vuejs.org/images/logo.png'>"
}
})
</script>
效果
v-for
循环指令,可以绑定数组的数据来渲染一个项目列表
例子：
<!--v-bind属性绑定--->
<div id="app">
<!--遍历数组-->
<li v-for="item in arr">{{item}}</li>
<hr>
<!--遍历数组 带下标-->
<li v-for="(item, index) in arr">{{index}}-{{item}}</li>
<hr>
<!--遍历对象-->
<li v-for="u in user">
{{u.id}}--{{u.name}}--{{u.age}}
</li>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
arr:["a","b","c","d","d"],
user:[
{id:1,name:'xiaoyun', age:20},
{id:2,name:'jiazhao', age:20},
{id:3,name:'niexing', age:25},
{id:4,name:'jiawen', age:28}
]
}
})
</script>
v-if
判断指令
例子：
<!--v-bind属性绑定--->
<div id="app">
<span v-if="age>18">进入本站</span>
<span v-else-if="age<18">回家写作去</span>
<span v-else="age<18">再努力下</span>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age:19
}
})
</script>
v-on
事件绑定指令， 可缩写成@
例子：
<!--v-bind属性绑定--->
<div id="app">
<input type="button" v-on:click="c" value="点我">
<!--简写-->
<input type="button" @click="c" value="再点一下">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
},
methods:{
c:function () {
alert("ok了")
}
}
})
</script>
缩写 ————来自官网
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。
vue事件$event
事件信息封装对象： 使用 $event 标记
<div id="app">
<!--
$event:事件对象
u.id u.name:事件传参
-->
<li v-for="u in user" @click="choseClick($event, u.id, u.name)">
{{u.id}}--{{u.name}}--{{u.age}}
</li>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
user:[
{id:1,name:'xiaoyun', age:20},
{id:2,name:'jiazhao', age:20},
{id:3,name:'niexing', age:25},
{id:4,name:'jiawen', age:28}
]
},
methods:{
choseClick : function (e,id,name) {
console.log(e);
console.log(e.currentTarget);//获取事件源
console.log(id);
console.log(name);
}
}
})
</script>
vue的属性
<div id="app">
<li v-for="u in user" @click="choseClick($event, u.id, u.name)">
{{u.id}}--{{u.name}}--{{u.age}}--{{u.sex|sexFilter}}
</li>
</div>
<script>
var vue = new Vue({
el: "#app", //用来指示vue编译器从什么地方开始解析 vue的语法
data: { //用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
user: [
{id: 1, name: 'xiaoyun', age: 20, sex: 1},
{id: 2, name: 'jiazhao', age: 20, sex: 1},
{id: 3, name: 'niexing', age: 25, sex: 0},
{id: 4, name: 'jiawen', age: 28, sex: 0}
]
},
methods: { //放置页面中的业务逻辑，js函数一般都放置在methods中
choseClick: function (e, id, name) {
console.log(e);
console.log(e.currentTarget);
console.log(id);
console.log(name);
}
},
filters: { //vue过滤器集合
sexFilter: function (sex) {
return sex == 0 ? '女' : '男';
}
},
mounted: function () { //是一个函数， 在vue实例创建完成后被立即调用（html加载完成后执行）
console.log("初始化")
}
})
</script>
vue生命周期
综合案例
-
准备一个user表
-
创建一个新web项目
-
UserController的返回都是json格式，因为使用restful风格
这里说明：
可以使用标准的Restful风格，
也可以使用以前常规的见名知义的url。 -
配置接口
两个项目都是运行Tomcat启动一个是外部的，一个是SpringBoot内嵌的，Tomcat的默认端口是8080，所以要配置一个项目的接口
server.port=8088 -
建立跨域访问
什么是跨域访问？
跨域是指跨域名的访问，以下情况都属于跨域：
跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 步骤1：接口启动类中：
引用接口 implements WebMvcConfigurer
步骤2：跨域访问配置
//跨域访问 @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override //重写父类提供的跨域请求处理的接口 public void addCorsMappings(CorsRegistry registry) { //添加映射路径 registry.addMapping("/**") //放行哪些原始域 .allowedOrigins("*") //是否发送Cookie信息 .allowCredentials(true) //放行哪些原始域(请求方式) .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS") //放行哪些原始域(头部信息) .allowedHeaders("*") //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息） .exposedHeaders("Header1", "Header2"); } }; } -
在前端项目里创建用户列表和用户编辑页面，后端实现接口
代码
用户列表页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>user列表</title>
<script src="/js/vue/vue.js"></script>
<script src="../../js/jquery/jquery.js"></script>
</head>
<body>
<div id="app">
<a href="input.html">添加</a>
<table border="1" cellspacing="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>hobby</td>
<td>操作</td>
</tr>
<tr v-for="u in user">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.hobby}}</td>
<td>
<a :href="'input.html?id='+u.id">编辑</a>
<a href="#" @click="c(u.id)" >删除</a>
</td>
</tr>
</table>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
user: []
},
methods:{
c:function (id) {
$.get("http://localhost:8088/users/del",{id:id},function (data) {
if(data.success){
alert("删除成功");
window.location.reload(true);
} else {
alert("删除失败")
}
})
}
},
mounted: function () {
$.get("http://localhost:8088/users/list",{},function (data) {
console.log(data);
vue.user=data;
})
}
})
</script>
</body>
</html>
用户编辑页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input</title>
<script src="../../js/jquery/jquery.js"></script>
<script src="../../js/jquery-form/jquery.form.js"></script>
<script src="../../js/vue/vue.js"></script>
</head>
<body>
<div id="app">
<form id="formId">
<input type="hidden" name="id" v-model="user.id">
名称：<input type="text" name="name" v-model="user.name"><br>
年龄：<input type="text" name="age" v-model="user.age"><br>
爱好：
<input type="checkbox" name="hobby" value="c" v-model="user.hobby">c
<input type="checkbox" name="hobby" value="go" v-model="user.hobby">go
<input type="checkbox" name="hobby" value="python" v-model="user.hobby">python
<input type="checkbox" name="hobby" value="java" v-model="user.hobby">java<br>
<input type="button" id="btn" @click="submitForm()" value="提交"></input>
</form>
</div>
<script>
//获取url上的请求参数
function getParams() {
//获取问号及问号后面的内容
var url = window.location.search;
var params = new Object();
if (url.indexOf("?") != -1) {
//截取问号后面的内容,再使用&分割多个属性
var arr = url.substr(1).split("&");
for (var i = 0; i < arr.length; i++) {
//使用=分割为keyvalue
var keyValue = arr[i].split("=");
params[keyValue[0]] = keyValue[1];
}
}
return params;
}
var vue = new Vue({
el: "#app",
data: {
user: {
hobby:[]
}
},
methods: {
submitForm: function () {
$("#formId").ajaxSubmit({
url: "http://localhost:8088/users/saveOrUpdate",
type: "post",
success: function (data) {
if (data.success) {
window.location.href = "index.html"
}
}
})
}
},
mounted: function () {
var id = getParams().id;
if (id) {
$.get("http://localhost:8088/users/get", {id: id}, function (data) {
vue.user = data;
})
}
}
})
</script>
</body>
</html>
UserController
@RestController
@RequestMapping("users")
public class UsersController {
@Autowired
private IUsersService usersService;
@GetMapping("list")
public Object list(){
return usersService.listAll();
}
@PostMapping("saveOrUpdate")
public Object saveOrUpdate(@ModelAttribute("user") Users users){
if(!StringUtils.hasLength(users.getId())){
usersService.save(users);
} else{
usersService.update(users);
}
return new JsonResult();
}
@GetMapping("get")
public Object get(String id){
return usersService.get(id);
}
@GetMapping("del")
public Object del(String id){
usersService.delete(id);
return new JsonResult();
}
}
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
