Vue.js知识整理

温馨提示

此为前端学习第四篇，上一篇是《Node.js和Webpack知识整理》。

 

一.基础

 

• 1.Vue对象

  • 定义：通过构造器传入json格式数据：拥有data和method、route、created（）生命周期等子json域
  • 核心思想：html内用特定语法和vue对象互动。
  • 变量取值：用插值表达式{{msg}}、也可以通过属性调用如vue.msg。
  • 属性取值：使用v-bind：属性名="msg" 简写为 ：属性名="msg"
  • 
  • 事件绑定：用v-on：click="f1"简写为@click="f1"

 

---

• 2.单向绑定

  • 理解：就是变量和dom的绑定。一边是vue属性，一边是嵌入标签的插值标签{{}}、特定属性v-bind：、v-on：等
  • 作用：原来要先计算值再操作dom，现在不用了，注意this就是vue对象。
  • 

 

---

• 3.事件

  • 区别：vue的事件是冒泡阶段的，等于原生的onclick（）等事件。（事件捕获是seteventlistenner()）。@click.xx='f1'
  • 事件委托机制：让父节点进行事件代理所有子组件事件，要配合event.target
  • prevent：阻止元素默认事件，最常用来防止<a>链接的跳转。
  • once：是一次性事件
  • capture：是提前到事件捕获阶段就执行。
  • stop：是自身不冒泡同时阻止冒泡继续向上传递，但接受冒泡事件。
  • self：是不执行冒泡上的且不冒泡，只执行自身
  • 
  • @keyup.A：是识别按下按特殊键才触发事件
    • 应用：比原生键盘事件要识别e.keycode == 13要好

 

---

• 4.双向绑定

  • 使用：用v-model=“变量”代替value属性，主要用在<input>
  • 作用：用变量实时绑定<input>的value值
  • 应用：大表单提交、搜索框、实时计算器。

 

---

• 5.循环

  • 使用：<div v-for=“item in list1”>可循环对象、数字、数组、对象数组（json数组）
  • 
  • 原理：每次循环都会输出一个<div>标签，里面带有不同的内容（可使用组件标签）。
  • 注意细节：
    • 如果方法输出数组也可直接用方法名
    • 在2.6版本list发生数据变化会自动重新装配for循环到dom上
  • 循环数据到<input>的name属性：：key=item.id

 

---

• 6.method域

  • 取变量：用this表示vue变量，可取data域数据等同于获取vue对象属性。
  • 使用：可添加函数方法add：function（）{}简写为add（）{}

 

---

• 7.dom显示和隐藏

  • v-show=“flag”、v-if=“flag”
  • 区别： if是dom操作，show是样式操作：修改样式display：none（同jquery的hide（）方法）

 

---

• 8.过滤器

  • 全局过滤器：所有构造的vue对象通用，vue.filter(foo,function(val){return val;})
  • 
  • 私有过滤器：使用域 filters：{foo,function(val){return val;}}
  • 
  • 使用：{{msg | foo}}过滤显示内容

 

---

• 9.全局指令

  • 区别：windows.onload事件，但是不同于jquery需要在里面绑定事件，同于需要dom节点的属性修改等操作。
  • 定义：静态方法Vue.directive("abc",{bind:function(elt){},inserted:function(elt){}})
  • 使用： <div v-abc>绑定该dom元素
  • 应用：bind在dom渲染之前用于加动态样式，inserted是操作dom节点例如获取子父节点、获取属性、获取焦点。
  • 

 

---

• 10.计算属性

  • 定义： computed:{}或watch：{r：function（）}
  • 
  • 使用：r是计算属性，使用方式同data域的普通变量。

 

---

 

 

二.数据交互

 

• 1.前后端分离

  • 概念：指后端只负责传数据，前端不在后端服务器上。优点是使用ngnix速度提升、分担服务器压力。缺点是不能用jsp传递对象和编译插入后端逻辑的代码。
  • 遇到的问题：负载均衡的会话共享、微服务分布式锁、分布式事务、单点登录。
  • jQuery：封装了ajax请求，有回调方法。但难以使用json做数据列表。
  • Layui：配合jquery使用，有样式，有组件化，能使用json。
  • vue的前后端分离
    • 后端：springboot用ResultVO对象打成json（通过@Restcontroller注解）
    • 
    • 前端：将表单映射到变量对象，使用axios发json。

 

