vue
1.什么是vue
是第三方开发的基于MVVM设计模式的渐进式的纯前端js框架
2.原生DOM vs jQuery函数库 vs框架
- 原生DOM:浏览器自带的操作网页内容的唯一途径(优点:万能,缺点繁琐)
- jQuery函数库:第三方开发的基于DOM实现的操作网页内容的简化版函数(优点:简单,缺点:仅仅是对DOM的每一步操作进行的简化,并没有从根本上减少开发步骤)
- vue框架:第三方开发的基于响应式编程方式的程序(优点:从根本上简化了开发步骤,缺点过于精简).
3.MVVM设计模式：将前端内容划分为3部分
- (1).界面(view):包括HTML+CSS且HTML是增强版的(支持变量{{n}},支持分支和循环).
- (2). 数据模型(Mdel):是专门保存页面所需的变量和函数的对象(比如: var data={n:1}; var
methods={add(){…},minus(){…}}) - (3).视图模型(ViewModel):自动将data中的变量和methods中的函数送到界面中指定元素上,并自动保持页面与内存中数据同步的特殊对象
4.Vue的绑定原理(vue是如何实现MVVM设计模式):访问器属性+虚拟DOM树
- 创建Vue类型的对象
- 第一件事:将模型对象的内容包裹进Vue类型的对象中托管,将原data隐藏，并为data中每个变量定义访问其属性，访问器属性直接隶属于new Vue(),访问器属性是用来实时监控每个变量的变化。然后打散引入的methods,，methods中的所有方法就直接隶属于new Vue(),从而methods中的方法和data中变量的访问器属性就是平级的关系.故对象中平级的方法想使用平级的访问器属性,就加
this. - 第二件事:创建虚拟DOM树,并渲染页面.当在new Vue()中任何情况下修改了变量其实修改的是访问器属性,然后会触发set(),自动执行set中的通知函数,把通知发给虚拟DOM树,告知虚拟DOM树哪个变量的值发生了变化,虚拟DOM树会遍历自己内部的元素,找到受本次变化影响的元素,用已经封装好的DOM操做只更新新页面中受影响的元素.
5.虚拟DOM树:
- 在newVue()创建完对象后,自动扫描el:"#app"所指向的页面区域,在扫描过程中找出可能发生变化的元素后,仅保存这些可能发生变化的元素的简化版DOM树就是虚拟DOM树.
- 优点:
- 内容少:仅包含可能发生变化的元素.
- 遍历快:可快速找到受影响的元素
- 渲染效率高:只更新受影响的元素,不受影响的元素保持不变.
- 已经封装了DOM增删改查操作,避免大量重复的代码.
6.绑定语法
- <元素>{{自定义变量名}}
- {{}}中可放:变量,运算,三目,有返回值的函数调用,创建对象,访问数组元素,不能放程序结构(分支和循环)以及没有返回值的函数调用
- {{}}只支持元素内容变化,不支持属性变化,无法实现程序结构.
7.指令
(1).v-bind元素的属性值随变量自动变化
- <元素 :属性名=“js变量或表达式”>(:前的v-bind可省略)
(2).v-show控制一个元素的显示与隐藏
- <元素 v-show=“判断条件” >
- 若判断条件为true时,该元素原样显示
- 若判断条件为false时,自动为当前元素添加display:none属性,该元素隐藏.
(3).v-if v-else控制两个元素二选一显示与隐藏
- <元素1 v-if=“判断条件”>
- <元素2 v-else>
- 当new Vue()扫描到v-if时,先执行判断条件,若v-if的条件为true,则显示v-if所在的元素,自动删除v-else第二个元素.若v-if后的条件为false,则删除v-if所造元素,保留v-else所在的元素.
- v-if和v-else之间不能插其他任何元素.
(4).v-if v-else-if v-else 多个元素多选一显示与隐藏
- <元素 v-if=“条件1”>
- <元素 v-else-if=“条件2”>
- … …
- <元素 v-else>
(5).v-for反复生成多个相同结构的元素
- <要反复生成的元素 v-for="(elem,i) of 数组/对象/字符串/数字">
- new Vue()扫描到v-for时,会遍历of后的东西,每遍历一个,就创建一个副本,同时of自动取出当前元素的内容,元素脂肪在elem变量中,元素的下标放在i变量中,elem和i变量可在当前元素上及其子元素上用于绑定语法
(6).v-on 绑定事件 - <元素 @事件名=“事件处理函数()”> v-on可用@代替
- 如果同时传入实参值和事件对象:
- <元素 @事件名=“事件处理函数(实参值,$event)”>
- methos:{
- 事件处理函数(形参值,e){…}
- }
(7).v-clock 防止用户短暂看到{{}}
- 首先在CSS中写[v-clock]{display}
- 然后在元素上添加属性v-clock
(8).v-text防止用户看到{{}},v-text会覆盖{{}}
- <元素 v-text="
xxx${变量和js表达式}">
(9).v-htm绑定HTML片段内容
- 底层相当于.innerHTML
- <元素 v-html=“变量或js表达式”>
(10).v-once 只在首次加载页面时绑定一次数据显示,之后即时更新变量值页面也不会发生变化
- <元素 v-once>{{js表达式}}
- v-once的元素根本没有加入DOM树
(11).v-pre防止内容中{{}}被编译
- <元素 v-pre>Vue框架采用{{变量名}]}方式绑定元素的内容
8.笔试题:v-if其实也可单独使用控制一个元素是否显示隐藏,与v-show有什么区别呢?
- 相同点:都是控制一个元素的显示与隐藏
- 差别:v-if是通过删除元素的方式来控制显示和隐藏,而v-show是通过display:none方式来控制显示与隐藏.v-if因为修改了DOM树所以效率低而v-show不修改DOM树之修改元素的CSS属性,所以效率高.
9.v-for遍历的某一个元素被修改时,v-for重新生成所有元素而不是只更新其中一个,怎么解决?
- 为要反复生成的元素添加:key=“i”,从而每次只需要修改一个数组元素对应的对应的一个HTML元素副本,效率更高.
10.v-on如何如何既传事件对象,又传自定义参数?
- 用$event关键词,代替自动创建的event对象,手动传入事件处理函数中
11.vue的双向绑定v-model
既能将程序中的变化自动送到界面上去,又能将界面上用户所做的修改返向更新回程序的变量中.
在单向绑定原理(访问器属性+虚拟DOM树)的基础上,又自动为表单元素绑定了onput或onchange事件,只要用户输入或修改了表单元素的值,都会自动触发事件.
12.点击按钮获得文本框中输入的关键词:
<div id="app">
<input v-model:value="keywords"
@input="search"
@keyup.13="search"/>
<button @click="search">百度一下button>
div>
<script>
var vm=new Vue({
el:"#app",
data:{
keywords:""
},
methods:{
search(){
//只有用户输入的内容不是空字符串，且不是空格时才执行查找
if(this.keywords.trim()!==""){
console.log(`查询${this.keywords}相关的信息...`)
}
}
}
})
script>
13.计算属性(computed)
- computed专门用于保存计算属性，计算属性的本质是函数。
- 自己不实际保存属性值,每次都要根据其他的属性值来计算出自己属性的值.(比如:购物车里的总价)
- 计算属性的优点：计算属性首次计算的结果会被vue缓存起来，即使反复使用计算属性，也不会重复计算，除非依赖的变量发生了变化，才被迫重新计算，但是新的值依旧会被vue缓存，并重复使用。(methods中的普通函数，每调用一次就会重新执行一次复杂计算，计算的结果也不会被vue缓存并重复使用)
- 不关心返回值(没有return)，就用methods
- 要返回值就用计算属性提高效率，减少重复计算。
14.过滤器、
- 专门将变量的原始值经过加工后在现实的一种特殊的函数。
- 向vue中添加过滤器
- Vue.filter(“过滤器名”，function(oldVal，自定义形参){
- return oldVal加工后的新值
- });
- <元素>{{变量 | 过滤器(自定义实参值)}}
15.axios
- vue中专门发送AJAX请求的基于promise的函数库
- 但其实axios和vue毫无关系,可以独立运行,也可放在vue中运行
- 先导入axios.min.js文件
- 再配置所有url的基础路径:
- axios.defaults.baseURL=“http://服务器域名:端口号”;
- 发送get请求：
axios.get(“相对url”，{
params:{变量名：值,… : …}
}).then(function(result){
result.data才是服务器端返回的数据
}）
- 发送post请求
axios.post(“服务器端接口地址”，“变量1=值1&变量2=值2&…”)
.then(function(result){
result.data才是服务器端返回的数据
})
11.axios及安装?
答：请求后台资源的模块。npm install axios —save 装好， js中使用 import 进来，然后 .get 或 .post 。返回在 .then 函数中如果成功，失败则是在 .catch 函数中。
18.组件化开发
- 组件:拥有专属的HTML+CSS+数据的可重用的页面独立的功能区域
- 封装组件:创建组件对象并添加到Vue中
Vue.cpmponent(“组件名”,{
template:HTML片段,//模板,这个组件统一的样子,HTML片段必须用唯一的父元素包裹
data(){//和new vue不同,data变成一个函数,为了可以反复调用,每次调用都返回一个新的保存数据的对象
return{//new object
变量:初始值
}
}
methods:{函数}
computed:{计算属性}
//声明周期的钩子函数
mounted(){}
})
- 在页面中使用组件:<组件名>
- 原理:当w
vue()扫描到不认识的自定义HTML标签,会在vue中找同名组件,如果找到了同名组件对象,会先把template中保存的HTML片段替换掉页面中组件名标签的位置,自动调用data函数,为本次组件创建一个模型对象.从而也就形成了一个缩微版的new Vue()对象和绑定关系.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/vue.js">script>
<script>
//想定义一个计数器组件，点+-号，可更改数量
//1. 创建组件对象, 定义组件名称,多个英文单词用-分割
Vue.component("my-counter",{
//每个组件的制作过程和new Vue()制作过程几乎完全一样
//2. 定义界面模板:template
//要求唯一父元素包裹
//问: 模板中共有几处可能发生变化
//本例中: 只有span的内容可能发生变化,所以用{{n}}标记
//问: 模板中哪些元素可能触发事件
//本例中: 两个button可点击执行+-计算，所以用@click标记
template:`
{{n}}
`,
//3. 创建模型对象
//问: template模板中共需要几个变量
//本例中: 共需要1个变量n
data(){ //将来会被自动反复调用
return { //反复创建模型对象副本——这里才相当于new Vue()中data对象
n:1
}
},
//其余和new Vue()就完全一样了
//问: 模板中共需要几个函数
//本例中共需要minus和add两个函数
methods:{
minus(){ if(this.n>1){this.n--} },
add(){ this.n++ }
}
})
script>
head>
<body>
<div id="app">
<ul>
<li><my-counter>my-counter>li>
<li><my-counter>my-counter>li>
<li><my-counter>my-counter>li>
ul>
div>
<script>
new Vue({
el:"#app"
})
script>
body>
html>
19.vue中的组件分为三类:
- 根组件：一个页面只有一个，监控整个页面的组件new Vue()
- 全局组件：可以在项目的任何位置都能使用的组件Vue.component(“组件名”,{…}})
- 子组件：只能用于规定的父元素内的组件，出来父元素就不能使用。
创建子组件：
- 1.定义子组件：将Vue.component()换成一个普通的js对象定义格式，但组件内容不变 var 组件名={ template:``, data(){return{}}, methods:{…} }
- 2.在子组件所属的父组件内添加一个components属性，在属性中包含子组件子组件对象 父组件{ template:``, data(){return{…}}, …,
components:{子组件对象名} }
21.SPA单页面应用
- 整个应用程序只有一个完整的HTML页面。其它所谓的页面只是页面中一个片段/组件而已。所谓的页面跳转其实是在HTML页面中切换不同的片段内容/组件。
多页面应用vs单页面应用
多页面应用：
- 请求次数多，每更换一次页面都要向服务器重新发送请求
- 效率低，每次更换页面都要重建整棵DOM树
- 每次更换页面时都要重新下载公共资源(所有页面都要使用的CSS,JS)，增加了请求次数且浪费流量。
- 多页面应用，因为同一时刻只能保存一张网页，所以无法实现页面过度动画。
单页面应用：
- 请求次数少，因为首次请求就将所有页面组件一次性下载到本地，之后切换页面只是更换本地的不同的组件展现，无需向服务器重新发送请求。
- 效率高，因为每次更换页面不用重建整棵DOM树，只更新原DOM树中部分组件节点即可。
- 公共资源仅在首次加载第一个页面时请求一次，之后更换页面因为引用公共文件的内容部分没有改变，所以不会重新请求页面共用的css和js,减少了请求次数节省流量。
- 单页面应用所有组件都在内存中，主页面完全可能同时加载两个组件，定义两个组件间动画效果
单页面应用的缺点：首屏加载太慢。
解决首屏加载慢的方法
a.异步延迟下载：
- 打包时，每个组件分开打包为单独的文件。首屏加载时只加载第一个组件的内容，后续组件有底层程序异步加载，优点是不影响首屏加载速度，又能实现单页面应用的效果。但是会浪费网络流量。
b.懒加载：
- 打包时，每个组件分开打包为单独的文件。首屏加载时不会下载其他任何组件，只有当用户切换到其他某个组件时，才临时下载用户想看的组件。优点省流量，缺点下载速度比加载本地组件稍慢。但是还是单页面应用，因为下载的只是页面中部分的组件内容，不是完整的HTML页面。
22.单页面应用的实现:
先创建一个完整的HTML页面,支持vue框架的页面结构,引入vue-router.js,在中定义为页面组件占位并在new Vue()中添加router成员.
为每个页面分别创建一个子组件对象
创建router.js保存路由器对象和路由字典,定义路由字典数组routes,创建路由器对象并引入路由字典,根据地址栏的变化自动切换显示不同的页面组件.
公共部分创建为全剧组件,并添加到之外,就不会被替换