前端技术栈和Vue学习总结
前端技术栈+Vue笔记
ES6新特性
1.let
1）let声明有严格的局部作用域
此时"console.log("job= "+job)"将报错
{
var name = "zy学习";
let job = "java工程师";
console.log("name= "+name)
console.log("job= "+job)
}
console.log("name2= "+name)
console.log("job= "+job)
2）let只能声明一次
此时业因为let的重复声明
会报错SyntaxError （语法错误）:redeclaration of let num2
//let 只能声明1次
var num1 = 100;
var num1 = 200;
console.log(num1);
let num2 = 100;
let num2 = 200;
console.log(num2);
3）当var变量 定义在后面，不会报错未定义，而是提升变量为undefind。
let变量则不会，会毫不留情的报错
//let不存在变量提升 var存在变量提升
console.log("x=",x);
var x = "tom";
console.log("z=",z);
let z = "zzz";
2.count
1）常量在定义时，需要赋值
//常量在定义时，需要赋值
const PI=3.14;//SyntaxError: missing = in const declaration
console.log("PI= ",PI)
2）常量赋值后不能修改
会报错 invalid assignment to const 'PI'
const PI=3.14;
PI = 3.14159256;
3.解构赋值
3.1 数组解构
1)传统方法
let arr = [1, 2, 3];
//解构（取出数据）：
let x = arr[0], y = arr[1], z = arr[2];
console.log("x= " + x + " ,y= " + y + " ,z= " + z);
2)ES6
let [a,b,c] = arr;
console.log("a= " + a + " ,b= " + b + " ,c= " + c);
let [n1,n2,n3] = [100,200,300];
console.log("n1= " + n1 + " ,n2= " + n2 + " ,n3= " + n3);
3.2 对象解构
注意事项：
1.{name，age}中的name，age 名字要和monster中的对象属性名保持一致
2.使用{ } 不要使用[ ]
3.{name，age}顺序无所谓
1)传统方法
//传统 对象名.属性名
let monster = {name: '牛魔王', age: 880}
console.log(monster.name," ",monster.age)
2)ES6
let {name,age} = monster;
console.log("name= ",name," ",",age= ",age)
console.log("age= ",age," ",",name= ",name)
let {name,age} = {name: '牛魔王', age: 880}
方法的形参对象也可以解构
function f1(name,age){
console.log("f1-name= ",name," ",",f1-age= ",age)
}
f1(monster)
3.3 方法解构
4.模板字符串
注意事项：
1.反引号 ``包裹
2.可作为普通字符串使用
3.可以原生输出代码 (意思是不需要加很多 \n 拼接字符串)
let str1 = `for(int i = 0 ;i <10 ; i++){
System.out.println("i= "+i);
}`;
console.log("str1=", str1)
4.字符串插入变量和表达式，使用${ }
*类似于el表达式
let name = "zy88";
let str2 = `学习=${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `n1+n2=${n1 + n2}`;
console.log("str2=", str2)
console.log("str3=", str3)
console.log("str4=", str4)
5.字符串中调用函数
function sayHi(name) {
return "hi "+name;
}
let name2 = 'tom'
let str5 = `sayHi()返回结果= ${sayHi(name2)}`
console.log("str5=", str5)
5.对象相关新特性
注意事项：
1.自动从上面找到相应变量
2.对象方法简写
1）传统对方法的定义
let monster = {
name:"红孩儿",
age:100,
sayHi:function () {
console.log("信息:name=",this.name,"age=",this.age)
}
}
monster.sayHi();
2)ES6对方法的定义
let monster2 = {
name:"红孩儿~",
age:900,
sayHi() {
console.log("信息:name=",this.name,"age=",this.age)
}
}
3.对象扩展运算符--拷贝
1）传统拷贝
let cat2 = cat;
cat2.name = "大花猫"
console.log("cat=>",cat)
console.log("cat2=>",cat2)
2)ES6深拷贝
let cat2 = {...cat};//深拷贝
cat2.name = "中花猫"
console.log("cat=>",cat)
console.log("cat2=>",cat2)
3)ES6并对象
let monster = {name:"白骨精",age:100}
let car = {brand:"xiaomi",price:149000}
let monster_car = {...monster,...car}
6.箭头函数
1)基本语法：
（参数列表）=> {
函数体...
}
2)注意事项：
1.没有参数或多个参数用括号（ ）括起来，一个参数可以省略括号
2.函数体只有一行语句，并需要返回结果时，可以省略花括号{}，结果自动返回
3）对比传统
a）传统
var f1 = function (n) {
return n * 2;
}
console.log(f1(2))
a）ES6
let f2 = (n) => {
return n * 2;
}
// console.log(f2)
console.log(f2(3))
//简化
let f3 = n => n * 3;
console.log(f3(10))
b)传统
var f1 = function (n,m) {
var res = 0;
for (var i = n; i <=m; i++) {
res += i
}
return res
}
console.log(f1(1,10))
b)ES6
let f2 = (n,m) => {
var res = 0;
for (var i = n; i <=m; i++) {
res += i
}
return res
}
// console.log(f2)
console.log(f2(1,10))
4)箭头函数+解构
- f2传入对象monster
- f2形参时skill，所以根据es6对象解构特性，会把monster对象的skill赋给skill
- 对象解构的前提是形参skill和monster对象属性 skill的属性名保持一致
const monster = {
name:"红孩儿",
age:10000,
skill:['红缨枪','三味真火']
}
//传统解构
function f1(monster) {
console.log("skill=",monster.skill)
}
f1(monster)
//ES6
let f2 = ({skill}) =>{
console.log("skill=",skill);
}
f2(monster)
7.promise
promise的引出
promise是为了解决传统ajax异步调用需要多个操作时，会导致回调函数嵌套引起代码冗余的问题
原生的jquery 对于需要多次异步请求时表现：
<script type="text/javascript">
$.ajax({
url: "data/monster.json",
success(resultData) {
console.log("第一次ajax请求 monster基本信息= ", resultData);
$.ajax({
url: `data/monster_detail_${resultData.id}.json`,
success(resultData) {
console.log("第二次ajax请求 monster详细信息= ", resultData);
},
error(err) {
console.log("出现异常= ", err)
}
})
},
error(err) {
console.log("出现异常= ", err)
}
})
</script>
可以看出代码有非常多的嵌套，很不美观。
使用promise来完成多次ajax请求时表现：
先请求到monster.json
1. 创建Promise对象
2. 构造函数传入一个箭头函数
3. (resolve, reject) 参数列表resolve: 如果请求成功, 调用resolve函数
4. 如果请求失败, 调用reject函数
5. 箭头函数体, 仍然是通过jquery发出ajax
<script type="text/javascript">
let p = new Promise((resolve, reject) => {
//发出ajax
$.ajax({
url: "data/monster.json",
success(resultData) {//成功的回调函数
console.log("promise发出的第1次ajax monster基本信息=", resultData);
resolve(resultData);
},
error(err) {
//console.log("promise 1发出的异步请求异常=", err);
reject(err);
}
})
})
//这里我们可以继续编写请求成功后的业务
p.then((resultData) => {
//这里我们可以继续发出请求
//console.log("p.then 得到 resultData", resultData);
return new Promise((resolve, reject) => {
$.ajax({
url:`data/monster_detail_${resultData.id}.json`,
success(resultData) { //第2次ajax请求成功,回调函数
console.log("第2次ajax请求 monster的详细信息=", resultData);
//继续进行下一次的请求
resolve(resultData);
},
error(err) { //第2次ajax请求失败,回调函数
//console.log("promise2 发出的异步请求异常=", err);
reject(err);
}
})
})
}).then((resultData) => {
console.log("p.then().then(), resultData", resultData)
//即可以在这里发出第3次ajax请求=》 获取该妖怪的女友
return new Promise((resolve, reject) => {
$.ajax({
url: `data/monster_gf_${resultData.gfid}.json`,
success(resultData) { //第3次ajax请求成功,回调函数
console.log("第3次ajax请求 monster女友的详细信息=", resultData);
//继续进行下一次的请求
//resolve(resultData);
},
error(err) { //第2次ajax请求失败,回调函数
//console.log("promise2 发出的异步请求异常=", err);
//reject(err);
}
})
})
}).catch((err) => { //这里可以对多次ajax请求的异常进行处理
console.log("promise异步请求异常=", err);
})
</script>
使用了promise后 将传统的嵌套模式，改成了链式调用。
但代码依旧是否冗余，因此我们可以抽取相同的部分。
promise 代码优化重排
首先我们可以抽取一个工具方法
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success(resultData) {
resolve(resultData);
},
error(err) {
reject(err);
}
}
)
})
}
之后调用此方法完成业务即可
get("data/monster.json").then((resultData) => {
//第1次ajax请求成功后的处理代码
console.log("第1次ajax请求返回数据=", resultData);
return get(`data/monster_detail_${resultData.id}.json`);
}).then((resultData) => {
//第2次ajax请求成功后的处理代码
console.log("第2次ajax请求返回数据=", resultData);
//return get(`data/monster_detail_${resultData.id}.json`);
return get(`data/monster_gf_${resultData.gfid}.json`);
}).then((resultData) => {
//第3次ajax请求成功后的处理代码
console.log("第3次ajax请求返回数据=", resultData);
//继续..
}).catch((err) => {
console.log("promise请求异常=", err);
})
8.模块化编程
- 传统非模块化开发有如下的缺点：(1)命名冲突(2)文件依赖[代码演示]
- Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
- Javascript 使用"模块"（module）的概念来实现模块化编程, 解决非模块化编程问题
模块化编程分类
1.CommonJS 模块化规范/ES5 的写法
2.ES6 模块化规范
CommonJS 模块化规范/ES5 的写法
规则
-
每个js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，
都是私有的，对其他js 文件不可见 -
CommonJS 使用module.exports={} / exports={} 导出模块, 使用let/const 名称=
require("xx.js") 导入模块
图解
代码
这是 "function.js"：
//这是function.js：
//定义对象，变量，常量，函数
const sum = function (a, b) {
return parseInt(a) + parseInt(b);
}
const sub = function (a, b) {
return parseInt(a) - parseInt(b);
}
let name = "zy学习";
const PI = 3.14;
const monster = {
name:"牛魔王",
age:500,
hi(){
console.log("Hi,i am 牛魔王~")
}
}
//导出
module.exports = {
sum:sum,
sub,sub,
myName,name
}
这是 "use.js"：
//导入
const m = require("./function")
//使用
console.log(m.sum(100,200))
console.log(m.sub(120,60))
console.log(m.myName)
ES6 模块化规范 写法
规则
1、ES6 使用(1)export {名称/对象/函数/变量/常量} (2) export 定义= (3) export default {}
导出模块
2、使用import {} from "xx.js" / import 名称form "xx.js" 导入模块
图解
代码
导出：
const cat = {
name:"小白",
age:3,
cry(){
console.log("小猫喵喵叫~")
}
}
const dog = {
name:"大黄",
age:5,
hi(){
console.log("大黄 对你说 hi~")
}
}
//1.使用批量导出
export {
cat,
dog
}
//2.创建时直接导出
export const cat = {
name:"小白",
age:3,
cay(){
console.log("小猫喵喵叫~")
}
}
const dog = {
name:"大黄",
age:5,
hi(){
console.log("大黄 对你说 hi~")
}
}
//3.默认方式导出
export default {
cat: {
name: "小白",
age: 3,
cay() {
console.log("小猫喵喵叫~")
}
},
dog: {
name: "大黄",
age: 5,
hi() {
console.log("大黄 对你说 hi~")
}
}
}
导入
//1
import {cat,dog} from "./hspcommon";
cat.cry();
dog.hi()
//2.
import {cat} from "/./hspcommon2"
cat.name
//3.
import m from "./hspcommon3"
m.cat.cay()
Vue
基本介绍
- Vue 是一个前端框架, 易于构建用户界面
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合
- 支持和其它类库结合使用
- 开发复杂的单页应用非常方便
- Vue 是Vue.js 的简称
MVVM思想
- M∶即Model，模型，包括数据和一些基本操作
- V∶即View，视图，页面渲染结果
- VM∶即View-Model，模型与视图间的双向操作(无需开发人员干涉)
- 在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM 操作Model
渲染到View 中。而后当用户操作视图，我们还需要通过DOM获取View 中的数据，
然后同步到Model 中。 - 而MVVM中的VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心
Model 和View 之间是如何互相影响的 - 只要我们Model 发生了改变，View上自然就会表现出来
- 当用户修改了View，Model 中的数据也会跟着改变
- 结果：把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上, 大
大提高开发效率
Vue语法
插值表达式
- {{message}} : 插值表达式
- message 就是从model 的data 数据池来设置
- 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
, 如果没有匹配上, 就是输出空
//
欢迎你{{message}}-{{name}}
let vm = new Vue({
el: "#app", //创建的vue 实例挂载到id=app 的div
data: { //data{} 表示数据池(model 的有了数据), 有很多数据,以k-v 形式设置(根据业务
需要来设置)
message: "Hello-Vue!",
name:"zy"
}
})
数据单向渲染
- v-bind 指令可以完成基本数据渲染/绑定
- v-bind 简写形式就是一个冒号（:）
1. 使用插值表达式引用 data数据池数据是在标签体内
2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式
3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
//<img v-bind:src="img_src" v-bind:width="img_width">
//<img :src="img_src" :width="img_width">
数据双向渲染
-
v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
-
v-model="hobby.val" 是数据的双向渲染,
- data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
- view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
//<input type="text" v-model="hobby.val"><br/><br/>
事件绑定
- v-on:click 表示我们要给button元素绑定一个click的事件
- 底层仍然是dom处理
- 如果方法不需要传递参数，可以省略()
- v-on:click可以简写@, 但是需要浏览器支持
<button v-on:click="sayHi()">点击输出</button>
<button @click="sayOk">点击输出</button>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "Vue事件处理的案例",
name: "zzz"
},
// 1. 是一个methods属性, 对应的值是对象{}
// 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
// 3. 这里需要小伙伴有js的基础=>java web第4章
methods: {
sayHi() {
console.log("hi, 银角大王~");
},
sayOk() {
console.log("ok, 金角大王~");
}
}
})
修饰符
- 修饰符(Modifiers) 是以（.）指明的后缀，指出某个指令以特殊方式绑定
- 例如，.prevent 修饰符告诉v-on 指令对于触发的事件调用event.preventDefault()即阻
止事件原本的默认行为 - 事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进
行处理
.self 只当在event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为 - 键盘事件的修饰符
比如: 项目经常需要监听一些键盘事件来触发程序的执行，而Vue 中允许在监听的时候添
加关键修饰符
- v-model 的修饰符
比如: 自动过滤用户输入的首尾空格
<button v-on:click.once="onMySubmit">点击一次</button><br/>
<input type="text" v-on:keyup.enter="onMySubmit">
<input type="text" v-on:keyup.down="onMySubmit">
<input type="text" v-model.trim="count">
条件渲染
v-if
<input type="checkbox" v-model="sel">是否同意条款[v-if 实现]
<h1 v-if="sel">你同意条款</h1>
<h1 v-else>你不同意条款</h1>
v-show
<input type="checkbox" v-model="sel">是否同意条款[v-show 实现]
<h1 v-show="sel">你同意条款</h1>
<h1 v-show="!sel">你不同意条款</h1>
v-if VS v-show
- v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
- v-show 机制相对简单, 不管初始条件是什么，元素总是会被渲染，并且只是对CSS 进行切换
- 使用建议：如果要频繁地切换，建议使用v-show ；如果运行时条件很少改变，使用v-if 较好
列表渲染
Vue 提供了v-for 列表循环指令
1、对数组进行遍历
2、用v-for 来遍历一个对象的property
<h1>简单的列表渲染-带索引</h1>
<ul>
<li v-for="(i,index) in 3">{{i}}-{{index}}</li>
</ul>
<table width="400px" border="1px">
<tr v-for="(monster,index) in monsters">
<td>{{index}}</td>
<td>{{monster.id}}</td>
<td>{{monster.name}}</td>
<td>{{monster.age}}</td>
</tr>
</table>
组件化编程
- 组件(Component) 是Vue.js 最强大的功能之一(可以提高复用性[1.界面2.业务处理])
- 组件也是一个Vue实例，也包括∶ data、methods、生命周期函数等
- 组件渲染需要html模板，所以增加了template 属性，值就是HTML 模板
- 对于全局组件，任何vue 实例都可以直接在HTML 中通过组件名称来使用组件
- data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据
全局组件
1、定义一个全局组件, 名称为counter
- {} 表示就是我们的组件相关的内容
- template 指定该组件的界面, 因为会引用到数据池的数据，所以需要是模板字符串
- 要把组件视为一个Vue 实例，也有自己的数据池和methods
- 对于组件，我们的数据池的数据，是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式
- 这时我们达到目前，界面通过template 实现共享,业务处理也复用
- 全局组件是属于所有vue 实例，因此，可以在所有的vue 实例使用
Vue.component("counter", {
template: `<button v-on:click="click()">点击次数= {{count}} 次【全局组件化】</button>`,
data() {//这里需要注意，和原来的方式不一样!!!!
return {
count: 10
}
},
methods: {
click() {
this.count++;
}
}
})
局部组件
- 可以把常用的组件，定义在某个commons.js中 export
- 如果某个页面需要使用， 直接import
const buttonCounter = {//定义一个组件, 组件的名称为 buttonCounter
template: `<button v-on:click="click()">点击次数= {{count}} 次【局部组件化】</button>`,
data() {//这里需要注意，和原来的方式不一样!!!!
return {
count: 10
}
},
methods: {
click() {
this.count++;
}
}
}
//创建Vue实例，必须有
let vm = new Vue({
el: "#app",//Vue实例的挂载点
components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vue
'my_counter': buttonCounter
}
})
vue生命周期&钩子函数
- Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载
DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue 实例的生命周期 - 钩子函数(监听函数): Vue 实例在完整的生命周期过程中(比如设置数据监听、编译模
板、将实例挂载到DOM 、在数据变化时更新DOM 等), 也会运行叫做生命周期钩子的函
数 - 钩子函数的作用就是在某个阶段, 给程序员一个做某些处理的机会
- new Vue()
new 了一个Vue 的实例对象，此时就会进入组件的创建过程。 - Init Events & Lifecycle
初始化组件的事件和生命周期函数 - beforeCreate
组件创建之后遇到的第一个生命周期函数，这个阶段data 和methods 以及dom 结构都未
被初始化，也就是获取不到data 的值，不能调用methods 中的函数 - Init injections & reactivity
这个阶段中, 正在初始化data 和methods 中的方法 - created
- 这个阶段组件的data 和methods 中的方法已初始化结束，可以访问，但是dom 结构未
初始化，页面未渲染 - 在这个阶段，经常会发起Ajax 请求
- 编译模板结构(在内存)
- beforeMount
当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据 - Create vm.$el and replace ‘el’ with it
这一步，再在把内存中渲染好的模板结构替换至真实的dom 结构也就是页面上 - mounted
此时，页面渲染好，用户看到的是真实的页面数据， 生命周期创建阶段完毕，进入到了运
行中的阶段 - 生命周期运行中
10.1 beforeUpdate
当执行此函数，数据池的数据新的，但是页面是旧的
10.2 Virtual DOM re-render and patch
根据最新的data 数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面
上
10.3 updated
页面已经完成了更新，此时，data 数据和页面的数据都是新的 - beforeDestroy
当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的data、methods
数据或方法还可被调用 - Teardown……
注销组件和事件监听 - destroyed
组件已经完成了销毁
Vue Cli脚手架
项目文件结构
Vue 请求页面执行流程
- 整个页面渲染过程中，main.js 是中心，也是连接各个组件，路由器的关键
通过修改成完整的写法， 清晰思路
D:\vue_project\vue_project_quickstart\src\main.js
import Vue from 'vue'
import App from './App' //完整写法是import App from './App.vue'
import router from './router'//完整写法是import router from './router/index.js'
Vue.config.productionTip = false
new Vue({
el: '#app', //这里的#app 是挂到index.html 的<div id="app"></div>
router, //完整写法是router: router, 第二个router 是import router[这里] from './router'
components: {App }, //完整写法是components: { 'App':App } 因为名字相同可以省略'App'
template: '<App/>' //这里的'<App/>' 的App 就是上面components 引入的组件的名字
ElementUI
ElementUI 官网: https://element.eleme.cn/#/zh-CN
ElementUI 是组件库，网站快速成型工具
Axios
- axios 是独立于vue 的一个项目，不是Vue 的一部分
- axios 通常和Vue 一起使用，实现Ajax 操作
- Axios 是一个基于promise 的HTTP 库
<script>
new Vue({
el: "#app",
data: {
msg: "妖怪信息列表",
monsterList: [] //表示妖怪的信息数组
},
methods: {//自定义方法
list() {//发送ajax请求,获取数据 axios
/*
1. axios.get() 表示发出ajax请求
2. http://localhost:63342/axios/data/response.data.json 表示请求的url
要根据实际情况来填写
3. axios发出ajax请求的基本语法
axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
(1) 如果get请求成功就进入到第一个then()
(2) 可以再 第一个then()中继续发出axios的ajax请求
(3) 如果有异常, 会进入到 catch(箭头函数)
4. list在生命周期函数created() 中调用-自己去回顾vue的生命周期函数
*/
axios.get("http://localhost:63342/axios/data/response.data.json")
.then(responseData => {
console.log("responseData= ", responseData)
//使用JSON.stringify(json) 把json对象转成一个字符串,方便观察
console.log("responseData= ", JSON.stringify(responseData));
console.log("responseData.data.data.item= ", responseData.data.data.items)
//将妖怪列表数组信息, 绑定到 data数据池的 monsterList
//要学会看返回的数据格式!!!
this.monsterList = responseData.data.data.items;
//可以再次发出ajax请求
// return axios.get("http://localhost:63342/axios/data/response.data.json")
})
// .then(responseData => {
// console.log("第二次axios发出 ajax请求responseData= ", responseData)
// })
.catch(err => {
console.log("异常=", err)
})
}
},
created() {
this.list();
}
})
</script>
将JSON 对象转成JSON.stringify(response)
-
将JSON 对象转成JSON.stringify(response)
-
格式化输出JSON 字符串，方便观察分析
本文学习内容来自韩顺平老师的课程
仅供个人参考学习