---

• 2.生命周期

  • 对象的实例化过程：先准备数据data域—（beforecreate）—准备好了—（created）—渲染出el的虚拟dom—（beforemount）—编译插值表达式挂载到el的dom—（mounted）--—内存中更新数据—（beforeupdate）—更新到页面-（updated）
  • 
  • 
  • 作用：可进行模板方法设计模式
    • created（）：可进行data域的从服务器端数据获取。
    • updated（）：当数据更新时回调刷新界面。

 

---

• 3.前端发请求

  • 初始页面：在 created（）{}请求数据，data域数据已经初始化好。
    • 发送ajax：axios.get（url，json，config，回调函数）.then =>(function（result）{异步回调操作}）
    • 
    • 解决this陷阱：let self=this，函数嵌套的this指的是window，可用箭头函数（） =>来使用定义作用域
    • 显示数据：<tr v-for=u in list>循环输出tr内容
    • 
    • 更新数据：findall()调用于每次数据更新之后。
    • 
  • 增：add（）将form双向绑定为对象后序列化成json格式（自动）发送给后端
  • 
  • 改：先updateUI（u）打开layer弹层修改页面—>update（）将form双向绑定为对象后序列化成json格式发送给后端
  • 
  • 删：可使用事件传值，del（u.id）获取id值
  • 

 

---

• 4.axios对象的设置

  • 重用url：axios.defaults.baseurl = "url"
  • 
  • 统一修改config：在请求拦截器中设置。axios.interceptors.request.use(function(config){ })
  • 

 

---

 

 

三.组件开发

 

• 1.全局组件

  • 组件：每一个组件都是一个vue实例。
  • 全局注册：
    • 定义：用扩展方法可以生成vue实例：let a=Vue.extend({template: “#d1”})
    • 注册：Vue.component('foo',a)命名一个组件为标签<foo>，它可以在任意vue实例中使用
    • 简洁写法：Vue.component('foo',{template:"#t1"})
    • 
  • 组件标签名使用规范：<my-component-name>，但命名时会成驼峰myComponentName
  • 子组件的域：
    • data：必须用data（）{return {json格式}}
    • method：同vue实例
    • template：同new vue（）中的el："绑定标签"
  • 

 

---

• 2.私有组件

  • 区别：私有组件是定义于特定的文件，而不是全局注册
  • 意义：构建时组件通过export default componentA或者export default {}实现模块化，Vue首页或其他页面只会引入需要注册的的组件实例
  • 首页注册：conponents：{}注册到页面的vue实例中
  • 

 

---

• 3.组件切换

  • 方式一：v-if比较原始。
  • 方式二：和<conponet :is="cname">
    • 绑定事件：<a @click="cname='xxx'">，可绑定多个组件切换
    • 

 

---

• 4.属性访问

  • 本质上：是不同实例的传值。方法当然是需要一个窗口传值，这个窗口就是自定义命名标签<foo>，使用就是<template>内
  • 子组件如何访问父组件属性：
    • 共享：定义组件属性用props：[变量]，<foo v-bind：变量=父属性>
    • 
    • 
    • 
    • 应用：循环数据时item in list时配合子组件，子组件则需要用props获取父div的item属性
  • 
  • 子组件如何访问父组件方法：
    • 共享：<foo @abc="f1">
    • 使用：子组件用$emit()函数触发父方法，<template @chage=f3>触发emit(xx)父级的f1事件
    • 
  • 父组件如何访问子组件：
    • 共享：<foo ref="xx">ref属性赋值
    • 
    • 访问：this.$refs.组件名.属性名或方法名
    • 

 

---

 

 

四.路由

 

• 1.普通路由

  • 本质：核心就是组件的切换，类似于标签页，dom的切换。
  • 
  • 意义：在webpack中它是单独的router.js，负责引入组件，导出router对象。
  • 实现：
    • 创建组件对象：let component= {template: "#t1"} 
    • 创建路由对象：let router=new VueRouter（{routes{ component:实例名，path：“/”}}）
    • 路由注册到页面实例：router：router注册了路由器（生成子父关系）
    • 
  • 显示：<router-view>是路由坑
  • 跳转：用地址栏或<router-link to="Login">（相当与<a href=#/Login>）
  • 
  • 跳转流程：地址发生变化—页面不发生跳转但找到route对象—找到component—找到父组件的坑—填<router-view>坑
  • 
  • 加样式：.router-link-active：可对当前路由链接加样式

 

---

• 2.二级路由

  • 意义：子组件中的路由。
  • 实现：component里加一个children：[{component：，path：},{}]，且该component的<template>内需要<router-view>坑位
  • 
  • 应用：单页面的复杂嵌套功能

 

---

• 3.命名路由

  • 意义：一个路径对多个组件，可一次载入多个路由组件。
  • 实现：router：[{path:/ ,components：{aa：a，bb：b}}]
  • 
  • 使用：只要访问/就能一次载入三个路由坑位
  • 
  • 应用：首页实现，固定导航、侧边栏、底部写法。

 

---

• 4.鉴权拦截

  • 使用：router.beforeEach(function(to，from，next){ next();})
  • 
  • 应用：模拟后端拦截器，拦截到后台页面的请求。

 

---

•  5.路由传参

  • 意义：<router-link>中使用restful风格进行传参。
  • 窗口：{component : a , path：additem/: id}
  • 使用：子组件里{{this.$route.params.id}}从route对象里取出
  • 查询参数获取：当url为www.baidu.com?name=hh&id=12可使用{{this.$route.query.id}}获取参数
  • 

 

---

 

 

五.vue-cli项目构建

 

• 1.搭建流程

  • 下载cli：npm i @vue/cli -g
  • 创建项目：vue create vue-cli4.5.8（项目名）
  • 选择模块：router、vuex
  • 选择版本——选择路由——选择多配置文件——等待下好
  • 

 

---

• 2.开发

  • 热部署启动：npm run server相当于npx webpack-dev-server
  • 编译：npm run build相当于执行webpack的npx webpack

 

---

• 3.目录

  • public：存放index.html、ico等
  • router：路由对象
  • components：小组件
  • store：Vuex数据对象
  • view：其他页面
  • main.js：统一资源管理，管主页对象,引入路由对象。
  • package.json：npm管理文件，包括命令、依赖、其他信息。
  • .config文件：管理bable编译和热部署的一些事情被继承了不用自己写
  • dist：目标文件夹

 

---

 

 

六.快速总结

 

• 1.vue对象的几个概念

  • 常用的域
    • data：{}，组件中是data(){}
    • method：{}
    • filter：{}
    • watch{}
    • computed{}
    • render：h =>{ return h}
  • 直接注册的域
    • route：对象
    • store：对象
  • 不常用的域
    • components：{}
  • vueroute对象的
    • routes：[{}]
    • vueroute.beforeeach(function(){})方法
  • 生命周期
    • create（）{}
  • 全局方法：
    • Vue.directive（{}）全局指令onload函数
    • Vue.extend()生成组件对象
    • Vue.component({})注册全局组件
    • Vue.use()注册模块，常用于webpack。

 

---

• 2.路由的情况

  • 页面切换：浏览器get直接location地址转。
  • 单页面下多路由页面：用一对多写法+<router-view name="">
  • 单页面部分切换组件：用<router-link to=名字>+<router-view>

 

---

• 3.json数组和嵌套json的区别

  • 前者：[{}，{}]是一个列表，每个值（下标）都是个对象。
    • 应用：vueroute的route域、
  • 后者：{a:{}，a:[],a:[{}，{}]，a:b}是一个对象，只是有些属性值是另一个对象、数组、值。
    • 应用：vue构造器的参数

 

---

• 4.vue和jQuery的区别

  • 本质上：vue完全隐藏dom操作，把重心转移到数据交互上。jQuery则需要大量进行dom选择和绑定操作。
  • 操作dom上：vue具有模块化和组件开发能力，而jquery靠append、
    • 增删改：<route-view>、<v-for=>和var="dom"并且dom的appendto（）方法
    • 显示隐藏：v-show=属性和dom节点hide（）方法
    • 事件：@click=''方法和dom节点click()方法
    • 操作input值：v-model=变量和dom节点val（）方法
    • 操作属性：v-bind和dom节点attr（）方法
    • 切换样式：和dom节点toggleclass（）、css（）

 

---