关键词:
文章目录
VUE 基础
MVVM设计
MVVM: 界面View+模型Model+视图模型ViewModel
VUE绑定原理设计
访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知,虚拟DOM树扫描并仅更新受影响的元素
虚拟DOM树分析
虚拟DOM树优点:
(1). 小: 只包含可能变化的元素。
(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码
VUE编程步骤实践
Vue功能3步:
(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下:
通常是
b. 可能变化的元素内容用自定义变量名标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中
绑定与指令应用
(1). 如果元素的内容需要随变量自动变化:
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
强调: 为什么必须加:key=“i”?给每个元素副本添加唯一标识。修改数组中某个元素值时,避免重建整个列表,只需要修改一个DOM元素副本即可!提高修改效率。
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次,之后都不会改变: v-once
优化: 减少虚拟DOM树中元素个数。
(11). 保护内容中的不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model
绑定样式分析(了解):
(1). 需要精确修改某一个css属性,就绑定style:
a. <元素 style=“固定样式” :style="css属性:变量名, …"
data:
变量名:css属性值
... : ...
b. <元素 style=“固定样式” :style=“变量名”
data:
变量名:
css属性名: 属性值,
... : ...
(2). 只要批量修改一个元素的多个css属性就绑定class
a. <元素 class=“固定class” :class="class名:变量名, …"
data:
变量名:true或false,
... : ...
b. <元素 class=“固定class” :class=“变量名”
data:
变量名:
class名:true或false,
... : ...
计算属性应用实践
今后只要根据其他变量的值动态计算出一个属性值就用计算属性:
<元素>计算属性</元素>
new Vue(
el:"#app",
data:...,
methods:...,
computed:
计算属性名()
计算过程
return 计算结果
)
生命周期函数应用
vue生命周期4个阶段 8个钩子函数
(1). 创建(create)
created() ...
beforeMount() ...
(2). 挂载(mount)
mounted() ... 经常在这里发送ajax请求 ...
beforeUpdate() ...
(3). 更新(update)
updated() ...
beforeDestroy() ...
(4). 销毁(destroy)
destroyed() ...
Axios方式的Ajax请求
只要在vue中发送ajax请求,就用axios
axios.defaults.baseURL=“服务器端接口的公共基础地址部分”
Get请求
GET请求:
axios.get(
"服务器端接口地址的相对路径",
params: 参数名: 参数值, ...
).then(result=>
... result.data...
)
Post请求
POST请求:
axios.post(
"服务器端接口地址的相对路径",
"参数名1=参数值1&参数名2=参数值2&..."
).then(result=>
... result.data...
)
强调: 在vue内使用axios,then中必须用箭头函数,保持then内this与外部this一致,都指向当前new Vue()对象
VUE 组件化开发
组件设计
只要希望重用一块独立的功能区域就用组件:
(1). 定义组件
Vue.component(组件标签名
,
template:HTML内容片段
,
data() return 变量 ,
//其余和new Vue()完全相同
)
(2). 在HTML中使用自定义组件
<组件标签名/>或双标记也行
(3). 原理: new Vue()扫描到自定义组件标签,
a.组件的template中的HTML内容代替页面中<组件标签>位置。
b. 并为这个小区域专门创建一个缩微版的vue类型对象。
1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
2). 引入组件对象中的methods等其他内容到当前组件对象副本中
基本步骤
a. 拿到页面先划分功能区域
1). 从上到下,按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件,其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中,并在
运行分析
a. new Vue()扫描
b. 父组件扫描自己内部的template内容,创建并替换子组件
组件类型
a. 根组件: new Vue()
b. 全局组件: Vue.component(…)
c. 子组件: 3步
1). var 子组件对象名=
内容必须符合组件的要求
子组件对象名必须是驼峰命名
2). 父组件对象中:
… …
components 子组件对象名, … ,…
子组件对象名必须是驼峰命名
3). 父组件template中用<子组件标签名/>引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时,要用-分隔多个单词
组件间传参
a. 父组件给子组件
<子组件 :自定义属性名=“父组件变量”>
b. 子组件取:
props:[“自定义属性名”]
结果: 在子组件内,props中的"自定义属性名"与子组件自己data中的变量用法完全相同!
单页应用实践(SPA)
基本步骤
第一步: 先创建唯一完整的HTML页面
1). 包含vue基本的页面结构
<div id="app"> new Vue(el:"#app")
2). 引入所有必要的文件和组件
vue-router.js, 其它页面或组件文件, router.js路由器对象所在文件
3).
第二步: 再为每个页面组件创建独立的文件。每个页面组件其实都是一个子组件
第三步: 创建router.js文件,例如:
1)创建路由字典对象
var routes=[
path:"/", component:首页组件对象名,
path:"/相对路径" , component: 其它页面组件对象名,
path:"*", component: 404页面组件对象
]
2). 创建路由器对象,并将路由字典对象转入路由器对象中
var router=new VueRouter( routes )
3). 将router对象加入到new Vue()中
new Vue( el:"#app", router )
页头等全局组件:
a. 创建独立的文件保存页头组件的内容
b. 使用Vue.component(“my-header”, … )将页头创建为全局组件
c. 在唯一完整的HTML页面中引入页头组件文件
d. 使用页头组件标签: 2种:
1). 如果所有页面都有统一的页头:
就放在唯一完整的html页面中外部上方
2). 如果有的页面有页头,有的页面没有页头:
就只放在需要页头的组件中的template中
路由跳转
a. html中: 文本
b. js中: this.$router.push("/相对路径")
路由传参
a. 修改路由字典:
path:"/相对路径/:自定义参数名", component:页面组件对象, props:true
b. 跳转时:
<router-link to="/相对路径/参数值"
或
this.$router.push("/相对路径/参数值")
c. 下一个页面接:
1). props:[ '自定义参数名' ]
2). 可将"自定义参数名"用作绑定或程序中都行
安装vue脚手架
(1). 设置npm默认使用国内淘宝镜像仓库:
npm config set registry http://registry.npm.taobao.org
备选: npm i -g cnpm --registry=http://registry.npm.taobao.org
(2). 安装可反复生成项目脚手架代码的工具:
npm i -g @vue/cli
备选: cnpm i -g @vue/cli
(3). 启动vue脚手架项目
npm run serve
(4). 打开浏览器,地址栏输入:
http://localhost:8080
脚手架文件夹结构:
(1). 唯一完整的HTML页面: 一分为三:
a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中,head中引入第三方的css和js
b. src/App.vue
1). 下只包含公共的页头组件和
2).
1). import引入App.vue,router,axios,以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;
(2). 为每个页面创建.vue组件文件,都放在src/views文件夹下。每个.vue文件中:
a. 标签内,包含这个页面的HTML内容
b. 中的js内容,和前四天将的是完全一样的写法,绑定,指令,函数,生命周期,axios请求等都一样。前四天怎么用,这里就怎么用。
(3). 路由字典和路由器对象,在src/router/index.js文件中
a. 仅import首页组件对象,不要过早引入其它页面组件
b. 路由字典中首页组件: path:"/", component:首页组件对象
c. 其余页面组件都做成懒加载:
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
(4). 全局组件都放在src/components文件夹下,每个全局组件.vue文件中。
全局组件必须在main.js引入,并用Vue.component()转化,为真正的全局组件,才能在其它组件的HTML中使用。
(5). 运行时, 路由器router对象监视浏览器地址栏路径变化,
查找对应的页面组件内容,先代替App.vue中的,然后main.js再将包含要加载的页面内容的App.vue组件内容,替换到唯一完整的index.html中空
懒加载应用实践
异步延迟加载:
src/router/index.js
//不要import Details from "../views/Details"
const routes=[
...
path:"/details/:lid",
component: () => import(
/* webpackChunkName: "details" */
'../views/Details.vue'
),
props:true
]
彻底懒加载:
项目根目录创建vue.config.js
module.exports=
chainWebpack:config=>
config.plugins.delete("prefetch")
//删除index.html开头的带有prefetch属性的link,不要异步下载暂时不需要的页面组件文件
,
http-proxy方式跨域:
vue.config.js设置
module.exports=
... ,
devServer:
proxy:
'/':
target: `服务器端接口地址公共基础路径`,
changeOrigin: true
main.js
axios.defaults.baseURL="服务器端公共基础路径"
(3).引用 this.axios.get(“/接口地址相对路径”).then(result=>…)
避免组件间样式冲突
(1)方案1
<style scoped>
(2)方案2
<template>
<组件父元素 class="组件名">
</template>
<style>
.组件名>子元素选择器 ...
</style>
watch+事件修饰符+防抖:
(1). 希望变量一变化就自动执行一项操作时:
data()
return 变量: 值
,
watch:
变量()
要执行的操作
(2). 事件修饰符:
@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为
(3). 防抖:
data()
return
... ,
timer:null
,
methods:
查找方法()
if(this.timer!=null)
clearTimeout(this.timer)
this.timer=setTimeout(()=>
正式的查找操作
,等待时间)
插槽技术应用
(1). 只要多个组件拥有相同的结构,只是局部的内容不同,都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是,外壳组件中将来可能变化的位置,用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:
import 外壳组件名 from "./外壳组件.vue"
export default
components: 外壳组件名 ,
...
2). 在其它组件中:
<template>
<外壳组件 :外壳组件所需属性="变量">
<当前组件自有的个性化内容>
</外壳组件>
</template>
(3). 具名插槽:
a. 如果一个外壳组件中,多个部位将来都会被更换,就可用具名插槽
b. 如何:
1). 外壳组件中:
<template>
...公共部分...
<slot name="插槽名1"></slot>
...公共部分...
<slot name="插槽名2"></slot>
...公共部分...
<template>
2). 其它使用外壳组件的组件:
<template>
<外壳组件...>
<template #插槽名1>
第一部分要更换的内容
</template>
...
<template #插槽名2>
第二部分要更换的内容
</template>
</外壳组件>
</template>
Vuex 数据管理
应用场景
今后只要多个组件都需要共用一批数据时,都可用vuex
构成分析(3部分)
state部分:
state: //保存共用的变量
变量:初始值,
... : ...
mutations部分:
mutations: //保存专门修改变量的方法
set变量名(state, 新值)
state.变量名=新值
...
actions部分:
actions: //保存专门先发送ajax请求,再修改变量的方法
方法名(context, 发给服务器的参数值)
axios.get或post(
"接口地址",
发给服务器端的参数值
).then(result=>
...
context.commit("mutations中某个方法名", 新值)
...
)
组件中使用state中的变量
a. import mapState from “vuex”
b. export default
computed:
…mapState([ “state中某变量名”, … ]),
其它计算属性
c. 中可用state中某变量名用于绑定和指令
d. js中可this. state中某变量名来读取变量值
组件中修改state中的变量值
a. import mapMutations from “vuex”
b. export default
methods:
…mapMutations ([ “Mutations中某方法名”, … ]),
其它方法
c. js中可用this. Mutations中某方法名(实参值)修改state中变量值
组件中先发ajax请求再修改state中变量值
a. import mapActions from “vuex”
b. export default
methods:
…mapActions ([ “Actions中某方法名”, … ]),
其它方法
c. js中可用this. Actions中某方法名(实参值)发送ajax请求并修改state中变量值。
TypeScript 基本语法
变量:
var或let或const 变量名:数据类型=值;
函数:
(1).定义:
function 函数名(形参:数据类型, …):返回值类型
… …
(2). 不确定参数个数:
a. 单个参数不确定有没有
function 函数名(形参1:数据类型, 形参2?:数据类型)...
或
function 函数名(形参1: 数据类型, 形参2:数据类型=默认值)...
b. 多个参数不确定有没有
function 函数名(形参1:数据类型, ...形参2:数据类型[])...
(3). 重载:
a. 先定义空的函数声明,列举所有重载的可能:
function 函数名():返回值类型;
function 函数名(形参1: 数据类型):返回值类型;
function 函数名(形参1: 数据类型, 形参2:数据类型):返回值类型;
b. 正式实现功能的函数:
function 函数名()
根据arguments中的元素个数,决定具体执行何种逻辑
class 新规定
(1). class 类型名 //必须提前声明属性,才能使用
属性1: 数据类型=初始值
属性2: 数据类型=初始值
...
//构造函数必须定义数据类型
constructor(形参1:数据类型, 形参2:数据类型,...)
this.属性1=形参1;
this.属性2=形参2;
...
/*方法定义...*/
(2). 访问修饰符: 今后,只要想控制一个class中属性的使用范围时。
class 父
public 公有属性:数据类型=值
protected 受保护的属性:数据类型=值
private 私有属性:数据类型=值
父的函数()
以上三种属性都能用
class 子 extends 父
子的函数()
只能用父的公有属性和父的受保护的属性
不能用父的私有属性
除父子class以外的程序区域:
只能用父class的对象的公有属性
(3). 接口: 保证开发人员按照要求实现类的成员
a. 先定义接口:
interface I接口名
属性名:数据类型
...
方法名(形参:数据类型, ...):返回值类型;
b. 定义class实现接口的要求:
class 类型名 implements I接口名
属性名:数据类型=值
...
方法名(形参:数据类型, ...):返回值类型
方法实现
模块化开发:
(1). 模块中只抛出一个东西:
export default 一个东西
import 别名 from "相对路径"
(2). 模块中同时抛出多个东西:
export 多个东西用逗号分隔
import 想要的个别东西用逗号分隔 from "相对路径"
Vue3 新特性介绍
原理
绑定原理:ES6 Proxy代理对象+虚拟DOM树
ES6 Proxy代理对象:
新生成的代理对象 = new Proxy(要保护或监视的原对象,
//当有人试图获取数组中任何一个元素值时自动触发
get(当前对象, 属性名)
console.log(`有人试图读取arr对象的$属性名成员`)
return 当前对象[属性名];
,
//当有人试图修改数组中任何一个元素值时自动触发
set(当前对象, 属性名, 新值)
console.log(`有人试图修改arr对象的$属性名成员`)
当前对象[属性名] = 新值;
return true; //必须: 返回修改成功!
);
//今后,都使用新代理对象,代替使用原对象。但是用法上和使用普通对象完全一样!
main.ts 中实践
a. 默认:
createApp(App).use(store).use(router).mount('#app’)
b. 全局组件:
import 组件对象 from “组件文件相对路径”
var app= createApp(App);
app.component('组件标签名', 组件对象名)
app..use(store).use(router).mount('#app’)
c. 全局指令:
app.directive ("my-focus",
mounted(DOM元素)
DOM操作
)
d. axios: //axios对象是单例模式,整个项目中只有一个axios对象,哪里使用都一样。
import axios from “axios”
axios.defaults.baseURL=”服务器端接口基础路径”
//单例模式,不用放到原型对象中,也能在任意组件内引用——Vue2也可以这样用。
页面/组件
a. 里和
import defineComponent, ref, reactive, toRefs, watch, computed, onMounted from 'vue’;
import axios from “axios” //axios对象是单例模式,整个项目中只有一个axios对象,哪里使用都一样。
import 子组件对象 from “子组件相对路径”
export default defineComponent(
components: 子组件对象 ,
directives:
“自定义指令名”:
mounted(DOM元素)
DOM操作
,
setup() //
const data=reactive(
界面所需变量
);
//专门解构原始类型的变量
let 原始类型的变量, … = toRefs(data);
//专门解构引用类型的变量
let 引用类型的变量, ... = data;
const methods=
界面所需方法() … 使用data中变量,不用加this!但要加.value才能用
计算属性:computed(()=> //vue3中没有过滤器了,计算属性兼顾过滤器职能
//计算过程
return 返回值
)
watch(要监控的变量, ,(newVal, oldVal)=>
console.log(`变量变了,新值为$newVal, 旧值为$oldVal`)
//变量变化时要执行的操作
)
//声明周期必须自己先import,再在setup内部调用!
onMounted() //原mounted生命周期钩子函数
//axios请求不用加this.
axios.get(…).then(result=> … )
return
…toRefs(data.value),
…methods
,
)
新声明周期钩子函数
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
总结(Summary)
vue.js高效前端开发•初识vue.js(代码片段)
全部章节>>>>文章目录一、Vue概述1、Web前端框架介绍2、MVC和MVVM3、Vue介绍4、安装Vue二、Vue使用1、第一个Vue应用2、Vue的双向绑定3、实践练习三、Vue生命周期1、Vue的实例和数据2、Vue生命周期钩子函数3、实践练习四、过滤... 查看详情
vue总结(代码片段)
...视图和数据的同步mvvm模式:适合带有视图的应用,比如前端(页面)、桌面端的应用等这个模式最早出现在微软wpf技术中 3、插值表达式mustache语法作用:将数据插入到当前位置插值表达式中能够使用任意的js表达式,不能出... 查看详情
软件工程-个人总结(代码片段)
...责的部分)四、个人总结五、课程建议软件工程-个人总结前端代码链接后端代码链接我的主要工作,前端的设计,前端后端交互,大部分页面的完成。一、原型设计1.确定需求?需求链接2.用例图,类图,时序图?图设计链接二、学... 查看详情
vue.js高效前端开发•antdesignofvue框架进阶(代码片段)
全部章节>>>>文章目录一、栅格组件1、栅格组件介绍2、栅格组件使用3、实践练习二、输入组件1、输入框组件使用2、选择器组件使用3、单选框组件使用4、实践练习三、表单组件1、表单组件使用2、实践练习四、树形组... 查看详情
vue.js高效前端开发•antdesignofvue框架进阶(代码片段)
全部章节>>>>文章目录一、栅格组件1、栅格组件介绍2、栅格组件使用3、实践练习二、输入组件1、输入框组件使用2、选择器组件使用3、单选框组件使用4、实践练习三、表单组件1、表单组件使用2、实践练习四、树形组... 查看详情
vue手动快速移植小程序总结(代码片段)
1、前言1.1关于技术选型这大半年精力从后端转移到前端开发,一下要同时弄ios+安卓+小程序的研发,很自然选择了混合App的方案,这样可以在最小学习成本下快速实现功能,并且在遇到一些可能的风险的时... 查看详情
前端知识点总结——vue
1.框架和库的区别框架(framework):有着自己的语法特点、都有对应的各个模块。库(library):专注于一点。框架的好处:提到代码的质量,开发速度提高代码的复用率降低模块之间的耦合度(高内聚低耦合)UI:userinterface... 查看详情
12.16vue(代码片段)
...端一定做出响应https:在http协议之上增加ssl安全认证2、前端布局流式布局响应式布局盒模型布局浮动布局定位布局课程安排Vue:基础:指令、实例成员、组件(组件间传参)项目:基于组件开发、插件(vue-router、vuex、axios、vue-cook... 查看详情
个人技术总结(代码片段)
...术详述mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择。mpvue从底层支持Vue.js语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发3、如何搭建小程序框架一、... 查看详情
前端框架(vue,react)介绍及面试题总结
Vue框架Vue是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用。相比起其他框架Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,将Vue引入到一个现有的项... 查看详情
前端项目笔记总结(代码片段)
技术栈:SpringBoot+vue3.0Element-Plus路由采用vue-router图标插件采用echarts5.0编写vite热更新能力更新速度非常快提高了开发的体验启动命令:npmrunserve列表采用el-table进行编写,并且采用el-pagination作为分页组件。通过globalP... 查看详情
前端vue框架01(代码片段)
1.前言:路飞项目所有知识点概况(了解)Vue框架:前台界面,页面逻辑 1)指令 2)实例成员 3)组件 4)项目开发DRF框架:数据(接口) 1)基础的模块:请求、响应、解析、渲染 2)序列化、三大认证 ... 查看详情
modstart前端开发(代码片段)
ModStart框架使用了jQuery等基础前端技术,页面不限于使用Vue、React作为前端技术集成。前端代码位置ModStart基础前端代码位于 vendor/modstart/modstart/resources/asset/。不同模块的前端代码位于 module/Xxx/resources/asset/前端代码需要使用n... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI(userInterface用户界面)框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI(userInterface用户界面)框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
vue基础(代码片段)
...vue基础渐进式JavaScript框架安装vue一、vue简介1、什么是vue前端三大框架之一,可以独立完成前后端分离式web项目的JavaScript框架2、vue的优势前端三大主流框架:AngularReactVue先进的前端设计模式:MVVM(Model-View-ViewModel)中文API、可... 查看详情
vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework有着自己的语法特点、都有对应的各个模块库library专注于一点框架的好处:1.提到代码的质量,开发速度2.提高代码的复用率3.降低模块之间的耦合度(高内聚低耦合)UI:userinterfaceGUI:graphica... 查看详情
vue.js高效前端开发•antdesignofvue框架基础(代码片段)
全部章节>>>>文章目录一、AntDesignofVue框架1、AntDesign介绍2、AntDesignofVue安装3、AntDesignofVue组件使用4、实践练习二、布局组件1、布局组件介绍2、布局组件使用3、导航菜单组件使用4、面包屑组件使用5、实践练习三、按钮... 查看详情