Vue 入门总结
Vue 只关心视图
http url 组成 :
协议://ip:端口/路径
ip : 指定服务器 ( 电脑 )
端口 : 指定处理请求的程序
路径 : 指定文件
Vue 的数据驱动
承上启下
Vue常见指令
v-bind
<sapn title="{{title}}">{{msg}}</span>
报错
<!-- {{}} 属性取值只能在标签内容(开始标签与结束标签中间)上使用, 不能在标签属性使用 -->
只能换成 v-bind
<!-- v-bind: 属性取值标签: 用在 html 标签属性中取值 -->
<sapn v-bind:title="title">{{msg}}</span>
简写方式
<sapn :title="title">{{msg}}</span>
超链接
<a v-bind:href=""></a>
图片
<img :src="src">
<-- 举例 -->
<div id="app">
<span v-bind:title="title">你瞅啥?</span></br>
<!-- 简写 -->
<span :title="title">你瞅啥?</span>
<a :href="href">1</a>
<img v-bind:src="src"/>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
title:"瞅你咋地?",
href:"https://www.baidu.com",
src:""
}
})
</script>
v-model
1. v-bind: 单向属性取值绑定, v-bind 取出数据之后,
做了修改 vue 实例中 data 属性不会跟随变动
2. v-model: 双向属性取值绑定, v-model 取出数据之后,
做了修改 vue 实例中 data 属性会跟随变动
<-- 举例 -->
<div id="app">
v-bind : <input type="text" name="name" v-bind:value="name">
v-model : <input type="text" name="name" v-model:value="name">
</br>
{{name}}
</div>
<script>
/* new Vue() 表示创建 Vue 实例 */
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
name:"scorpio"
}
})
</script>
v-html
v-html : 输出带有 html 格式数据 在 有id 的那层
{{}} : 原样输出
<-- 举例 -->
<div id="app" v-html="message">
</div>
<script>
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
message: "<span style='color: red;'>这是内容</span"
}
})
</script>
v-if
<-- 举例 -->
<div id="app">
<!-- 需求 : data中有age属性: 如果 age > 18 页面显示: 欢迎光临
如果 age < 18 页面显示: 18禁
如果 age = 18 页面显示: 请在家长陪同下观看-->
<span v-if="age > 18">欢迎光临</span>
<span v-else-if="age < 18">18禁</span>
<span v-else="age = 18">请在家长陪同下观看</span>
</div>
<script>
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
age: 18
}
})
</script>
v-for
<!-- data中有 arr 属性 arr:["a","b","c","d"] -->
<ul>
<!-- v-for 循环中 item 跟index名称是可以自定义,
但是位置不允许变动:(元素,索引) in 数组 -->
<li v-for="item in arr">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in arr">{{index}}---{{item}}</li>
</ul>
<-- 举例 -->
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}}--{{item}}
</li>
</ul>
<ul>
<li v-for="e in emps">
{{e.id}}--{{e.name}}--{{e.age}}--{{e.sex}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
arr:["a","b","c","d"],
emps:[
{id:1,name:'dafei', age:18, sex:1},
{id:2,name:'xiaofei', age:17, sex:1},
{id:3,name:'huisiji', age:18, sex:0},
{id:4,name:'xiaoxue', age:19, sex:0}
]
}
})
</script>
v-on
<li v-on:click="clickMe">
<!-- 简写方式 -->
<!-- $event : 事件触发之后,vue自动创建$event变量,
并将事件对象赋值给这个变量 这个名字是 固定 的-->
<li @click="clickMe($event,item.id)">
methods:{
clickMe:function(ev,id){
console.log(ev); <-- 事件对象 -->
console.log(this); <-- vue中任意方法中this都是vue实例对象 -->
console.log(ev.target); <-- 事件源 -->
console.log(id); <-- 普通对象 -->
}
}
<-- 举例 -->
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}}--{{item}}
</li>
</ul>
<ul>
<li ></li>
<li v-for="e in emps" v-on:click="clickMe($event,e.id)">
{{e.id}}--{{e.name}}--{{e.age}}--{{e.sex}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
arr:["a","b","c","d"],
emps:[
{id:1,name:'dafei', age:18, sex:1},
{id:2,name:'xiaofei', age:17, sex:1},
{id:3,name:'huisiji', age:18, sex:0},
{id:4,name:'xiaoxue', age:19, sex:0}
],
},
methods: {
clickMe:function (event,id) {
console.log(event); /* 事件对象 */
console.log(this); /* vue中任意方法中this都是vue实例对象 */
console.log(event.target); /* 事件源 */
console.log(id);
}
}
})
</script>
事件研究:
- 事件源 : 触发事件 html 标签( 此处为
- )
- 事件函数 : 触发事件之后做什么动作(执行函数逻辑 , 此处为 : clickMe)
- 事件对象 : 事件触发开始 , 到响应结束整个过程 , 所有数据记录对象
- 事件传值 : 事件参数( 事件源 , 事件对象 , 普通对象 )
Vue的属性
el: 指定模板的位置
data: 模板数据
methods: 方法
filters : 局部过滤器 // 局部优先
| : 代表 | 左边的结果作为右边的操作参数
// 全局过滤器
Vue.filter('sexFormat', function(sex){ })
var vue = new Vue({
mounted:function(){
// vue 实例对象大体步骤:
1.vue实例创建(一堆东西没初始化),
2.vue模板解析(数据没有填充,采用的都是默认值),
3.vue数据填充,
4.vue创建成功
// mounted 是一个函数 执行时间: 在 2-3 之间
// 作用: 用于填充模板中data数据(初始化data数据)
}
});
<-- 举例 -->
<!-- vue 页面模板 -->
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}}--{{item}}
</li>
</ul>
<ul>
<li v-for="e in emps">
{{e.id}}--{{e.name}}--{{e.age}}--{{e.sex | sexFilters}}
</li>
</ul>
</div>
<script>
Vue.filter('sexFilters',function (sex) { // 全局过滤器
// 当与 局部过滤器一同存在时, 局部过滤器优先
if (sex == 1){
return "男"
}else if (sex == 0){
return "女"
}
return "未知"
});
var app = new Vue({
el: '#app', // 指定模板
data: { // 填充模板数据
arr:["a","b","c","d"],
emps:[
{id:1,name:'dafei', age:18, sex:1},
{id:2,name:'xiaofei', age:17, sex:1},
{id:3,name:'huisiji', age:18, sex:0},
{id:4,name:'xiaoxue', age:19, sex:0}
]
},
filters:{ // 局部过滤器
sexFilters:function (sex){
if (sex == 1){
return "男1"
}else if (sex == 0){
return "女"
}
return "未知"
}
},
mounted:function () {
console.log("----------------------------------")
/*
1.vue实例创建(一堆东西没初始化),
2.vue模板解析(数据没有填充,采用的都是默认值),
3.vue数据填充,
4.vue创建成功
mounted 是一个函数 执行时间: 在 2-3 之间
*/
}
})
</script>
Vue的生命周期
Restful 风格 的 弊端 :
-
必须所有人都要遵守, 要不就会乱
-
restful url 在项目开始之前需要做一定设计
根据名称查询 , 根据年龄查询 , 根据是否超管查询…
前后端分离
后端接口
遵守了 Restful 风格
前端页面
ajax 真正实现的对象 为 XMLHttpRequest
需要解决跨域问题
跨域请求:
A服务器与B服务器相互访问, 如果这2个服务访问url地址中: 协议, ip,
端口 这3者有一个不一样, 称之为跨域访问.
案例:
前端服务: http://localhost:8080/xxx
后端服务: http://localhost:8888/yyy
端口不一致, 那就存在跨域问题
CORS policy: 跨域访问协议, web项目默认是实现这个跨域访问
协议特点: web项目不允许相互访问. 如果想让其他服务访问,
必须对当前服务器(被访问的项目)进行配置(跨域允许配置)
// 在 启动类 中添加 跨域访问配置
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
//重写父类提供的跨域请求处理的接口
public void addCorsMappings(CorsRegistry registry) {
//添加映射路径
registry.addMapping("/**")
//放行哪些原始域
// .allowedOrigins("*") spring2.2
.allowedOriginPatterns("*") // spring 2.4
//是否发送Cookie信息
.allowCredentials(true)
//放行哪些原始域(请求方式)
.allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
.exposedHeaders("Header1", "Header2");
}
};
}
同步表单提交与异步表单提交
同步表单提交: <form> 表单 直接使用 submit 按钮提交, 提交之后,
页面显示内容, 由后端控制决定
异步表单提交: <form> 表单 使用异步方式提交(ajaxSubmit/ajaxForm)
提交之后, 后端一般返回 json 结果数据
// 后续逻辑要做什么, 由当前js逻辑控制(根据json返回结果,再结合需求,
// 使用js进行下一步处理)
ajaxSubmit() 与 ajaxForm()
ajaxSubmit() : 将 form表达转换成异步表单, 并提交
ajaxForm() : 将 form表达转换成异步表单, 不提交
员工编辑操作 :
-
拼接 编辑 超链接
<a v-bind:href="'input.html?id='+item.id">编辑</a> -
编辑 input.html 页面上 url 中 id 参数如何获取
//获取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; } -
获取id 参数之后, 怎么查询数据, 进行页面回显
1.获取id之后, 发起异步请求, 请求接口获取员工对象 思考: 哪个页面发起请求, 页面哪个位置发请求, 怎么去发请求 2.获取员工对象之后, 用过vue回显到页面 -
填充数据之后, 提交数据表单实现编辑操作
细节 : 判断 id 有没有值 没值不发 detail 请求
-
员工删除 : 点击事件
实现 list.html
<body>
<div id="app">
<a href="input.html">添加</a>
<table border="1">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th colspan="2">操作</th>
</tr>
<tr v-for="item in emps"> <!-- 遍历 -->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td> <!-- 拼接 编辑超链接-->
<td><a :href="'input.html?id='+item.id">编辑</a></td>
<td><a href="javascript:;" v-on:click="clickMe(item.id)">删除</a></td>
</tr> <!-- 添加点击事件 v-on:click / @click: -->
</table>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
emps:[]
},
methods:{ // 点击事件方法
clickMe:function (id) {
$.ajax({
url:"http://localhost:8888/employees/delete",
type:"DELETE", // 删除操作 Restful规则
data:{id:id},
success:function () {
window.location.reload();
}
});
}
},
mounted:function () { //查询所有数据的方法, 应在vue的模板解析和数据填充之间完成
var _this = this;
$.get("http://localhost:8888/employees/list",function (data) {
console.log(data);
_this.emps = data;
})
}
})
</script>
实现input.html
<body>
<div id="app">
<form id="formId"> <!-- v-model=" " 回显数据-->
<input type="hidden" name="id" v-model="emps.id">
名称：<input type="text" name="name" v-model="emps.name"><br>
年龄：<input type="text" name="age" v-model="emps.age"><br>
邮箱：<input type="text" name="email" v-model="emps.email"><br>
<input type="button" id="btn" @click="submitForm()" value="提交"/>
</form> <!-- @click == v-on:click 点击事件 -->
</div>
<script>
//获取url上的请求参数
function getParams() {
//获取问号及问号后面的内容 .search
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[id]=1
//params[name]=家豪
//params[age]=21
//params[email]=1179739878@qq.com
params[keyValue[0]] = keyValue[1];
}
}
return params;
}
var vue = new Vue({
el:"#app",
data:{
emps:[]
},
methods:{
submitForm:function () {
$("#formId").ajaxSubmit({ //添加操作,发送异步请求
url:"http://localhost:8888/employees/saveOrUpdate",
type:"POST",
success:function (data) {
if (data.success){
window.location.href="list.html"
}else {
alert(data.msg);
}
}
})
}
},
mounted:function () {
var eid = getParams().id;
var _this = this;
// 细节: 需要判断 eid 是否为空?
// 如果为 null ,就不需要发送detail请求,为添加操作
// 如果不为 null 那就是更新操作
if (eid == null){
return;
}
$.get("http://localhost:8888/employees/detail",{id:eid},function (data) {
_this.emps = data;
})
}
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
