VUE基础回顾

vue是渐进式的基于MVVM的纯前端框架

1.渐进式:可随意和其他技术混搭
全家桶:必须完整使用所有组件 很难喝其他技术混搭
2.基于MVVM:
3.纯前端:只靠浏览器就可以运行不需要后端技术
4.框架:已经拥有核心功能的半成品代码
从根本上简化了步骤
所有已数据操作为主的项目 都可以用vue框架

使用vue
引入vue.js
定义界面所有的界面内容都要放在一个统一的父元素内
界面中可能变化的位置用{{变量名}}语法临时占位
有时间处理函数的元素用@事件名=“函数名"临时绑定
定义一个data对象 包裹所有界面中需要的变量
定义一个new Vue()将界面和data对象绑定起来
new Vue({el:”#app",data,methods:{集中定义所有的事件处理函数}})
结果:data中的变量值会自动替换页面中{{变量名}}的位置

MVVM框架:
1.传统前端将程序分为三部分
html 定义网页内容和结构
css 为网页中内容添加样式
js 为网页添加交互行为
2.html和css缺少动态语言必须的要素 比如没有变量不能执行分支结构和循环结构
所有操作
3.现代前端
a.界面View: htm+css html增强支持变量分支和循环
b.数据模型Model: 专门保存这个页面中所需所有数据的对象
c.视图模型的绑定ViewModel:专门自动同步模型中的数据与视图中的显示
包含两大子系统:响应系统
虚拟dom树

响应系统:只要模型变量被修改就可自动发出通知
new Vue先将data对象包裹进viewmodel中 然后将data中每个变量隐姓埋名
new Vue自动给data中每个变量创建一个访问器属性 而且在每个变量的set()中建立了通知机制
在使用任何一个变量时 通过访问器属性去使用变量 修改值触发set() 发出通知

虚拟dom树 只保存可能发生变化的元素的简化版dom树
在加载页面时 newVue扫描监控的页面部分 只将受变量影响的少量元素保存在一个虚拟dom树存储结构中
虚拟dom树中封装了dom增删改查的方法
在任何时候修改变量时 触发变量的set()都会发出通知给虚拟dom树
虚拟dom树接到变量变化的通知后 扫描其中元素 找到并更新受影响的元素

---

虚拟dom树:小 遍历速度快
只更新受影响的元素 效率高
封装了dom操作 避免了重复编码
vue界面和数据模型的绑定机制:
每个变量都自定添加访问器属性 在set()中添加了通知机制
修改变量值时触发通知机制 虚拟dom树更新受此变量影响的元素

---

绑定语法
在html中标记可能发生变化的位置的{{变量}}语法
只要元素的内容中某个位置可能随变量自动变化时就要用被绑定语法标记
如何:1.{{}}在newVue加载时会扫描到{{变量}}的位置 并在数据模型data中查找同名变量 用变量值自动代替{{}}的位置
2. {{}}等效于 模板字符串中的${}可以写任何一个有返回值的js表达式

---

指令
为html提供增强功能的特殊属性 如变量 分支 循环等
1.v-bind 专门绑定元素的属性值
{{}}只能用于绑定元素的内容的变化 不能绑定元素属性值的变化
当一个元素的属性值可能随变量变化时
v-bind:属性名=“变量/表达式” 简写为 :属性名=“变量/表达式”
2.v-show 控制一个元素根据条件显示隐藏:
<元素 v-show=“条件表达式”>
条件表达式结果返回bool true显示 false隐藏

v-if v-else 两个元素根据条件二选一显示隐藏:
<元素1 v-if=“条件表达式”> <元素2 v-else>
每当newVue扫描页面时 或者data中变量发生更改时 都会自动计算v-if=后的条件表达式 如果v-if="true"则显示元素1 删除元素2 否则显示元素2删除元素1

v-if v-else-if … v-else 多个元素根据条件多选一
<元素1 v-if=“条件1”>
<元素2 v-else-if=“条件2”>
<元素3 v-else-if=“条件3”>
…
<元素n v-else>
当一个条件成立时保留此元素 删除其余元素
多个元素之间禁止插入其他元素

3.根据数组反复生成多个相同结构的元素
<元素 v-for="(元素值，下标)of 数组":key=“下标”>
当new Vue扫描到v-for时 会找到data中指定的数组 遍历数组中每个元素
每遍历一个元素 就会重复创建一个当前HTML元素
每次遍历都会获得正在遍历的数组元素的值和下标 元素值和下标可在当前html元素及其子元素中用于绑定语法
之后如果数组中的值发生变化会自动更新所有v-for生成的html的元素内容
每次数组发生变化时都会把所有元素重新生成一次
解决方法是使用v-for时必须同时为元素绑定:key="i"属性 为了给元素一个唯一的标识 当数组中元素发生变化时根据此标识只找到需要更新的哪一个对应元素即可提高效率
v-for遍历指令中 不能用下标修改数组中元素 因为下标不会被vue监控
所有对数组的操作必须通过函数
修改某个数组元素的值 arr.splice(start,count,value1,…)

---

绑定事件
<元素 v-on:事件名=“处理函数(实参值)”>
简写为<元素 @事件名=“处理函数(实参值)”>
事件委托 <父元素 @click=“处理函数($event)”>
$event就是vue中独有的关键词代表dom中的实践对象
e.target即为触发事件的目标子元素

---

避免用户短暂看到 {{}} 语法
如果 newVue出现延迟加载 网页中的 {{}}就会被用户短暂看到
解决方法:
1.隐身斗篷 为要隐藏的元素添加 v-cloak属性
因为v-cloak自己不带认可隐藏的样式值 所以需要手动在页面中添加
[v-cloak]{display:none}
原理:当newVue()加载完后 会自动找到带v-cloak属性的元素 并自动移除此属性
2.用v-text=${} 代替{{}}绑定变量
<元素 v-text="要拼接的字符串内容"> v-text是属性 用户看不到
如果大范围的元素避免被看到{{}} 首选 v-cloak
如果是单个元素避免被看到{{}} 使用v-text

v-html只要绑定html片段内容 都用v-html=“片段名”
v-pre 阻止{{}}中的内容被vue编译
v-once只在首次绑定时动态绑定一次 之后即使更新变量也不再更新元素内容

---

双向绑定
单向绑定:把内存中的变量值(model->View)绑定到页面显示
双向绑定:Model->View & View->Model
凡是绑定可修改的表单元素的内容都要使用双向绑定
双向绑定会被自动翻译为 绑定事件 oninput 或 onchange
普通的指令或{{}}绑定都是单向的 页面上即使修改表单内容也并不会返回
1.绑定文本框或者文本域的内容
标准写法:
简写: 不需要加:属性
所有带v-model的表单元素都会被自动绑定事件处理函数 自动变为
<input type="text"on事件名=“vue内置的处理函数”>
2.绑定selec元素
3.绑定radio元素

当m->v绑定显示时会用变量值和所在radio元素的value作比较

绑定样式
1.绑定内联样式
a.将style当成一个普通的字符串属性进行绑定
html中 <元素 :style=“变量”>
js中 data:{变量:“样式属性:值”}
问题在于:不便于操作其中某一个css属性的值
b.绑定内联样式最好使用对象形式
html中 <元素 :style="{样式属性:变量，…}">
js中 data:{变量:值}
问题 data中的变量过多 可能造成冲突
解决:用一个对象类型的变量包裹一个元素的所有内联样式属性
html中 <元素 :style="{样式属性:变量.样式，…}">
js中 data:{变量:{样式:变量,…}}
如果有的内联样式需要动态改变 其余不需要
解决: :style和style 可以并存
<元素 style=“样式:值” :style=“变量”>
绑定内联样式通常用于精确修改个别css属性时

2.绑定class
常用于批量更改一个元素的多个css属性
class属性可以作为一个普通字符串属性绑定 但这样不便于单独操作某一个class
绑定class也首选对象语法
html中 <元素 class=“类名1:条件1,类名2:条件2,…”>
js中 data:{ 变量名:{类名1:条件1，类名2:条件2，…} }
如果条件返回true 该样式类启用
如果条件返回false 该样式类无效

自定义指令
1.定义一个指令
在html中使用自动实现功能
需求 希望 v-focus 自动获得焦点
Vue.directive(“指令名称”,{inserted(elem){//会在标有该指令的元素被加载到页面时自动触发}})
new Vue扫描界面时 发现标有自定义指令的元素 就会自动触发inserted函数

计算属性
在自己不保存属性值 而是根据其他属性值动态计算结果
只要页面上需要的属性值 后端或内存中没有直接可用的数据
new Vue({computed:{属性名(){return 计算结果}}})
计算属性的用法和data中普通属性的用法完全一样
定义计算属性加() 但是使用计算属性时 不加()

vue可以缓存计算属性的结果 即使反复计算 只要参与计算的属性值没有改变 就不会重复计算

计算属性 vs method中的函数
相同点:都能通过计算获得计算后的结果
不同点:使用函数必须加() 使用计算属性不用加()
vue会缓存计算属性的计算结果 只要依赖的其他属性值不变就不会重复计算 vue不会缓存函数的执行结果 所以如果多次调用函数 会导致重复计算

如果更关心执行过程 不关心结果时 首选函数
如果更关心执行结果 不关心过程时 使用计算属性

过滤器
对变量的原始值进行再加工再显示的函数
如何: 定义过滤器函数
Vue.filter(“过滤器名称”,function(oldValue){ return newValue })
使用过滤器 在绑定变量时{{变量|过滤器}}
先将变量值交给过滤器 在此位置显示处理后的新值

 Vue.filter("过滤器名称",function(oldValue,形参1,形参2,..){ return newValue }
 在调用时 谨记 过滤器自动传入变量原始值值 所以默认传入第一个实参 实参列表开始位置对应的是形参列表的第二个 

组件component
拥有专属的HTML CSS JS和数据的页面独立功能区域
组件代码具有很高的重用性
只要页面中存在需要被反复使用的功能区域 都要定义为组件
a.创建组件:
Vue.component(“组件名”,{
template:“在唯一的父元素下创建模板html片段”,
data(){return {//相当于newVue的data}},
methods:{},Vue:{},computed:{}
})
组件的第一个成员是template 是一段html片段 称为组件的模板
组件的第二个成员是data函数 return一个包含变量的对象 这样反复多次使用组件时 return出的对象中的变量互不干扰(参考闭包) 每使用一次组件 都自动调用一次data 自动获得一个返回的新对象作为当前组件副本专属的数据对象
组件其实就是一个可重用的标签 组件名其实是标签名
HTML标签名不区分大小写 如果组件名由多个单词组成时 不要用驼峰应该用-分隔

与new Vue的区别: newVue是页面中先存在html 再根据el去匹配对应的元素
组件是先定义好组件 在组件中提前保存好一段html作为今后使用组件的模板 在需要使用组件的区域按照模板创建HTML片段

组件化开发
1.传统前端开发问题: 一个页面文件 无法多人协作编辑
2.先将一个页面分割为多个独立的组件文件 由多人协作开发 开发完成后再由框架自动拼接回一个完整的页面中展现给用户
3. 协作 松耦合
4. a.先将页面划分为多个组件
b.在独立文件中 分别编写每个组件的内容和功能
c.再用一个完整的页面和框架 引入组件文件 拼接成一个完整的页面

组件分类:
a.根组件:监控整个页面 new Vue()
b.全局组件:可以在全局中随处调用的组件 Vue.component()
c.子组件:只能在某个父组件内使用的组件
将全局组件降级为子组件
var 子组件名 ={template:{},data(){return {}},methods:{},…}
父组件中存在属性 components 包含其下的子组件
components:{子组件1,子组件2,…}

组件间传值
组件的模型数据都是自己专属 无法直接使用别的组件的数据
父->子:父组件中将子组件需要的成员绑定给一个自定义的属性
子组件中 通过props属性获得父组件内放在子组件中的自定义属性值
props中的变量用法和data中的变量用法完全一样
子->父
兄弟间

SPA
一个应用程序只有一个完整的html页面 所谓的多个页面其实是多个组件而已
多页面应用: 每次切换页面都要重新向服务器发送请求
每切换一次页面都要重建整颗DOM树
对于多个页面共用的资源(jq boot vue等)每次切换页面都重新请求
单页面应用: 切换页面不重新请求 而在浏览器端切换当前html页面中不同组件显示
切换页面只更新原有DOM树中的部分内容 不需要整颗DOM树删除重建 公共资源只在首次加载时请求一次 更换页面内容组件和公共资源无关
单页面应用缺点:首次加载慢！
解决:异步延迟加载 必须要服务器端接口支持！
如何实现单页面应用:
先创建一个唯一完整的html页面 在页面中需指定位置(占位符)预留给页面组件
创建页面组件:在项目中代表一个页面概念的子组件 需求几个创建几个
引入vue-router组件:专门监听地址栏变化 并自动根据地址栏变化更换页面组件
只要vue实现单页面应用必须使用vue-router
先定义路由字典:专门保存相对路径和页面组件对象之间配对关系的数组
var Routes=[{path:“相对路径”,component:首页默认组件},
{path:“相对路径”,component:组件对象},
{path:“相对路径”,component:组件对象},
…，
{path:"*",component:404页面组件}]
创建VueRouter对象并将路由字典再装进路由器对象中
var router = newVueRouter({Routes})
VueRouter必须找到 new Vue才会发挥作用 将路由器对象加入到newVue中
new Vue({ …,router,…})

#/锚点地址属于浏览器页面内跳转 不会像服务器端发送请求

vue-router
路由字典: 存放路径和组件名的配对关系
通过遍历路由字典找到组件名对应的路径 找到组件并替换到占位符位置
占位符标签:
切换页面 页头页脚保持不变

页面组件跳转
a. html中所有a都换成
运行时 所有的router-link会被自动替换成 且自动判断是否添加#前缀
b. js中 this.$router.push("/相对路径")a.href=javascript:this.$router.push("");

页面组件间传值
a. 修改路由字典中的路由对象 让path支持传参
{path:“相对路径/:变量”，component:xxx}
一旦此路径加上:变量 如果不传参数 将无法导航至此路径
b. 在跳转时传参
1.
2.this.$router.push("/相对路径/参数值")3.参数值会自动赋值给路由中定义的变量c.如何在下个页面中接住参数值this.$route.params.变量名
问题 手动修改地址栏中的变量值 页面内容不变
将变量放置在watch中 监听 只要变量改变 立即重新加载

$route等效于BOM中的 location 指代地址栏中的url信息
$router是专门执行跳转动作的对象 不保存地址栏的内容

简写:
{path:"//:变量"，component:xxx,props:true}
其中props:true意思是让地址栏中的变量自动成为这个组件的属性

脚手架
已经拥有部分核心功能的半成品项目结构
避免重复结构 统一项目结构
只要使用框架开发 都要先创建脚手架项目 在此基础上进行后续开发
1.先安装生成脚手架代码的命令行工具 npm i -g @vue/cli
2.每做一个新项目都要用脚手架工具生成一套新的脚手架代码 vue create 项目名称
生成的脚手架代码 一定要在自己选择的文件夹下进行
选择功能 babel router Vuex
使用history模式可以去掉地址栏中# 但需要服务器端支持
3.运行脚手架项目
进入项目文件夹内 看到package.json
运行 npm run serve 看到compile successfully
点击链接查看示例页面
原理:
1.项目结构
a.public/ 保存所有静态完整的不需要vue编译的html css js图片等资源
包含唯一的完整的index.html页面
imgs文件夹 包含所有的项目图片
公共的已经压缩过的组装件或库 这些css js文件需要在html顶部引入
public下的内容不会宝贝vue编译 会保持原样
b.src/ 保存所有做自己编写的css和js文件
App.vue 相当于 index.html中的div#app 其中包含router-view
main.js相当于 index.html中的new Vue
运行时脚手架会用App.vue中的template内容替换index.html中div#app 同时会向index.html中引入new Vue

所有页面共用的组件 应该放在App.vue中
全局组件的创建和其他必要组件的配置放到main.js中newVue之前
c.views/ 保存所有的页面组件 将来项目中需要几个页面就有几个文件
d.compinents/ 保存全局组件和页面中所需的子组件
e.router.js 创建的路由对象
f.assets/ 保存自定义的共用的css 和js文件

.vue文件 子组件对象 页面组件 模块对象
由三部分组成:
a.组件的html片段
其实都是之前组件对象中的template属性 单独提取出来
b.

c.

页面组件:
在views文件夹下创建 页面.vue文件
页面.vue文件也包含三部分
在router.js文件中 用import引入页面组件
在routes数组中添加页面组件对应的路径组合

子组件:
在components文件夹中创建 子组件.vue
子组件.vue中也包含三个部分
在父组件.vue中的

---

组件生命周期
1.每个组件在加载过程中经历的阶段
2.经常需要在组件的加载过程中 自动执行一项操作
比如:组件加载完自动发送ajax请求获取数据
在单页面应用中 只有一个index.html页面在首次加载 之后即使跟换页面组件 index.html是不换的 而且Dom树也不需要整颗更新 所以 DOMContentLoaded和 window.onload都不能用 都不会反复触发
3.只要希望在组件加载的过程中自动执行一项任务时 都要在对应的生命周期中执行操作 而并不是在页面的加载后执行
4.包括四个阶段:create -> mount -> update -> destroy
a.创建阶段:创建组件对象 同时创建组件中的data对象
暂时还未创建虚拟DOM树 所以在此阶段不能执行DOM操作
b.挂载阶段:创建虚拟DOM树 将数据内容渲染到页面上显示

首次加载到此结束
c.更新阶段:只有data中的模型数据被更新时才会触发
d.销毁阶段:只有主动调用$destroy函数删除一个组件时才会触发销毁阶段
5.钩子函数:绑定在生命周期各个阶段自动触发的特殊的回调函数
四个阶段 每个阶段开始结束 都有两个钩子函数
create阶段 beforeCreate(){} created(){…ajax…}
mount阶段 beforeMount(){} mounted(){…ajax…}
updata阶段 beforeUpdate(){} updated(){}
destroy阶段 befordDestroy(){} destroyed(){}
6.八个钩子函数都直接隶属于钩子对象
组件对象{
data(){return {}},
methods:{},
watch(){},
computed(){},
components:{}
beforeCreate(){},…,destroyed(){}
}

axios
专门发送ajax请求的基于promise的函数库
发送请求:

1. axios.get("    qinhao  l"，{
     params:{参数:值,...}
   }).then(result=>{// result.data才是想要的结果})
   

2. axios.post("接口地址url",
     "变量1=值1&变量2=值2&...").then(result=>{// result.data才是想要的结果})
   

在脚手架中导入axios
在项目本地安装axios npm i -save axios
如果不想每次使用axios都是用import引入 可以将axios对象放在Vue类型的原型对象中 所有的组件对象(都是Vue的孩子)都可以直接使用axios

---

json-sever 模拟接口 写死的json字符串 ！！！
事件修饰符 跟在事件之后 用于修饰或限制事件行为的特殊符号
例如 @keyup.enter=处理函数 .enter可简写为 .13
监视函数:vue中专门监听一个变量变化的函数 watch
变量只要发生变化 就会自动触发函数

---

compile 编译
template 模板
interpolation 插值语法 (绑定语法)

---

用vue绑定语法实现学子商城首页和详情页中的内容绑定