web 用到 各部分功能 如何使用
# html css bootstrap javascript jquery json ajax vue element-ui
# node.js AnglerJs
# html
-- 标签
# css
-- 样式
-- <style></style>
-- <link href="css/earth.css" rel="stylesheet" type="text/css">
-- class="a" .a{ font-size: 18px; } id="b" #b{}
# bootstrap
-- 框架 最大作用: 封装css样式 直接用
-- <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-- 分页
-- <ul class="pagination">
-- <li><a href="#">«</a></li>
-- <li class="active"><a href="#">1</a></li>
-- <li class="disabled"><a href="#">2</a></li>
-- <li><a href="#">3</a></li>
-- <li><a href="#">4</a></li>
-- <li><a href="#">5</a></li>
-- <li><a href="#">»</a></li>
-- </ul>
# javascript
-- 使页面动起来 动画
-- <script></script>
-- <script src="js/earth.js"></script>
-- 变量 var a = 1; 函数function do(){} 对象 var dx = {};
-- 页面加载完成执行 !function(){}();
# jquery
-- 封装js 另一套api
-- <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
-- 入口函数 $(function(){ 代码 $("#id").click(function(){ 点击之后代码 }); });
# json
-- json 轻量级数据交换格式
-- js对象 和 字符串 互转
-- json串 "[ {name:"lvjing",age:"23"},{} ]"
-- js对象 [ {name:"lvjing",age:"23"},{} ]
-- JSON.parse(字符串) JSON.stringify(js对象)
# ajax
-- jquery的一个方法
-- 异步访问,局部刷新
-- 语法 : 添加jquery
--使用 : 1. 直接放在$(function(){ 中 }) 会在页面加载完成之后执行 2. 可以放在点击一个按钮$("#btn").click(function(){ 执行ajax });
$.ajax({
type:"post",
url:"",
data:{
"name":"lvjing",
"age":"23"
},
contentType:"application/json;charset=utf8",
dataType:"json",
success:function(data){
$("#username").text(data.name);
},
error:function(e){
console.log("error");
}
});
# vue
# element-ui
# node.js
# 我写过的功能
1. 鼠标点击任意位置出现文字
2. 背景动态先装粒子特效
3. 获取键盘点击的哪一个 -使用在输入完密码回车执行登录
4. 在html页面中引入另一个html页面的标签
5. 取消按钮 x
vue搭建环境
# vue 搭建环境
> 安装: nodejs
npm -v
npm config get registry 当前配置镜像
npm config set registry https://registry.npm.taobao.org 使用淘宝镜像
> vue 脚手架 vue-cli
npm install vue-cli -g 安装vue-cli脚手架
npm uninstall vue-cli -g 卸载vue-cli脚手架
vue --version
> 创建vue项目
工作空间下 dos
vue init webpack jt
参数:
Project Name 项目名称，默认，回车
Project description 默认，回车
Author chenzs 作者
vue build 默认，回车
install vue-router? 是否安装router，输入：y 安装
Use ESLint to lint your code? 规则引擎，过于严苛，输入：n
Setup unit tests? 单元测试，输入：n
Setup e2e tests with Nightwatch(Y/n)? 测试框架Nightwatch，输入：n
Should we run 'npm install' for you after the project has been created? 默认npm，回车
> 启动项目
npm run dev http://localhost:8081
# vue 项目
> App.vue 主界面
> 自定义组件 Item.vue 在主界面中<Item></Item> 进行使用自定义组件
> components中写自定义组件 template中写页面 script中写数据 style中样式
> 使用element-ui main.js中导包 导入element-ui的插件
# element-ui
> 安装 npm i element-ui -S
> 修改vue中main.js 导入element-ui
> import ElementUI from 'element-ui';
> import 'element-ui/lib/theme-chalk/index.css';
> Vue.use(ElementUI);
> 使用
> div中使用element-ui官网样式标签
# Promise
Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
# axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
> npm install axios --save-dev
> main.js
> import axios from 'axios';
> Vue.prototype.$http = axios;
# less-loader less
less-loader webpack 将 Less 编译为 CSS 的 loader。
Less 是一门 CSS 预处理语言，
它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
> npm install less less-loader --save-dev
# vue-quil-editor 富文本编辑器
> npm install vue-quill-editor --save
> main.js
> import VueQuillEditor from 'vue-quill-editor';
> import 'quill/dist/quill.core.css';
> import 'quill/dist/quill.snow.css';
> import 'quill/dist/quill.bubble.css';
> Vue.use(VueQuillEditor);
# echarts 一个基于 JavaScript 的开源可视化图表库
> npm install echarts --save
> main.js
> import echarts from 'echarts';
> Vue.prototype.$echarts = echarts;
# vue搭建环境2
node.js
淘宝影像 npm config set registry https://registry.npm.taobao.org
安装vue 客户端 npm install -g @vue/cli --force
初始化 vue ui
客户端
创建 1.详情 2.预设 手动 3.功能 router 使用配置文件 4.配置 ESLint+ StandardConfig
插件 1.vue-cli-plugin-element 手动导入 2.axios 3.less-loader npm install less-loader@5.0.0 4.less 5.vue-quil-editor 6. echars插件
关闭ESLint校验
项目打包 npm init -y npm i express -S
# 知识点
> 在html页面中引入另一个html页面的标签
<iframe src="page/canvas-nest.html" frameborder="1" name="content_frame" width="520px" height="520px" marginwidth=0 marginheigh=0></iframe>
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
> 鼠标点击页面任意位置出现文字
append-text.js
> 背景的动态线状粒子特效
canvas-nest.js
笔记 2
# web
## html标签
.ul ol type li .img .a href target .input .table tr td th .form
.audio .video
> 回到顶部
.a href="" name="_top"
.a href="#_top"
> input
.[type] text password radio单选 number week日期 checkbox多选 button submit提交 email date value
> table
.table bgcolor cellspacing
.td colspan rowspan
> from
placeholder name checked select option textarea button
> audio video
controls
## css
## bootstarp3
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
> 表格
> 表单
> 按钮
<div class="clearfix" > clearfix 取消浮动 里面的内容是浮动的 对于div会有位置变化 使用clearfix会取消浮动 使得按钮在div里面
<button type="button" class="close">×</button>
</div> 关闭图标
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: #CCCCCC 5px 3px 3px; background-color:#FFCCCC;">
<span class="glyphicon glyphicon-heart" style="color: #FFFFCC;"> Heart</span>
</button> 图标按钮
> 图片
> bootstrap模板
> ---------------------------------
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Templat</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
> ---------------------------------
## js
> if if-else
> for while for-in
> 参数 返回值
> 数组: 长度可变, 存各种类型
> onmouseenter="print1()" 鼠标滑过触发功能
> prompt() 弹出框输入内容
> === 比值 === 比值和类型
> 从浏览器输入的数据默认是String类型 可以使用parseInt()->number
> 变量
. var 变量名 = 变量值;
. 类型: 整形 字符串 小数
. 查看数据类型 typeof a
> 函数
. function a(){} --相对效率快
. var b = function(){}
. var c = new Function("a","b","return a*b"); --效率慢
. !function(){}(); --加载页面完成就执行此方法 自调用
. 箭头函数
var a = function(){alter(1);}
var a = () = {alert(1);} var a = () = alert(1);
> 对象
.1. function p2(){}
var p = new p2();
p.name = "lvjing';
p.study = function(){console.log(12)}
调用: p.study();
console.log(p.name);
.2. var p1 = {
"name":"lvjing",
"study":function(){
console.log(1);
}
}
调用: console.log(p1.name);
> dom
document.getElementById("lj").--
.. innerText-文本有效 innerHTML-可以使用html标签改变
> js获取键盘 按的哪个
input type="text" onkeydown="jssave(event)"
function(e){
var keynum = window.event ? e.keyCode : e.which; // 键的数值
var keychar = String.fromCharCode(keynum); // 键名字
if(keynum==13){console.log("按下的是enter键");}
}
> js 和 jquery
js事件放在标签中
jquery事件使用$("#a") 获取选择器 (例: .css) 执行
$('.item').mouseover(function(event){
console.log(event); //获取事件对象
console.log(event.target.id); //获取容器id
console.log(event.pageX); //获取鼠标位置：x坐标
console.log(event.pageY); //获取鼠标位置：y坐标
});
## jquery
百度 cdn : script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
Staticfile CDN : script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
> 入口函数 : 在页面加载完成之后运行 DOM加载完成之后
$(document).ready(function(){ 执行jquery代码 });
$(function(){ 执行jquery代码 });
> 选择器
$("div")
$(".a") $("#a")
$("div,.a,#b")
$("input[type='text']")
> 隐藏/显示
.hide()
.show()
> 捕获
text() - 设置或返回所选元素的文本内容 <p>你好</p> 获取到你好
html() - 设置或返回所选元素的内容（包括 HTML 标记） <p><b>你好</b></p> 获取到 <b>你好</b>
val() - 设置或返回表单字段的值
> css
.. addclass
.a{}
$("#a").addClass("a");
.. css
$("#q").css({"color":"red","font-size":"12px"});
> 键盘点击事件
.keydown(function(){})
.keyup(function(){})
> jquery获取键盘按键方式
input type="password" id="password" placeholder="password"
$("#password").keyup(function(e){ if(e.keyCode==13){ alert("抬起enter键") } });
> jquery方式执行按钮的点击事件
button id="btn"
$("#btn").click(function(){});
再次执行此按钮的方法: $("#btn").click();
## json
> web(客户端) 客户端中 交换服务端数据
> 字符串 <--> js对象
[常用] : 从服务端获取的数据 通过JSON转换为js对象在客户端中使用 服务端 --> 客户端 response
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
[
{ key1 : value1-1 , key2:value1-2 },
{ keyN : valueN-1 , keyN:valueN-2 }
];
> JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
使用 JSON.parse() 方法将 数据转换为 JavaScript 对象。
> JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
> json js对象
json字符串 [{"name":"lvjing"}]
js对象 [{name:"lving"}]
## ajax
>>> jquery 提供了ajax
> AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
> 作用:
异步访问 不用等待上一个请求结束 进行请求
局部刷新 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
创建快速动态网页
> request
> 语法: 参数
$.ajax({
type: 请求类型 get/post
url:
data:{} 请求数据 json串格式
contentType: 发送请求格式 "application/json;charset=utf-8"
dataType: 返回数据格式 "jsonp"跨域
success:function(data){} 访问成功进行的操作
error:function(e){} 访问失败
})
## JSON-Ajax
ajax json
.. ajax 客户端请求 并返回数据
异步访问
局部刷新
.. json 对获取的数据 -> js对象
存储 交换文本信息 --在网络中传输信息 JSON安全 --JSON 是轻量级的文本数据交换格式
[问题]
..前端获取输入 怎么给后端存 ---通过url执行后端的方法 参数也是通过url传递
..查询后端返回数据 前端怎么展示 ---前端要查询,url执行后端方法,后端查询到,返回return给前端,前端展示
... ajax 通过url 参数 访问服务端获取数据 success之后进行解析
... url中的参数
... json可以把返回的 对象装换为字符串 通过JSON装换为js对象进行使用
# vue
## node.js
> json
轻量级数据交换格式
结构 1.对象 名称/值 {name:"lvjing",age:23} 2.数组 ["lvjing","23"] 3.嵌套格式 [{},{}]
> 请求方式 post/delete/get/put RestFull
> ajax
data 传递参数
对象: data:{id:100,name:"lvj"} 拼接字符串: data: id=100&name="lvj"&age=14
for循环 获取数据
for (var i=0;i<data.length;i++){console.log(data[i])}
for (index in data){console.log(data[index])} // in关键字遍历下标
for (user of data){console.log(user);}// of 遍历对象
向表中添加每行
反引号 `` 模板字符串
let tr = `<tr>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>`;
解决问题: 拼接字符串换行 + " 繁琐
> 跨域
如果 浏览器请求的网址 与 ajax请求网址 必须满足同源策略 浏览器才能解析请求
.. 同源策略
请求协议 ://域名:端口 域名和端口号都满足
跨域资源共享CORS
# ajax异步原理
同步: 用户发起请求时,要求第一时间服务器做出响应.在此期间用户不可以做其它操作,只能等待服务器返回数据. 刷新1次.
异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.
## vue
渐进式框架 -
一个大页面包含..四部分..每部分由各自的页面负责, 互不干扰,
cdn : <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
国内 访问 国外 运营商 cdn缓存
# 语法
{{messsage}} 插值表达式 可以直接获取data中定义的常量message
var app = new Vue({
el: '#app', // 对哪个标签起作用
data: { // 定义所有的变量/常量
message: '123'
},
methods: { // 定义所有事件
show: function(){
condole.log(0123);
}
}
})
# API 指令
v-cloak : 在页面解析完代码之前,隐藏插值表达式 --不会显示，直到编译结束。
v-text="name" 给标签赋值, 不用插值表达式
v-html="html" 解析定义在data中变量
v-pre vue不解析所在标签
v-once 所在标签 内容 使用的vue中数据只加载一次 双向绑定失效
> 双向绑定
v-model="msg"
> 事件绑定
v-on 监听时间
v-on:click="num++" num会增加1
@click="num3()" methods:{ num3:function(){ this.num+=3; } }
@click.stop="num3()" 阻止单击事件继续传播
@click.prevent="" 阻止默认行为
> 按键访问修饰符
v-on:keyup @keyup.enter="enter1()"
v-on:keydown
v-on:keypress
> 属性绑定
v-bind:属性="key"
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
> 类型绑定
:class="{t1:t1flag,t2:t2flag,t3:t3flag,t4:t4flag}
:class="myClass" data:{myClass:"redClass"} 动态调整样式
> 分支结构
v-if
v-else-if
v-else
> 循环结构
v-for
数组:
hobby: ['电脑','手机','平板'],
<span v-for="item in hobby">{{item}}</span>
对象:
user: {id: 12,name: 'lvjing',age: 23},
<span v-for="value in user">{{value}}</span> <br>
<span v-for="(value,key,index) in user">{{key}}:::{{value}}:::{{index}}; </span>
集合:
userList: [
{id:100,name:'lv',age:23},
{id:200,name:'lvj',age:24},
{id:300,name:'lvji',age:25}
]
遍历集合 : <span v-for="(user,a) in userList">{{user.id}}---{{a}}...</span>
区分节点: <span v-for="user in userList" :key="user.id">{{user.id}}...</span> <br>
> 双向绑定--input--textarea(文本域)--select--radio--checkbox
> 属性
.number(用户输入变为数值类型)
.trim(去掉开头结尾空格) 不计算空格
.lazy(将input改为change) 离焦之后出现效果,鼠标离开之后
v-model.number="age"
字母反转
msg.split('').reverse().join('')
计算属性:{{reverse}} --
vue({
computed:{
reverse: function(){ return this.msg.split('').reverse().join(''); }
}
})
计算属性computed 与 方法methods 区别
1.
计算属性 方法 加返回值 使用{{reverse}}接收结果
2. 缓存
计算属性具有 缓存机制 只加载一次,可以反复使用 使用场景:要反复使用同一个值时
方法没有缓存机制,一次方法执行一次
> 数组用法介绍
1.push() 在最后一个追加
2.pop() 删除最后一个
3.shift() 删除第一个元素
4.unshift() 在开头追加一个元素
5.splice() 在指定位置替换元素
替换: 参数说明: 1.操作数据起始位置 2. 操作数量 3.替换元素的值(如果不写表示删除)
this.spliceNum.splice(this.startN,this.count,this.value)
删除: this.spliceNum.splice(this.startN,this.count)
6.sort() 数组排序 默认是按照字符编码的顺序进行排序
7.reverse() 数组反转
# vue的生命周期
> 钩子函数
8个函数 初始化-4 修改-2 销毁-2
预定义的函数进行操作
> 实例化成功
mounted(){}
beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件
created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted渲染做准备
beforeMount vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted vue实例挂载完成，data.filter成功渲染 配合路由钩子使用
beforeUpdate data更新时触发
updated data更新时触发 数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy 组件销毁时触发
destroyed 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 组件销毁时进行提示
created () {
console.log('==============' + 'created' + '===================')
console.log(this.$el)
console.log(this.$data)
console.log(this.filter)
},
# promise
> 解决传统ajax回调地狱问题 B包
# axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
> 1. axios封装了promise,异步调用更简洁
> 2. 请求类型 post delete get put
> 3. 分组 get/delete post/put 用法分
> 4. 参数:
url:
请求参数
> 5. 使用:
axios.get("url")
.then()
.catch();
axios.get("url",{
params: { ID:1234 }
})
.then() -success
.catch(); -error
axios({
methods: 'get',
url: url,
params: {id:1}
})
data:{} 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
restFul 简化get请求
无状态请求
> 6. ajax 回调地狱
.then的存在 返回promise对象
使用 链式加载结构 方法加返回值
> 7. 简化
1. 公共路径: axios.defaults.baseURL="http://localhost:8614/user/";
2. 解构赋值
await 标识异步请求,解构操作
async 函数中支持解构
let {data:value} 用来接收解构后的对象,,将返回值赋值给value, value就是后端的返回值
async function saveBtn(){
let {data:value} = await axios.post('saveUser',this.user)
}
# 箭头函数
function(result){
console.log(result.data);
}
(result)=>console.log(result.data)
result=>console.log(result.data)
# 跳转页面
location.href="http://47.92.74.202:81/payment.php";
# 页面展现快 vue
内存中有该对象, vm-虚拟DOM对象
# let const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
# vue 组件化
>1. 分布式 分层
tomcat(用户管理,部门管理)
模块拆分: tomcat(用户管理) tomcat(部门管理)
层级拆分: pojo dao service controller util
核心理念: 分布式架构,解决系统架构的耦合性
>2. 组件
分布式思想, 页面分区
提取共性, 封装为组件
>3. 组件化
单独定义html/css/js, 组件之间互不影响.
>4. 步骤
要求:
组件名(标签名), 组件模板id
组件模板id定义-template:"#appTem",
数据定义data是一个函数返回变量-date(){return{msg:"msg"}},
方法methods-methods:{}
定义组件模板,模板内必须有一个根目录 <div></div>
组件名,定义组件名为驼峰规则,使用时标签内.大写字母前使用- 例如: 组件名: appComOne 标签: <app-com-one></<app-com-one>>
全局组件
所有div内都能用
1. vue对象绑定页面中div id="app"
2. 定义全局组件 Vue.component("appComOne",{template:"#appComOneTem",data(){return{}},methods:{}})
3. 定义全局组件模板(在body中), <template id="appComOneTem"><div>模板内容</div></template>
4. 使用全局组件,在vue绑定的div内 <app-com-one></app-com-one>
局部组件
只能在定义的div内使用, new Vue()的el内, 定义局部组件实现在vue的components内
1. vue对象, 绑定div的id el:"app", 定义局部组件 components:{app1:app1,app2,app2}
2. 定义局部组件 对象 let app1={template:"#app1Tem",data(){return{}},methods:{}} let app2={}
3. 定义局部组件模板 <template id="app1Tem"><div>模板内容</div></template>
4. 使用局部组件,在vue绑定的div内 <app1></app1>
>4.1 全局组件实现
展示页面
<div id="lvj">
使用组件 引用组件..标签解析是变成小写..驼峰用 - componentName component-name
<component-name></component-name>
</div>
定义组件模板html 有一个根目录<div>
<template id="componentDiv">
<div><h4>测试组件</h4>数据:{{num}}<button @click="addNum()">自增</button></div>
</template>
<script>
全局组件--组件名
Vue.component("componentName",{
组件模板--模板id
template: "#componentDiv",
属性 组件内有效
data(){return{num:1}},
方法定义
methods:{addNum(){this.num++;}}
})
vue对象-绑定div.lvj
new Vue({el:"#lvj"})
</script>
>4.2 局部组件实现 只能在当前元素内部使用
<div id="app1">
使用局部组件app1
<app1></app1>
</div>
<div id="app2">
不能用,局部组件,只能用在app1中
<app1></app1>
</div>
定义局部组件模板具体实现
<template id="app1Tem">
<div><span v-show="kw">app1数据 : </span>{{msg}}<button @click="showW()">kw</button></div>
</template>
<script>
定义局部组件的具体实现, 是个对象, 先定义后使用-(写在new Vue()前)
let app1 = {
组件模板, 模板id
template: "#app1Tem",
data(){return{msg:"app1",kw:false}},
methods:{showW(){this.kw=true}}
}
let app2 = {}
定义vue对象
new Vue({
el: "app1",
app1内的局部组件定义
components:{com1: com1,com2: com2}
})
</script>
# vue 路由 Router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
> 概念
网络通信 映射关系
用户发起请求,
> 前端路由/客户端路由
将所有的路由的配置生成js, 保存到浏览器, 用户请求, 自己映射对应的请求信息( 组件 ), 直接访问静态资源
> 集中式路由
所有的用户请求都经过后端,后端路由/服务器端路由
> 把路由地址信息放到前端浏览器
前端服务器 .静态资源 .html页面
> 页面跳转
<a></a>
> 步骤
1. 创建路由对象
2. 创建vue对象, 把路由对象交给vue管理
3. 创建局部组件对象, 把组件给路由使用
4. 创建局部组件html模板页面
5. 定义路由连接, <router-link to="/user">, 在vue绑定div中, router-link编译为a, to编译为href
6. 路由填充位, 使用路由中用到的组件, <router-view>
<div id="appR">
<router-link to="/user"><router-link>
<router-view></router-view>
</div>
<template id="appRTem">
<div> <h3>路由组件</h3> </div>
</template>
<script>
let router = new VueRouter({
路由规则
routes: [{path:"/user",component:user}]
})
new Vue({
el: "appR",
router:router
})
let user = {template:"#appRTem"}
</script>
# 重定向
> 概念
url 请求地址发生变化
重定向请求发送多次, 多次请求,多次响应
重定向是服务行为
重定向不能传递参数
> 实现
redirect 跳转页面
let router = new VueRouter({
routes: [
{path:"/index",redirect: "/user"}
]
})
# 路由嵌套机制 children
> 组件嵌套
router-view组件中有router-view
组件页面中包含router-view
> 步骤
1. new Vue() 对象绑定div
2. new VueRouter() 定义路由规则,使用的组件 new VueRouter({routes:[ {path:"/",redirect:"/user"},{path:"/user",component: user, children: [{path:"/user/name",component:name},{path:"/user/age",component:age}] } ]})
3. let user={template:"#userTem"} 定义组件页面 let name={template:`<h3>lvjing</h3>`} let age={template:`<h4>24</h4>`}
4. 定义user组件的具体内容 , 子组件占位符 <template id="userTem"> <div> name.age <router-link to="/user/name">name <router-link to="/user/age">age <router-view>
5. 使用 body <div id="app"> <router-link to="/user"> <router-view>
# 实例
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/g-vue-component/src/main/resources/static/vueCom
# vue 脚手架
> 框架
> .vue文件
1. template 页面模板, html页面内容
2. script js内容
3. style 样式渲染
> src 目录 结构
APP.vue 默认跳转页面
main.js 脚手架核心配置js
router 设定路由
plugins 引入ui工具
components 组件, 页面 welcome login register home 业务页面
assets css/js, 引入第三方图标样式
> main.js 文件配置规则
核心配置
控制整个脚手架的运行的初始js, 公共依赖信息, 全局变量
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'
/* 导入富文本编辑器对应的样式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8705/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* 定义过滤器 */
Vue.filter("priceFormat",function(price){
return (price / 100).toFixed(2)
})
/* 将富文本编辑器注册为全局可用的组件 */
Vue.use(VueQuillEditor)
new Vue({
router, /* 路由 */
/* 绑定页面 id="#app" */
render: h => h(App) // 1. 绑定页面
}).$mount('#app') // 2. 绑定div元素
> 父组件 向 子组件传递参数
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios
/* 将富文本编辑器注册为全局可用的组件 */
Vue.use(VueQuillEditor)
Vue.prototype 父子组件参数传递, 属性/对象传参
Vue.use() 父子组件插件传递
> 子组件 向 父组件传递参数
// 对外声明路由对象 子组件向父组件传递数据
export default router
> 文件如何绑定的
main.js中new Vue() 对象中 路由, 页面
页面 APP.vue
路由 router/index.js
进入登录界面
> main.js 定义vue对象,
> router/index.js 定义路由(url索引), 请求路径与组件映射关系, 使用指定组件(页面) 规则: {path: '/', redirect: '/login'},{path: '/login', component: Login}
> App.vue 使用路由占位符,加载路由对象, 展示界面 router
> components/Login.vue 具体页面实现, 组件
main.js
new Vue({
router, /* 路由 */
/* 绑定页面 id="#app" */
render: h => h(App) // 1. 绑定页面
}).$mount('#app') // 2. 绑定div元素
App.vue
<template>
<div id="app">
<!-- 添加路由占位符-->
<router-view></router-view>
</div>
</template>
router/index.js
const router = new VueRouter({
// 路由规则
routes:[
{path: '/', redirect: '/login'},
{path: '/login', component: Login}
]
})
login
页面
# element
> element-ui 导入vue
>1. 导入插件
>2. 父向子传递插件
import Vue from 'vue';
import {
Pagination, 分页
Dialog, 对话框
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
Vue.prototype.$message = Message
//通过MessageBox函数定义 消息提示框
Vue.prototype.$confirm = MessageBox.confirm
>3. 使用
路由配置中 配置页面组件
import ElementUI from '../components/ElementUI.vue'
{path: '/elementUI', component: ElementUI}
ElementUI.vue 组件中具体页面
<div>
<div class="block">
<span class="demonstration">评分 {{value2}}</span>
<el-rate v-model="value2" :colors="colors"></el-rate>
</div>
</div>
>4. 属性
ref 标明是form表单
:model="" 属性绑定, 对象绑定
>5. 表单校验
el-form :rules="rules"
el-form-item prop="name"
定义rules验证规则
data(){return{
rules: {
username: [{required:true,message:'please enter your username',trigger:'blur'},{min:3,max:10,message:'长度在3-10之间',trigger: 'blur'}],
password: [{ required: true, message: 'please enter your password', trigger: 'blur' },{ min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
}
}}
required true 必须
trigger blur离焦
>6. 重置
获取表单信息,然后执行重置函数
resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
this.$refs[formName].resetFields();
this.$refs.loginFormRef.resetFields()
>7. 登录
1. validate
对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，
并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
Function(callback: Function(boolean, object))
this.$refs.loginFormRef.validate( valid => { 校验之后 失败返回 成功执行请求 } )
2. post请求 form表单 参数username,password
3. 数据是否正确校验, 查询
4. 回执, 数据处理完, 告诉前端, 状态信息status 200-成功 201-失败
5. 登录之后,短时间内再次进入,不需要再次登录, token秘钥
登录成功,跳转到首页
> 接口文档
前后端数据需要哪些,参数,方法
> . 后端返回 token 前端需要保存, 如何存储?
. Session-会话控制/会话机制 : 存储用户信息(所需属性和配置), 用户会话存在期间, 信息一致存在
当用户在app中的网页之间跳转时, 存储在Session对象中的变量不会丢失, 在整个用户会话中保存下来
* 短时间内(会话期间)有效
. Cookie- :
网站识别用户身份, 将session中的信息保存到计算机本地, 暂时或永久保存
加密的数据
* 一段时间内有效 例如:七天免密登录
.. 例如:
session 安全 银行, 财务, 员工
cookie 腾讯会员
.. 使用:
前端:
session
//获取用户token信息(后端返回的)
let token = result.data
window.sessionStorage.setItem("token",token)
cookie
.. 查看:
浏览器:
F12 Application/Session Storage
...解决 登录之后(页面跳转)的用户信息展示在首页中,
> 8. 路由导航守卫
: 不让用户使用url路径随便进入系统页面
http://localhost:8614/#/home 直接进入了首页 不允许
没有登录,直接输入url进入首页---不允许 登录之后--允许
router/index.js
方法 : router.beforeEach()
方法参数 : 回调函数 (to,from,next) => {}
回调函数参数 : to..要访问的路径 from..从哪个路径来 next..请求放行
策略: /login..放行 不是/login..校验token...有放行...没有跳转到/login
router.beforeEach(
(to,from,next) => {
if(to.path === "/login") return next(); // 放行
let sessionToken = window.sessionStorage.getItem("token");
if(token) return next(); // 放行
next("/login"); //跳转到/login
}
)
> 首页 Home.vue
> 9. 左侧菜单
> 10. user
> 11. 作用域插槽
<!-- 作用域插槽, 通过一个标签获取当前行对象, -遍历的数据 slot-scope="scope" -->
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
> 12. 正则
手机号验证 请输入正确的手机号 随便11位数字不能通过
validator: checkPhone 校验
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
{ validator: checkPhone , trigger: 'blur' }
],
//校验手机号的邮箱规则
const checkPhone = (rule, value, callback) => {
//定义校验手机号的正则语法
const phoneRege = /^1[34578][0-9]{9}$/
if (phoneRege.test(value)) {
return callback()
}
callback(new Error('请填写正确的手机号'))
}
> 1.字符
/ 转义 ^ 开头 $ 结尾
0* >=0 1+ >=1 ? 0 1
例子 reger
8* --- 88
8? --- 8
> 2.区间用法 次数
{n} n {n,} >=n {n.m} >=n <=m
例子
3{3} --- 333 3{3,} --- 3333 3{2.5} ---- 33 ~ 33333
> 3.任意字符
.点 除\n \r 单个字符
[a-z] 范围
[^xyz] 非xyz
> 4.分组
() 分组 | 逻辑或
xxx.png (jpg|png|gif)
vue-axios demo_user 展示数据 删除 修改 新增
# vue-axios demo_user 展示数据 删除 修改 新增
## vue页面数据传递
表格设计, tbody tr td
--[查]
结果集: axios请求获取到结果, 赋值给 userList数组
获取一条: v-for(users in userList) 迭代userList获取每条
展示到td: {{user.name}} / v-text="user.name" 展示到td中
--[删]
获取要删的数据的id: 每一条数据,后面有删除, 因此可以获得每条数据各自的id,
执行: 按钮@click="deleteBtn(user.id)"
方法: deleteBtn(user.id)
--[修]
页面: 写要修改的数据的内容页面 input框 v-show="disU"用于显示隐藏
数据: 在获取每条数据时, 跟一个修改 可以直接获取到每条数据 users
更新按钮: @click="updateB(users)" 功能 this.user = user;
展示数据: v-model="user.name" 双向绑定 因为 this.user = user;
提交,执行: updateBtn() 页面中数据已经是 user
--[增]
页面: 和update一样
按钮: @click="insertB()"
数据: 开始展示数据为空, 添加数据 v-model="user.name" 双向绑定
提交: insertBtn(user)
> 按钮
删除 deleteBtn(id) user.id,v-for()得到
更新 updateB(user) user,v-for()得到 展示input
更新提交 updateBtn() this.user,input v-model 双向绑定得到
新增 insertB() 展示input
新增提交 insertBtn() this.user,input v-model 双向绑定得到
返回 returnBtn() div的v-show
清空 clearBtn() 清空input
## axios各种请求
get delete put post
-- [get]
axios请求: axios.get(`http://localhost:8614/user/find`).then(result=>{this.userList = result.data;});
页面接收: 使用UserList数组
-- [delete]
axios请求: axios.delete(`http://localhost:8614/user/delete/${id}`)
-- [put]
axios请求: axios.put('http://localhost:8614/user/update', this.user)
-- [post]
axios请求: axios.post("",参数) axios.post('http://localhost:8614/user/insert',this.user)
发生的请求: 两次请求 1.跨域(预检) 2.403(正常)
数据: 使用的input表单 和put一样 input v-model="user.name"(双向绑定)
传递的数据: json串
-- [url参数]
params:{}
data:{} 只能用在post/put
-- [成功]
.then() 箭头函数可以使用 this.
删除 / 新增 / 修改 之后的查询 getUserList()放在 .then() 中 --原因异步请求
笔记1
# 2021-02-02
实现网页 HTML 超文本标记语言
文字,图片,视频,音频,动画
ajax爬虫
#### 1.C/S(word 游戏) 桌面系统
#### 2.B/S(网站)
浏览器 B -browser
服务器 S -server
web中间件 nodejs(javaScript)/tomcat(java)
数据库 mysql
<div></div>
<img src="a,jpg"/>
### 展示一个网页
浏览器访问 chrome 以服务形式,,,启动了node服务,,端口8848
http://127.0.0.1:8848/web2012/day01-02-02/01-hello.html(常用)
file:///D:/Git/web2012/day01-02-02/01-hello.html
### * 标签
html,head,body,style,title,
h1-h6,div,span
table,tr,td,
br,hr,img
<meta>
<br/>,<hr/>,<img/>
### * 标签作用
<meta charset="utf-8"> 字符集使用哪种
title 网页标题
meta charset = utf-8 乱码 解决字符集
h1-h6 标题大小
div 块自动换行
span 块 实现页面布局
tr 行
td 单元格
### * 快捷键
删除 Ctrl+D
### note
!DOCTYPE html
声明web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
table 表格中没有列的概念,是单元格
meta 原信息
```<table><tr><tb>吕晶</tb><tb>吕晶</tb></tr></table> ```
样式设计 style
border 边框
width 宽
align 横向排列,,,left,right,center
valign 纵向排列,,top,bottom,center
hr 横线
空格 七个空格等价于两个汉字
img 图片
src 配置图片来源,相对路径,本html文件所在文件夹下的图片
等比缩放,只设置宽或高
类class .name
id #name
font-size 字体大小
font-weight 字体加粗
padding 内边距 上右下左
padding-left right top bottom
padding: 10px 0px 10px 10px;
margin 外边距
dashed 边框虚线
solid 边框实线
# 2021-02-03
### Git
团队协作代码管理工具,,团队5人
pull
git add README.me 工作空间 -> 本地索引(日志信息)
git add . 变化内容(新增,修改,删除)
git commit -m "commit" 本地索引 -> 本地仓库
git push -u origin master 本地仓库 -> 远程仓库 master主分支
git push
### 架构图
执行结构 技术
C/S Client/Server B/S Browser/Server
JSP, html+css+vue
html,css,javaScript,vue ajax ssm mybatis
java对象 json(字节流,js解析)
### margin和padding
盒子模型
(margin(border(padding(div元素))))
margin 外边距
padding 内边距
### table
<>合并表格
横向 colspan
纵向 rowspan
<>圆角矩形
border-radius:10px;
### 谷歌二维码
java jar包 生成二维码
本质,一串字符
点代表什么
<>下载的jar包,导入java程序中
通知程序,引用jar包
jar包放在lib文件夹里
Build Path 创建jar包在java程序中的路径
使用方法 不需要导包 在同名包下
java.lang 包 不需要导包
package
### css
line-height: 200px;
./images/1.jpg .表示当前路径
background
### menu
菜单
ul li
list-style: none: 去掉 li 的点
float: left; 浮动 使 li 标签在一行
li:hover{} 鼠标经过
### 连接
a href=""
target="" _blank 点击连接后 怎么出现网页 弹出
text-decoration: none; 下划线
display: inline-table;
块级元素 展现,以表格形式布局 设置段落生成一个行内框
### 动画
＞拉伸
transition: width 2s; 宽度拉伸2s
.name:hover{width:100px;}
需要配合,鼠标经过效果(鼠标经过后变成什么样),
transition: 2s;
.name:hover{width:50px; height:50px;}
＞移动
animation
＞＞声明动画 在要使用动画的css样式中
animation: movebox 2s infinite linear;
movebox 动画名
2s时间
infinite 循环执行
linear 匀速
＞＞定义动画内容
@keyframes movebox{
from{left: 0px;}
to{left: 100px;}
}
动画执行是在坐标中,需要position
position: relative;
position 位置
relative 相对位置
＞旋转
transform 改变形状
旋转，缩放，移动，倾斜
rotate 旋转 0deg 从0°开始
@keyframes run{
from{ transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
＞＞鼠标移入动画暂停,移出继续
animation-play-state: paused;
play-state 播放状态
paused 暂停
放在:hover中
### 音频视频
＞＞音频
audio
audio src="audio/li.mp3" controls="controls"
controls 音频控制面板
＞＞视频
video
video src="video/20170727_121728_4185.mp4" controls="controls" height="300px"
可以使用width height控制视频的页面大小
＞＞相对,绝对路径
src="audio/li.mp3"
相对路径:网页源文件夹,所在的目录 当前文件夹中的 audio/li.mp3
src="D:\Git\web2012\day02\video\20170727_121728_4185.mp4"
绝对路径:直接指定文件所在位置,和当前目录无关
网页访问形式不能访问视频
http://127.0.0.1:8848/web2012/day02/audio-video.html
直接打开html文件
file:///D:/Git/web2012/day02/audio-video.html
### 总结
jar包 导入(放在lib下) 引用(bulid path)
二维码 导入jar包
CreateQR.make(宽度,高度,网址,生成图片路径)
同名包不用import,java可以识别
audio video
animation transition transform
border-radius
display
# 2021-02-04
transition 拉伸 transition 2s
animation 动画 animation run 4s linear infinite
@keyframes{from{} to{}}
from 表单
boostrap
javascript 动态网站 脚本语言 弱语言 浏览器场景
### 表单
h1~h6 标题的大小
label 文本
text radio checkbox select-option button
文本框
input type="text" name="name" id="name" placeholder="请输入姓名"
placeholder 文本框灰色字 提示信息
单选
input type="radio" name="sex" id="sex" checked="checked"
checked 默认已经选择的
多选
input type="checkbox" name="hobby" id="hobby"
下拉
select name="edu" id="edu"
option value="1" selected="seected" 幼儿园 option
select
selected 默认选择
按钮
button name="button" 取消 button
name id
document.getElementByName("name")
document.getElementById("id")
在使用js获取name和id是用到
label span
bootstrap中对label有特性
label属性for="name"
作用: 光标定位,点击文字会定位到输入框(输入框高亮)
name id 重复
name可以重复 id不能重复
但在radio和checkbox中id相同代表 为一组
单选框
radio 圆框 选了去不掉
互斥 name同名只能选择一个
name不同名,可以同时选
多选框 checkbox 方框 选了可以再去掉
下拉框
select name id
option 下拉选项
表单提交 提交的值是value值
＞＞link标签
外部引入
link type="" rel="" href=""
type类型 text/css
rel样式表 stylesheet
href路径 css/bootstrap.min.css
> input css
input[type="test"]
### bootstrap
样式美化 封装css3
形成漂亮的界面ui( user interface )
css是浏览器直接支持的,直接代码
bootstrap 第三方 预定义class
https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css
菜鸟教程中的bootstrap
.min 意思最小文件 压缩(把文件所有内容换行 空格去掉) 文件相对小
1)html 页面引入 css 样式表文件
在head标签中添加 link 标签,,属性 rel href
2)在标签上就可以加入class = "form-group"
class(bootstrap中的class) 看网上手册 菜鸟教程
container 容器 大的div
form-group
form-control
radio-inline
checkbox-inline
btn
btn-primary
btn-danger
### JavaScript
与java无关
java强语言 几乎都能干 C/S B/S(JSP)
javascript弱语言 脚本语言
鄙视链 c java c# javascript sql
B/S brower浏览器
js升级ES5/ES6(主流)/ES7
typescript 向强语言发展
＞＞js作用
访问网页元素，可以和后台程序对接，实现前后台贯穿
传输后台的信息不包括美化css，label不包括，表单元素
怎么拿到元素内容？姓名input框的内容？
体系：DOM（页面元素获取，编辑）、BOM（浏览器控制） DOM document object model 文档对象模型 BOM browser object model 浏览器对象模型
javascript会把html页面整个抽象，去除杂质，页面元素（div/input/button...） 形成tree树，DOM树， 为什么要抽象出DOM树？为了页面元素快速定位，获取它信息 网页html解析，从上到下，从左到右，页面button，76行，按顺序解析性能低； tree树 document就是树根，它代表整个html页面 页面上的所有元素就被抽象成tree树上的节点node 树形结构一旦形成，它检索数据速度远高于html顺序解析
js注释 和 java 一样 //
js中的字符串 单引号 双引号 都可以
引入js文件使用 < script src="js/"></ script>
type="text/javascript" 可省略 默认
src="" 引入外部js jquery.js
在script标签中写js的内容 < script>js内容< /script>
＞＞在浏览器页面中显示
1.弹窗
window.alert(); alert();--BOM中提供的api
2.查看源代码f12
console.log(); --Chrome 提供的方法
＞＞4种方式 获取a标签内容 dom.html
1. tag
对应的是a标签 参数为a标签 返回所有a标签的数组
document.getElementsByTegName("a");
document.getElementsByTegName("a")[0]; 得到第一个元素
document.getElementsByTegName("a")[0].innerText; 得到元素的内容
document.getElementsByTegName("a")[0].href; 得到元素的链接
2. classname
对应的是a标签中的 class属性 参数是class的值 返回所有class属性一样的 数组
document.getElementsByClassName("jd");
3. name
对应的是a标签中的name属性 参数是name的值 返回所有name属性一样的 数组
document.getElementsByName("pdd");
4. id
对应的是a标签的id属性 参数是 id的值 返回一个值 js书写中规定id为唯一的
document.getElementByClassId("cgb");
＞＞修改页面中的值(显示的)
获取到原来的值 再赋值
document.getElementByClassId("cgb").innerText = "吕晶";
document.getElementByClassId("cgb").href = "吕晶";
>> 链接a 几种访问形式 css样式
a:link{} 未访问过的样式 只在第一次刷新页面时有用 访问过之后都是vidited
a:visited{} 访问过的样式
a:hover{} 鼠标滑过的样式 为了效果必须放在link 和visited后面
a:active{} 鼠标点击时的样式
>> 定义变量
->>var var a = "521";
适用于定义所有的变量类型,var a="lvjing";
在使用var定义后 还可以重新使用var定义 重新定义后会覆盖掉原来的
var a="lvyingying";
typeof() 查看变量的类型
var定义变量,代码块 {var a = "10000";} 如果代码块之前定义过a 会覆盖
->>let
let b="1000"; 定义变量
代码块中使用let定义变量 {let b="500";} 出了代码块变量就释放了(弹出栈了)
let 精度高
-const
常量 const m="lvjing";
定义后不能再赋值
>>函数
->普通函数
var f = function(){console.log("123456");} 定义 f(); 调用
var f = function(a){return a;} f(10);
var f = function(a,b){return a+b;} f(10,20);
->箭头函数 arrow function
var f=()=>{console.log("123456");console.log("456798");}
var f=()=>console.log("456798"); 只有一条执行语句
var f=(a)=>{return a;} f(10);
var f=(a,b)=>{return a+b;} f(10,20);
var f=a=>return a; 只有一个参数和一条执行语句
>>datatype
字符串,整形,布尔,数组
var a = "lvjing";
var a = 123;
var a = true;
var a = ["123","456","789","123456","456789","789456"];
>访问数组
a[0]第一个元素 a[a.length-1] 最后一个元素
>>对象
var lv = new Object();
lv.name = "lvjing";
var car = {
name: "保时捷718",
age: "30",
f1:function(){
return this.name+this.age; 使用this访问对象中的属性
}
};
>动态增加属性
car.price = "123";
car.f2=function(){
return car.name+car.age;
}
>>this
this的最终指向的是那个调用它的对象
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j(); 在这里调用this的是j而不是fn,j只是等于fn这个函数
var j = o.b.fn();
在这里j是fn执行后的结果,this被fn执行
form
dom
var
arrow-funcation
datatype
car
# 2021-02-05 day04
js 必须会 只局限于浏览器
es6 维护js标准化 ECMAScript
js的衍生 1. aiax(必须 请求(把页面发送给后端java) 依赖js)
2. json(必须 返回 不依赖js)
3. typescript 可以存本地文件 +nodejs服务 可以修改本地
#### bootstrap
第三方推特发明 是一套css样式表,使定义规范化
记忆规范,根据demo学习,查找要实现的效果在bootstrap中怎么用的
各种class bootstrap 优化页面
1.栅格体系 可以适应PC端 移动端
2.适应主流浏览器,兼容性
借鉴bootstrap发展了element-UI(饿了么)
#### js
语法,api
BOM Browser Object Model
DOM 树 Document Object Model 代表html页面
树形结构,检索快,效率高
只关心表单(关键)元素,只向后台提交主要内容(吕晶 姓名不提交)
根据扫描,形成dom树 按元素类型
无法预估元素类型,就形成数组elements
页面只有一个,数组个数为1
访问
tagName,className,name,id
doucument.getElementsByClassName
doucument.getElementById
radio 提交的是男或女
checkbox 提交数组 ["123","456"]
开发时使id唯一,便于使用
es6
js中var,Object
es6是js的高版本 block scoping 块域,变量定义使用范围更小,释放快
let,const(不允许修改),{}
1. var a = function(){} var a = function(arg){return arg;}
var a = () => {} arrow function 知识简化js函数,不能完全替代
var a = (arg) => {return arg;} var a = arg => arg
2. 数组var a=["1","2"];
3. 对象var a={name:123,age:25}; key:value,key:value
对象中函数 var a = {b:function(){},c:()=>{}}
对象定义中传统函数的this代表整个对象,,,箭头函数中的this是window的对象
动态增加对象的函数
a.b1=function(){this.name} this代表本对象
a.c1=()=>{this.name a.name} this代表window对象,使用a代表本对象
this 在普通函数中代表当前对象 this 在箭头函数中代表window对象
java 静态语言,编译时查错,运行前保障程序的安全性
js 动态语言,边解析边执行,动态添加属性方法,灵活,,,,,缺乏安全(黑客可以改内容)
alt+/ 提示
> css居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
#### bootstrap
class="container" 最外面大盒子修饰 给盒子大小后会水平居中
class="form-group" 大盒子
for="username" 输入框外文字修饰
class="form-control" 输入框input修饰
autocomplete="off" 关闭自动完成,输入框不弹出之前使用的内容
class="btn btn-primary" 按钮修饰 button
onclink = "save()" 按钮事件 单击触发里面的函数 函数自定义
function save(){let username = document.getElementById("username")}
获取对象中的元素(不同的标签调用不同的字段)
div.innerText a标签a.innerText input.value
### jquery
第三方 改变了js写法,新机制,代码更简介
js标准,jquery民间标准,替代js
anglarjs,react,vue js框架,更厉害 vue基于js和jquery
vue阿里收购,
js jquery
document $()
document.getElementsByTagName("a") $("a")
document.getElementsByClassName("a") $(".a")
document.getElementsByName("a") $("input[type='text']") $(":text")
document.getElementById("a") $("#a")
input.value $("#a").val()
div.innerText $(#a).text()
1)简洁
2)选择器 语法:$(select).action()
select选择器 .username(class) #username(id)
action() 动作 函数
导入 <script src="jquery"></script>
jquery提示 语法提示库左键 jquery1.8
fieldset legend```
<fieldset><legend>登录</legend><div>内容</div></fieldset>
登录外面的大框```
>>保存 取消 按钮
保存 获取输入的用户名密码 取消 清空输入框
1.js
使用按钮中设置的onclick功能 onclick="jssave()" onclick="jsclear()" 点击按钮触发方法
定义方法
function jssave(){console.log(document.getElementById("username").value);}
function jsclear(){document.getElementById("username").value="";}
2.jQuery
前期绑定 使用 按钮中设置onclick功能 点击触发方法
定义方法
function jqsave(){console.log($("#username").val());}
function jqclear(){$("#username").val("");}
后期绑定 设置按钮id 获取按钮 设置点击事件 .click(匿名函数)
$("#btnSave").click(function(){console.log($("#username").val());})
$("#btnClear").click(function(){$("#username").val(""));})
---设置按钮的属性 点击之后不允许第二次点击
在定义按钮功能中设置 attr(设置或返回) attr参数 name value
disable 对按钮设置时 会禁用按钮 默认为false
$("#pay").attr("disabled",true);
--checkbox 全选 取消全选
复选框,设置全选和取消全选按钮 button
使用jq中的.click方法设置点击事件
jq中的checked(默认选中)属性 true全部选中 false取消全选
$("#selectAll").click(function(){$("[id=hobby]").prop("checked",true);})
$("#unSelectAll").click(function(){$("[id=hobby]").attr("checked",false);})
在去选中attr只能使用一次,所以用prop 在取消全选中,attr可以使用多次
### json
交换数据 两台计算机通讯 计算机+网络TCP/IP
txt (10,20,30)明文信息不安全
xml (< price>10< /price>)自定义标签,标签量大,造成网络传输数据量增加,性能低
json []数组 {}一条记录 "key","value"属性 值 表示字段,数据
京东获取某个商品100003717483的价格
请求链接：
https://item.jd.com/100003717483.html 商品详情
https://p.3.cn/prices/mgets?skuIds=J_100003717483 商品价格
json字符串：
[
{
"p":"2499.00",
"id":"J_100003717483",
}
]
JSON 对象 把字符串变成js对象 JSON.parse()
通过对象获取内容
<span id="itemId"></span>
var item = JSON.parse(jsonstr);
$("#itemId").text(item[0].id); 返回取到的值
### ajax
提交请求 https://p.3.cn/prices/mgets?skuIds=J_100003717483
请求网站 ajax发出请求(相当于浏览器发起请求) 京东服务器响应
在内部进行查询,商品信息,转换为json字符串返回
＞＞jquery.ajax参数
type:GET/POST 链接形式的差异
url:链接 位置
data:参数对象 数据
contentType:发送请求格式 application/json;charset=utf-8;
dataType:返回的数据格式 json/jsonp跨域(京淘项目)
success:访问成功(data) data就是返回的json对象
error(e):访问出错,网站返回错误信息
请求
GET json/jsonp
POST jsonp data中的数据 在data中写 或者 在url中包括 或者 都有 都可以
#### 小结
1)jQuery 封装了js 更简介 $() api
$("selector").action() 选择器
2)json 字符串 远程数据传输 数据交换格式
[数组] {一条记录} key:value属性值
3)ajax 参数
# 2021-02-07
>>jQuery
封装了js api
document.getElementsByTagName("a"); $("a");
document.getElementsByClassName("a"); $(".a");
document.getElementById("a"); $("#a");
Vue 只关心数据和业务
>>json ********
xml <name>lvjing</name><age>23</age>
json {name:"lvjing",age:23} 一条记录
[{name:"lvjing",age:23},{name:"zhaoqing",age:24}]
获取 记录[{},{}]
json可以表达多重对象,,,{}中可以使对象
json和java Object,php,c#
>>ajax
js是交互,,对页面内容获取,设置
ajax 前台(h5+css+js)与后台(维护信息,店小二)数据连通(把前台数据提交到后台,把后台的数据在前台展示) ajax中间传递
js（xmlHttpRequest、xhr对象)推出ajax这个技术，可以把前台（h5+css3+js用户看页面，商品页面） 和后台程序（维护信息，店小二操作页面）连通。 （把前台数据提交后台，把后台返回数据在前台展示）ajax就负责中间传递 ajax把一个用户请求发送到后端（京东），京东后台服务器接收到这个请求request，再去访问后台程序， 后台程序处理，把某个商品的价格信息返回，把返回信息封装成json字符串，ajax拿到返回值， 把它在转换成js对象。success(data)就封装到成功函数的data参数中。页面就可以对data进行解析， 最终把id和p展示在页面上。
ajax请求request->后端->访问后天程序->返回信息封装为json字符串->ajax拿到返回值->转换为js对象
成功获取 success(data) 解析data 信息在页面上展示
>>jQuery.ajax(背过)
https://p.3.cn/prices/mgets?skuIds=J_100003717483
type:GET/POST 请求
url:访问地址 数据存储位置
data:{"skuIds":"J_100003717483"} js对象 数据key:value
contentType:请求类型 application/json;charset=utf-8;
dataType:响应类型 json/jsonp跨域(一个网站访问另一个网站会发生跨境 约束)
success:function(data){
//参数是一个函数，代表网站成功处理并且返回
//data网站后台成功处理后，把结果封装到data对象中，后台返回json字符串，内部转换变成js对象
//JSON浏览器直接支持，JSON.parse(jsonstr)
//注意这个返回data是一个数组还是单个对象
console.log(data)，如果最外层是[]就代表返回是数组，如果最外层返回是{}，就代表是一条记录
items[0] 第一条数据，items[1]。。。
item
}
error:function(e){失败信息}
＞＞＞＞ajax json
>>GET/POST 差异
https://p.3.cn/prices/mgets?skuIds=J_100003717483
手写参数
https://p.3.cn/prices/mgets
自动拼接表单元素 形成串
网站请求的两种方式 HTTP规范
1) GET参数拼接在URL后 参数 第一个使用? 之后的使用&
jdbc:mysql://localhost:3306/mysql-db?charset=utf8&severTimezone=Asia/Shanghai
2) POST 参数不能直接在浏览器输入,使用form,搜集表单元素(input/select)
形成一个串,
get手写 form自己拼接
ajax
data参数
>>script脚本
head body中 body后 html外
边解释边执行,上到下 左到右
先后加载顺序
按钮 先加载按钮 在加载按钮的操作 script放在定义按钮后
把script放在引用页面元素之后
jquery ready() js构建完动漫树后触发
＞＞jQuery ready()
$().reasy(匿名函数)
$(匿名函数)
$().reasy(function(){})
$(function(){})
>>Vue
前端框架,级别很高
hello vue
第三方技术 js文件 引入
自己的语法 new Vue()对象
div id="app" vue操作区域进行数据渲染
# 2021-02-18
### vue
特点:数据驱动,组件化
是一套渐进式的框架,使用必须是全套
五个部分*************************
>>>开发vue页面步骤:
1. 单独导入vue.js
2. 按vue的语法结构写代码,少量api new vue()
3. body中加一个div,所有内容要写在这个div中,id="app"
挂载点el 差值表达式 数据data
差值表达式:两个大括号括起来值必须在data中进行定义，就可以访问，这个写法插值表达式
div id="app" {{msg}}
new Vue({el:"#app",data:{msg:"hello lvjing"}});
View ViewModel Model MVVM框架(Vue)
api分水岭,死的(只是包装了)
框架中有思想
>>创建vue文件模板
新建-自定义模板.复制要使用的模板
>>>双向绑定 View Model
input type="text" id="address" v-model="address"
使用指令v-model在input中操纵数据,可以改变view中的值
vue
1.操纵view model随之变化
2.操纵model view也会变化
>>data 三种形式
1.对象 data:{msg:"lvjing"}
2.函数 data:function(){return {msg:"lvjing"}}
3.es6(类似函数) data(){return {msg:"lvjing"}}
>>调试错误
f12 浏览器调试窗口 console(js,vue错误信息)可以看到第几行错误
SyntaxError 语法错误
二分法处理错误, 通过运行各部分代码查找 错误代码区域,定位到错误
>>函数
methods:{say:function(){}}
>>按钮中调用方法
>>git 克隆
远程仓库复制到本地
一般是克隆别人的,看代码 克隆项目组
本地备份
命令
git clone 仓库地址
在要存放的本地目录下 git bash 执行
git clone https://gitee.com/nutony/res.git
>>>网页小技巧
写过JSP页面，java代码和html交融，混杂一起，
怎么把java代码转换html一些内容 技术JSTL TAG库，起到翻译作用。
vue通过指令把vue数据翻译成html代码
v-model,v-on:click(@click)
v-cloak,v-show,v-if,v-else,v-else-if
v-for,v-on,v-bind
>>v-cloak
页面的选择器,有属性就执行样式
特殊效果,屏幕页面晃动
f12-network-online slow 3G
差值表达式页面有明显晃动,加载中会显示原来的对象内容(因此晃动)
先加载页面,加载vue对象,才开始解析,最终替换页面中的差值表达式(渲染)
解决:加一个样式,把页面值div id=app 整个div藏起来, display:none; 等Vue加载完毕，在把它展示！
[v-cloak]{display:none;} 这个指令页面选择器，有这个属性就执行这个样式
div v-cloak
>>v-show,v-if,v-else,v-else-if
是否成年,age
v-show 展示与不展示,条件成立的展示,不成立的隐藏了
v-if 不成立的条件直接去掉了
性能 频繁之后show性能高
分支结构 if else 只经过条件成立的语句
>>v-for
类似于java中的foreach循环,in后面就是集合,o代码每次遍历的当前值
o,i o代表当前行内容,i代表当前索引值,注意顺序,vue定死顺序
v-for="o in hobby" {{o}}
v-for="o.i in hobby" {{i}}-{{o}}
>>v-on
**button 事件
v-on:click="show"
v-on:click="show()"
@click="show"
>>v-bind
当插值表达式用作属性值时,v-bind可以使 插值表达式作为vue变量
<a :href="site.url">{{site.name}}</a>
>>v-text v-html
v-text 纯文本输出
v-html 会翻译data中数据的html标签
div.innerText div.innerHtml
>> 指令没有晃动,指令配合页面标签
### vue渐进式框架
1.只引入vue.js
2.vue.js+vue项目(加载 依赖包,插件(直接拿别人的来用))
组织第三方插件,规范 npm+webpack 打包工具 nodejs
项目,结构 约束(用的别人的东西, 把别人的组织起来)
>>步骤
nodejs web中间件 翻译解析开发语言 js/jq/vue 容器 小项目
tomcat web中间件 翻译解析java springmvc+spring+mybaits 大项目
nodejs是基于chrome浏览器内核 解析js最快服务
需要js库 引入 npm管理第三方js库(jq.vue.element-ui)
webpack 小项目拷贝 大项目(环境) 打包文件
nodejs解析 npm管理js库 webpack打包
>>vue-cli 脚手架
1.验证nodejs node -v
2.npm 镜像 阿里的
npm切换到淘宝镜像方式:
npm config set registry https://registry.npm.taobao.org
查看:
npm config get registry
3.安装脚手架
npm install vue-cli -g #安装vue-cli脚手架
install 安装 vue-cli (vue-client缩写 vue客户端 vue.js) -g 全局安装
npm uninstall vue-cli -g #卸载vue-cli脚手架
vue # 展示帮助提示
vue --version # 2.9.6
vue –V
where vue #vue安装在哪里
如果命令出错Err，不是警告warn，重新执行命令（网络不稳定）
如果报权限不足，安装nodejs时要以管理员账号来安装
>>安装vue项目
1.找个目录
->vue init webpack jt 此处项目名不能使用大写
创建jt项目,
Project Name 项目名称，默认，回车
Project description 默认，回车
Author chenzs 作者
vue build 默认，回车
install vue-router? 是否安装router，输入：y 安装
Use ESLint to lint your code? 规则引擎，过于严苛，输入：n
Setup unit tests? 单元测试，输入：n
Setup e2e tests with Nightwatch(Y/n)? 测试框架Nightwatch，输入：n
Should we run 'npm install' for
you after the project has been created? 默认npm，回车
成功后 启动服务
->cd jt
->npm run dev 进入京淘项目
Your application is running here: http://localhost:8080
http://localhost:8080 访问
>>>>>>>>>安装执行代码
安装nodejs
node -v
npm config set registry https://registry.npm.taobao.org
npm config get registry
npm install vue-cli -g
vue --version
vue init webpack jt
cd jt
npm run dev
最后:Your application is running here: http://localhost:8080
>>>>>>>>vue项目结构
node_modules 临时目录,自己管理,第三方js 依赖
src 源文件目录 *.js *.vue
static 静态资源 vue文件规定文件存放位置,图片 css js
index.html 首页 localhost:8080
package.Json 配置文件 全局配置 index.html 调用哪些文件
webpack.dev.conf.js 全局配置文件
src/main.js
new Vue({
el: '#app', 挂载点
router, 路由
components: { App }, 组件(省略后缀) APP.vue
template: '<App/>' 模板
})
src/App.vue
三个结构
<template>html+vue(动态网站) view</template>
<script>vue js 操作页面数据 model</script>
<style>组件的独立修饰</style>
默认集成子组件
自己写的所有组件在App.vue中
src/components/HellowWorld.vue
>>>>>>>>>总结
看不到底层在做什么
>>Vue
本质是就是封装js，jQuery，在代码中已经看不见了
坏处：不知道底层在干嘛？不够透，在大型项目中，不可能所有细节都自己做，提倡“拿来主义”
ssm，都是拿来别人的东西spring拿mybatis，springcloud微服务，网飞，阿里
好处：Vue数据驱动，屏蔽底层js的api，无需去记忆这些晦涩难懂难记东西，只需要操纵数据！
减轻开发者工作量，为做大型项目
>> Vue和js、jquery细节差异
获取页面上输入框
```<input type="text" id="address" v-model="address"/> ```
js.api documet.getElementById("address").value = "123";
jQuery.api $("#address").val("123"); 标新立异，创造新的东西，额外记忆
vm.data.address
address= "123";
>>Vue中有什么东西？
1）结构：死的结构
View 视图，页面展示内容：a. 插值表达式{{msg}}、b. 标签上加指令 <p v-for=""></p>
Model 模型，数据
ViewModel 视图模型，把视图和数据绑定起来，Vue对象，内部完成解析过程
衍生出：MVVM框架
2）
View， 规定页面body中加div，默认修饰app，习惯，Vue对其进行解析，动态网站
Model，数据来源：el（element）挂载点、data数据、methods函数
>>Vue 提供很多指令，形成动态网站
v-model 双向绑定
v-show、v-if、v-else-if、v-else，判断语句
v-for，循环语句
v-on，@click，单击事件
v-bind，:href="url"，url不是字符串，而是数据的变量名称
v-text、v-html，text纯文本，里面有html标签不解析，html会解析标签
>>Vue是渐进框架
1）简单的vue，直接引入vue.js
2）大型项目vue项目，
a. nodejs(web中间件，启动服务)/
b. npm 依赖js插件
c. webpack打包，编译过程（保存、重新启动）压缩
d. vue-cli 脚手架
## 任务：
1、搭建环境
2、修改HelloWorld.vue，页面展现”京淘电商平台“，改成红色
# 2021-02-19
js 实现 浏览器增强交互
jquery 简化,优化 js代码 本质是js之上,小的格局变化,根本没变 dom树
Anglur 网络 TCP/IP分层协议 后端 j2ee mvc 三大框架
Anglur开了框架的先河，分层概念TCP/IP分层7层协议（网络，硬件+软件），j2ee框架分层概念，MVC架构，三大框架，微服务
大前端 reactjs vuejs
框架 : 已经实现了基础的架构, 开发人员的代码量减少 **能更加注重业务实现
在框架的基础上实现自己的业务,无需更细致的写代码
现在关注是 框架如何实现的功能
框架思想应用,渐进式,数据驱动(data, 插值表达式, 标签的属性),组件化(代码复用)
自己做框架 别人是如何实现的 ()()()把vue学透 怎么做到的
>>> vue.js 渐进式
vue.js, 组件化, npm管理依赖(js库), webpack打包工具
>>> 数据驱动
框架 存在约束.
文件名 目录components/Item.vue App.vue引入组件
按规定写好的 自动连入整体项目 约定大于配置
数据驱动 学习的关注点 js的api -> 结构(代码放在哪,语法结构)
MVVM框架
写数据就放模型Model的位置，写页面展示放视图View的位置，剩下事情VM去做（vue它连接模型和视图，渲染）。
>>> vue实现机制
Vue对象结构
el挂载点, data数据区, methods函数区
注意: data中数据写法, methods中函数写法
>>> Vue数据展示
js/jq 操作dom树,更新页面
双向绑定: Vue, 页面改变 <--> 数据改变
1)插值表达式: {{msg}} Vue底层遍历{{msg}} , 在数据区查找对应的变量, 使用变量值替换
2)v-指令集: vue编译之后把对应的指令翻译成html语句,
v-show,v-if,v-for, ....
#### Vue项目 工程 ########### 很重要
1. 自己添加组件 图书: title,sellpoint,price,intro
2. 商品管理 新增,修改,删除,列表 CRUD
3. element-ui
>>>>写自己的组件
1.定义组件: src/compinents/Item.vue
2.注册组件: App.vue 在其中引入Item.vue
3.使用组件: <Item></Item> 标签 Vue就会翻译为<template>中的内容
export default{} 只供本组件使用
>>引入element-ui
有一系列的组件ui
布局 表单 表格 对话框 输入框 文本域
业务逻辑
新增 修改 删除 列表 如何联系起来
数据使用数据库 对象数组
>>>
1.定义组件: src/compinents/Item.vue view data methods
2.注册组件: App.vue
script 在其中引入Item.vue
导入 import Item from "./components/Item.vue";
components选项, App.vue 根组件下有哪些组件
export default { components:{Item} }
3.使用组件: App.vue template div <Item></Item>
>>> 引入element-ui
安装
https://element.eleme.cn/#/zh-CN 组件
npm管理第三方插件 (组件)
安装 npm i element-ui -S
i 安装install element-ui 插件名 -S 安装生产环境
-D 开发环境
引入项目
修改main.js 组件导入方式 全局(其他也可以调用)
import ElementUI from 'element-ui'; 引入ui
import 'element-ui/lib/theme-chalk/index.css'; 引入css
Vue.use(ElementUI); 使用组件
>>>>栅格设计
为了适合pc端和手机端 屏幕分为24列
<el-row></el-row> 布局标签
>>>>>>>>> jt/src/components/Item.vue
el-row 布局标签 为页面中的行 24列
>-* 在页面中 设置添加按钮
el-button
>-* 设置表格展示内容
table column列
在data中设置表格已有数据内容 数组对象 list:[{},{},{}]
页面中设置 操作, 修改 删除 按钮
>-* 添加按钮 弹出对话框
设置对话框
按钮功能 弹出对话框 toadd
给添加按钮设置点击事件
>-* 对话框
内容
按钮 确认 save 取消
dialogVisible (用来显示或关闭对话框) data中设置数据默认为default不显示
:visible :visible.sync="dialogVisible" 后面的是个变量
用来显示和隐藏一个弹框
>-* form表单
添加数据
弹出对话框 中 设置form表单(对应页面数据内容) 输入内容
设置默认数据 m
:model="m" 绑定
>-* 点击 确认 按钮 保存输入数据到页面中
设置确认按钮事件 方法save
新增 修改 删除 splice
同时关闭对话框
>>>>数组新增,修改,删除
splice() index 索引(在哪里改动) howmany 删除几个 item 添加的元素(可变元素)
list.splice(0,0,"lv") 新增
list.splice(2,1,"jing") 修改
list.splice(2,1) 删除
在表单中输入内容
点击确认 数据添加到页面中,同时关闭对话框
>-* 删除
每行遍历 有索引值index
Vue插槽slot-scope 提供变量s
s.$index 代表当前行索引值
s.row 代表当前行数据 (list[2])
list.splice(index,1)
template slot-scope="s" @click="del(s.$index)"
设置del方法删除数据
>-*修改
1.获取当前行index 获取当前行数据row 把m数据去变量 this.m=row
2.对话框 回显 form表单与回显对话框中的数据关联 :model="m"
3.点击确定按钮，save方法，加参数具体值m，修改页面值，它通过双向绑定，就改变数据区m中属性 保存这个值，splic函数
4.设置一个变量，isUpdate，是否修改
新增：isUpdate=false；修改：isUpdate=true
新增和修改是公用save方法，通过这个参数调用不同splice，if判断
修改按钮设置点击事件 方法toupdate 传参s.$index,s.row
定义方法toupdate
直接把临时数据m设置为 row
打开对话框 显示的内容是当前行的数据
副作用
**点击确认 是新增 **修改form表单时 table中的内容也变 ***字体不一样
**点击确认 是新增
解决方法:
设置一个变量，isUpdate，是否修改
新增：isUpdate=false；修改：isUpdate=true
新增和修改是公用save方法，通过这个参数调用不同splice，if判断
全局变量 index 在点击确认按钮时,splice的索引值
**修改form表单时 table中的内容也变
解决方法:
巧妙实现，利用js提供JSON方法实现！
JSON js子集，浏览器直接支持语法
JSON.parse() //把json字符串转换js对象
JSON.stringify() //把js对象转换json字符串
this.m = row js对象 this.m = JSON.parse(JSON.stringify(row));
//经过2次转换，创建新对象 new Object() 不同的引用，
修改form表单框中内容，this.m，这时和页面row就没有关系
**字体不一样
style中设置 textarea font-family:"微软雅黑";
>>>>>
export default{
name:"Item",
data(){},
methods:{}
}
>>>>>SPA
现在主流方式单页面SPA，Vue框架推崇单页面，不用刷新
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
