vue生命周期、过滤器、自定义指令、混入及扩展
生命周期与钩子函数生命周期
vue实例从创建到销毁的过程 会有很多个阶段 每个阶段都会自动执行一些函数(生命周期的钩子函数)
钩子函数
在程序运行的特定阶段内被自动调用的函数
生命周期的钩子函数
有4组 8个 可以帮助我们开发者 在项目的某些特定阶段自动执行一些逻辑(页面加载完自动发送数据请求)
实例创建
实例创建之前—beforeCreate
实例创建之后—created
模板渲染
模板渲染之前—beforeMount
模板渲染之后—mounted
数据更新
数据更新之前—beforeUpdate
数据更新之后—updated
实例销毁
实例销毁之前—beforeDestory
实例销毁之后—destoryed
vue初次加载执行那些生命周期的钩子函数?
执行实例创建前后 (要说英文) 模板渲染前后(要说英文)
什么是生命周期的钩子函数?
vue实例从创建到销毁的过程 会有很多个阶段 每个阶段都会自动执行一些函数 那么这些自动执行的函数 就是生命周期的钩子函数
生命周期几个阶段?
4个阶段 8个钩子 (最好把着8个钩子挨个说一遍)
dom渲染在那个阶段内执行完毕? ...
vue脚手架的使用及组件的定义使用
vue脚手架创建:1.下载脚手架 npm install -g @vue/cli@4
2.查看版本 vue –version
上面的两步 除非你重装系统 或者重装node 以后都不需要执行了
3.需要把cmd的路径切换到 指定文件夹下
4.创建项目 vue create 项目名
5.把cmd的路径切换到你的项目下
6 启动项目npm run serve
项目怎么启动
我们默认下载的项目 启动命令式npm run serve 但是去公司也是这个样启动吗?
1.去项目下的package.json文件中
2.找到scripts节点进行配置 启动命令就变成 npm run 你配置的单词
注意 只有一个可以不加run 就是start
注意 千万不要拿到项目就直接启动 因为有可能起动不起来 你还要确定项目的依赖文件是否存在 如果不存在
那么你需要cd到这个项目路径下 使用 npm install 进行依赖的下载 项目会根据有你package.json的记录重新下载你的依赖
拿到空项目怎么办?
1.删掉components ...
vue指令和监听与计算属性及修饰符
指令就是在vue中带有v-前缀的html特殊属性
语法:
写在html的开标签中 使用v-指令=”指令值”
作用:
在vue扩展了标签的功能
v-model作用:在表单元素上进行数据的双向绑定
语法:v-model=”变量”
1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D ...
vue.js初体验
js框架
用来简化了我们对项目业务(需求 实际的一些功能)操作的复杂度(封装了很多现成的一些与业务无关的代码块)方便我们把数据插入到页面
ui框架
用来帮助我们写页面的
什么是html的属性?
属性是写在html的开标签中 使用属性=“属性值”的语法 属性用来扩展html标签的功能 让标签的功能更加强大与灵活
vue.js是现今最为主流的前端MVVM框架
作者:尤雨溪
vue是一套用于构建用户界面的 渐进式 和 自低向上增量开发的 框架
渐进式 :每个框架都有一些自己的特点 这些特点会对开发者有一定的要求 但是要求有强有弱 这些要求可以这叫做主张 vue可以在整个项目中都使用 也可以在项目的局部使用 因为vue只会对使用它的范围生效 没有使用的不会生效 那么这样一来 vue就可以非常方便的与现有的第三方框架进行整合使用
自底向上增量开发:一种开发模式 先写基本的页面 然后再里面逐步的添加一个个功能 由简单到繁琐的开发流程
helloworld
1.下载相关依赖包 需要使用npm管理
(1-1)初始化 npm init -y
(1-2) ...
ES6新特新
ES6新特新letlet等价于var,都是用来定义变量的
12let a = 123;console.log(a);
1,所有的变量必须先定义后使用
2,let声明的变量不能重复定义
3,块级作用域
1234567891011121314151617{ var a = 123; let a = 123;}console.log(a);let oLis = document.querySelectorAll("li");for (var i = 0; i < oLis.length; i++) { oLis[i].index = i; oLis[i].onclick = function() { console.log(this.index); }}for (let i = 0; i < oLis.length; i++) { oLis[i].onclick = function() { console.log(i); ...
ajax与promise及本地存储
AjaxAjax的概念及优势
什么是Ajax:
*Ajax(AsynchronousJavaScript And XML),(异步 JavaScript 和 XML),中文名:阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
*Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
*前端通过与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
为什么要使用Ajax
* 更自然、流畅的用户体验,对用户的操作即时响应
* 在不中断用户操作的情况下与Web服务器进行通信
* 更灵敏的响应用户访问,实现近似于桌面应用程序的交互效果
* 通过局部更新页面降低网络流量,提高网络的使用效率
同步与异步
同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是处于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。
异步,执行完函数或方法后,不必阻塞性地 ...
javaScript函数对象、继承、深浅拷贝、闭包
函数对象let fun2 = new Function([函数的参数用逗号分开],函数体);
定义函数就会new function();
1234567let fun2 = new Function("console.log('yingyingying')"); fun2(); let fun3 = new Function("a", "b", "console.log(a+b)");fun3(3, 5);
函数定义的三种方式:
函数声明
12<1>function fun(){}
函数表达式(匿名函数)
12<2>let fun = function() {}
对象的方式
<3>let fun2 = new Function([函数的参数用逗号分开],函数体);
12let fun2 = new Function("console.log('yingyin ...
javaScript常见事件
javaScript常见的鼠标键盘事件:
事件的三要素:元素,事件类型 [事件对象]
事件对象的作用:携带着相关事件类型的所有属性和方法
鼠标事件对象的属性
page:针对于整个页面的左顶点(常用)
console.log(“page:” + e.pageX, e.pageY);
client:针对于可视窗口的左顶点9
console.log(“client:” + e.clientX, e.clientY);
offset:针对于父级元素的左顶点(用于拖拽)
console.log(“offset:” + e.offsetX, e.offsetY);
当浏览器没有滚动条时(可视窗口与文档窗口重合),pageX与clientX相等,pageX与clientY相等,如果出现下拉滚动条并向下拉动滚动条,文档窗口向上滚动,如果出现左右滑动的滚动条并向右拉动滚动条,文档窗口向左滚动,在文档窗口滚动的情况下,pageX>=clientX, pageY>=clientY, x = clientX, y = clientY,
通常情况下,键盘事 ...
javaScript数组和对象及字符串(API)
数组
内置基本类型和引用类型在内存中存储的方式:
内置基本类型:只有一块空间,栈空间,用来存储数值
引用类型:有两块空间:一块栈空间,存储的是堆空间的地址
一块堆空间,存储的是数据的本身
栈:自动分配内存空间,系统自动释放,里面存放的是基本类型的值和引用类型的地址
堆:动态分配的内存,大小不定,也不会自动释放。里面存放引用类型的值。
数组的定义:
1,构造函数
new:在堆上开辟空间的关键字
Array:数组的类型
12var arr = new Array(1, 2, 33, 44, 5, "嘿嘿");console.log(arr);
2,字面量
12var arr = [6,5,7,4,8];console.log(arr);
数组元素的访问:
数组名[下标];
下标:基于0,连续的整数
可以为常量和变量
12console.log(arr[0]);console.log(arr[1]);
数组的遍历:对数组每个元素操作的过程
数组元素的个数,也称为长度 ar ...
javaScript函数及变量提升
概念:函数是具有包裹性的最小的功能模块
作用:程序员:提高代码的复用性
业务的角度:协同开发,便于维护
函数的定义:一个功能的创造
function 标识符(参数列表)//函数头部 {
函数体
}
function:告知编译器后面的标识符是一个函数名
标识符:代表函数名,必须满足标识符命名规则
函数的两种声明方式
1,利用函数关键字自定义函数(命名函数)
1234function fun() {}fun()
2,函数表达式(匿名函数)
12345var 变量名 = function(){ };var fun = function() { };fun();
a,函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
b,函数表达式也可以进行传递
12345678参数列表:无参 function fun() { console.log("heihei"); }有参:每两个参数间用逗号隔开 funct ...