Vue——前端知识点总结_前端开发者

前端知识点总结—— vue( 持续更新中) 1. 框架和库的区别: 框架: framework 有着自己的语法特点、 都有对应的各个模块库 library 专注于一点框架的好处: 1. 提到代码的质量, 开发速度 2. 提高代码的复用率 3. 降低模块之间的耦合度( 高内聚低耦合) 1 2 3 4 1. 提到代码的质量, 开发速度 2. 提高代码的复用率 3. 降低模块之间的耦合度( 高内聚低耦合) UI: user interfaceGUI: graphical user interfaceCLI: command line interfaceAPI: application interface思维模式的转换: 从操作DOM的思维模式 切换到 以数据为主 1 从操作 DOM 的思维模式 切换到 以数据为主2.vue概述1、 what 是一个渐进式的构建用户界面的js框架 2、 where 小到的简单的表单处理, 大到复杂的数据操作比较频繁的单页面应用程序 3、 why 1. 方便阅读的中文文档 2. 容易上手( 学习曲线比较缓和) 3. 体积小 4. 基于组件化的开发方式 5. 代码的可读性、 可维护性得到了提高 4、 how 工作方式: 可以通过丰富的指令扩展模板, 可以通过各种各样的插件来增强功能 搭建环境: 方式1 全局安装 vue – cli $ npm install–global vue – cli# 创建一个基于 webpack 模板的新项目 $ vue init webpack my – project# 安装依赖, 走你 $ cd my – project $ npm install $ npm run dev 方式2: 直接引入对应的js文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 1、 what 是一个渐进式的构建用户界面的 js 框架 2、 where 小到的简单的表单处理, 大到复杂的数据操作比较频繁的单页面应用程序 3、 why 1. 方便阅读的中文文档 2. 容易上手( 学习曲线比较缓和) 3. 体积小 4. 基于组件化的开发方式 5. 代码的可读性、 可维护性得到了提高 4、 how 工作方式: 可以通过丰富的指令扩展模板, 可以通过各种各样的插件来增强功能 搭建环境: 方式 1 全局安装 vue – cli $ npm install–global vue – cli# 创建一个基于 webpack 模板的新项目 $ vue init webpack my – project# 安装依赖, 走你 $ cd my – project $ npm install $ npm run dev 方式 2: 直接引入对应的 js 文件3.Vue中基础知识1、 双花括号 mustache(胡子) interpolation( 插值表达式) 语法: < any > {
{
表达式
}
}<any>作用: 将表达式执行的结果输出当调用元素的innerHTML中; 还可以将数据绑定到视图2、 指令-循环指令基本语法1: <anyv-
for=”tmp in array”>< any > 基本语法2: < anyv-
for=”(value,index) in array”> < any > 作用: 在遍历array这个集合时, 将临时变量保存在tmp中, 创建多个any标签 3、 指令 – 选择指令 语法: < anyv-
if=”表达式”> < any > < anyv-
else-
if=”表达式”> < any > < anyv-
else=”表达式”> < any > 作用: 根据表达式执行结果的真假, 来决定是否要将当前的这个元素 挂载到DOM树 4、 指令 – 事件绑定 语法: < anyv-on:eventName=”handleEvent”> < any > 作用: 给指定的元素 将handleEvent的方法绑定给指定eventName事件 5、 指令 – 属性绑定 基本语法: < anyv-bind:myProp=”表达式”> < any > 补充, 支持简写: < any: myProp = “表达式” > < any > 作用: 将表达式执行的结果 绑定 到当前元素的myProp属性 < imgv-bind:src=”‘img’+myImg”
alt = “” > 动态样式绑定 < p: style = “{backgroundColor:myBGColor}” > 动态样式绑定 < p > 动态样式类绑定 < h1: class = “{myRed:false}” > 动态样式类的绑定 < h1 > 6、 指令 – 双向数据绑定 方向1: 数据绑定到视图 方向2: 将视图中( 表单元素) 用户操作的结果绑定到数据 基本语法: < 表单元素 v – model = “变量” > < 表单元素 > 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 1、 双花括号 mustache(胡子) interpolation( 插值表达式) 语法: < any > {
{
表达式
}
} < any > 作用: 将表达式执行的结果 输出当调用元素的 innerHTML 中; 还可以将数据绑定到视图 2、 指令 – 循环指令 基本语法 1: < any v –
for=”tmp in array”> < any > 基本语法 2: < anyv-
for=”(value,index) in array”> < any > 作用: 在遍历 array 这个集合时, 将临时变量保存在 tmp 中, 创建多个 any 标签 3、 指令 – 选择指令 语法: < anyv-
if=”表达式”> < any > < anyv-
else-
if=”表达式”> < any > < anyv-
else=”表达式”> < any > 作用: 根据表达式执行结果的真假, 来决定是否要将当前的这个元素 挂载到 DOM 树 4、 指令 – 事件绑定 语法: < anyv-on:eventName=”handleEvent”> < any > 作用: 给指定的元素 将 handleEvent 的方法绑定给指定 eventName 事件 5、 指令 – 属性绑定 基本语法: < anyv-bind:myProp=”表达式”> < any > 补充, 支持简写: < any: myProp = “表达式” > < any > 作用: 将表达式执行的结果 绑定 到当前元素的 myProp 属性 < imgv-bind:src=”‘img’+myImg”
alt = “” > 动态样式绑定 < p: style = “{backgroundColor:myBGColor}” > 动态样式绑定 < p > 动态样式类绑定 < h1: class = “{myRed:false}” > 动态样式类的绑定 < h1 > 6、 指令 – 双向数据绑定 方向 1: 数据绑定到视图 方向 2: 将视图中( 表单元素) 用户操作的结果绑定到数据 基本语法: < 表单元素 v – model = “变量” > < 表单元素 > 4. 组件化组件: 组件就是可被反复使用的, 带有特定功能的视图 所谓的组件化, 就像玩积木一样, 把封装的组件进行复用, 把积木( 组件) 拼接在一起, 构成一个复杂的页面应用程序。 组件树就是由各个组件构成的一种数据结构, 它存在的意义是为了帮梳理应用程序 1、 组件的创建 全局组件 Vue.component(‘my-com’, {
template: ` <h2>it is a header<h2> `
}) 局部组件 new Vue({
components: {
‘my-footer’: {
template: ”
}
}
}) 2、 组件使用 作为普通的标签去使用 < my – com > < my – com > 3、 注意事项 1. 组件的id和使用方式 遵循烤串式命名方式: a – b – c 2. 如果一个组件 要渲染多个元素, 将多个元素放在一个顶层标签中, 比如div、 form 3. 全局组件可以用在id为example的范围内的任何一个组件内部, 直接调用可以; 但是局部组件只能在父模板中直接调用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 组件: 组件就是可被反复使用的, 带有特定功能的视图 所谓的组件化, 就像玩积木一样, 把封装的组件进行复用, 把积木( 组件) 拼接在一起, 构成一个复杂的页面应用程序。 组件树就是由各个组件构成的一种数据结构, 它存在的意义是为了帮梳理应用程序 1、 组件的创建 全局组件 Vue.component(‘my-com’, {
template: ` < h2 > it is a header < h2> `
}) 局部组件 new Vue({
components: {
‘my-footer’: {
template: ”
}
}
}) 2、 组件使用 作为普通的标签去使用 < my – com > < m y – com > 3、 注意事项 1. 组件的 id 和使用方式 遵循烤串式命名方式: a – b – c 2. 如果一个组件 要渲染多个元素, 将多个元素放在一个顶层标签中, 比如 div、 form 3. 全局组件可以用在 id 为 example 的范围内的任何一个组件内部, 直接调用可以; 但是局部组件只能在父模板中直接调用5.自定义指令1、 创建和使用 Vue.directive(‘change’, {
bind: function (el, bindings) {
首次调用
},
update: function (el, bindings) {
只要是有数据变化, 都会调用
},
unbind: function () {
解绑
}
}) < any v – change = “count” > < any > 1 2 3 4 5 6 7 8 9 10 11 12 13 1、 创建和使用 Vue.directive(‘change’, {
bind: function (el, bindings) {
首次调用
},
update: function (el, bindings) {
只要是有数据变化, 都会调用
},
unbind: function () {
解绑
}
}) < any v – change = “count” > < any > 6. 过滤器过滤器是针对一些数据 进行筛选、 过滤、 格式化等相关的处理, 变成我们想要的数据过滤器的本质 就是一个带有参数带有返回值的方法Vue1.支持内置的过滤器, 但是Vue2.就不再内置过滤器, 但是支持自定义过滤器。 1、 过滤器的创建和使用1.创建 Vue.filter(‘myFilter’, function (myInput) {
myInput是在调用过滤器时, 管道前表达式执行的结果针对myInput, 按照业务需求做处理返回
return’处理后的结果’
}) 2. 使用 < any > {
{
expression | myFilter
}
} < any > 1 2 3 4 5 6 7 8 9 10 11 12 1. 创建 Vue.filter(‘myFilter’, function (myInput) {
myInput是在调用过滤器时, 管道前表达式执行的结果针对myInput, 按照业务需求做处理返回
return’处理后的结果’
}) 2. 使用 < any > {
{
expression | myFilter
}
} < any > 2、 如何在调用过滤器时, 完成参数的发送和接受1.发送 < any > {
{
expression | myFilter(参数1, 参数2)
}
} < any > 2. 接受 Vue.filter(‘myFilter’, function (myInput, 参数1, 参数2) {
return’处理后的结果’
}) 1 2 3 4 5 6 7 1. 发送 < any > {
{
expression | myFilter(参数 1, 参数 2)
}
} < any > 2. 接受 Vue.filter(‘myFilter’, function (myInput, 参数 1, 参数 2) {
return’处理后的结果’
}) 7. 复合组件知识回顾: Vue.component(‘my-header’, {
template: `<div><div>`
}); < my – header > < my – header > 复合组件: 并不是新的概念, 就是一个组件, 只不过这个组件中 可以调用其他的组件 注意事项: 1. 组件要渲染的内容 取决于在定义组件时template < my – list > < my – item > < my – item > < my – list > 效果是出不来的 2. 允许在一个组件中, 直接来调用另外一个组件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 知识回顾: Vue.component(‘my-header’, {
template: ` < div > < div>`
}); < my – header > < m y – header > 复合组件: 并不是新的概念, 就是一个组件, 只不过这个组件中 可以调用其他的组件 注意事项: 1. 组件要渲染的内容 取决于在定义组件时 template < my – list > < my – item > < my – item > < m y – list > 效果是出不来的 2. 允许在一个组件中, 直接来调用另外一个组件8.生命周期四个阶段: create 准备工作( 数据的初始化。。。) mount 挂载前后针对元素进行操作 update 数据发生变化, destroy 清理工作(关闭定时器、 集合清空..) beforeCreatecreated beforeMountmounted beforeUpdateupdated beforeDestroydestroyed 1 2 3 4 5 6 7 8 9 10 四个阶段: create 准备工作( 数据的初始化。。。) mount 挂载前后针对元素进行操作 update 数据发生变化, destroy 清理工作(关闭定时器、 集合清空..) beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed9.常用属性1、 watch 1. 表单元素的双向数据绑定 v – model = “myValue”
2. 监听 watch: {
myValue: function (newValue, oldValue) {}
}
2、 computed 计算属于是用于在模板中, 搞定复杂的业务逻辑, 因为有依赖缓存。 1. 指定计算属性 computed: {
myHandle: function () {
return数据
}
}
2. 调用 < any > {
{
myHandle
}
} < any > 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 1、 watch 1. 表单元素的双向数据绑定 v – model = “myValue”
2. 监听 watch: {
myValue: function (newValue, oldValue) {}
}
2、 computed 计算属于是用于在模板中, 搞定复杂的业务逻辑, 因为有依赖缓存。 1. 指定计算属性 computed: {
myHandle: function () {
return数据
}
}
2. 调用 < any > {
{
myHandle
}
} < any > 10. 组件间通信1、 父与子通信( props down) 1. 发送 < son myName = ‘zhangsan’ > < son > 2. 接受 到son组件: Vue.component(‘son’, {
props: [‘myName’],
template: ` <p>{{myName}}<p> `
}) 2、 子与父通信(events up) 1. 绑定 methods: {
handleEvent: function (msg) {}
} < son @customEvent = “handleEvent” > < son > 2. 触发 子组件内部: this.$emit(‘customEvent’, 100);
3、 ref(reference 引用参考 外号) 帮助在父组件中 得到子组件中的数据、 方法。 1. 指定ref属性 < son ref = “mySon” > < son > 2. 根据ref得到子组件实例 this.$refs.mySon 4、 $parent this.$parent得到父组件的实例 5、 兄弟组件通信 1.
var bus = new Vue();
2. 接收方 bus.$on(‘eventName’, function (msg) {}) 3. 发送方 bus.$emit(‘eventName’, 123);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 1、 父与子通信( props down) 1. 发送 < son myName = ‘zhangsan’ > < son > 2. 接受 到 son 组件: Vue.component(‘son’, {
props: [‘myName’],
template: ` < p > { { myName } } < p> `
}) 2、 子与父通信(events up) 1. 绑定 methods: {
handleEvent: function (msg) {}
} < son @customEvent = “handleEvent” > < s on > 2. 触发 子组件内部: this.$ emit(‘customEvent’, 100);
3、 ref(reference 引用 参考 外号) 帮助在父组件中 得到子组件中的数据、 方法。 1. 指定ref属性 < son ref = “mySon” > < s on > 2. 根据 ref 得到子组件实例 this.$ refs.mySon 4、 $ parent this.$ parent 得到父组件的实例 5、 兄弟组件通信 1.
var bus = new Vue();
2. 接收方 bus.$ on(‘eventName’, function (msg) {}) 3. 发送方 bus.$ emit(‘eventName’, 123);
11. 补充组件创建的方式1、 直接在template属性中指定模板内容 1. 全局组件 Vue.component 2. 局部组件 {
components: {
‘my-footer’: {
template: “
}
}
}
2、.vue结尾的文件 < template > < template > < script > < script > < style > < style > 3、 单独指定一个模板内容 < script id = ‘myContent’
type = ‘textx-template’ > < script > Vue.component(”, {
template: ‘#myContent’
}) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 1、 直接在 template 属性中指定模板内容 1. 全局组件 Vue.component 2. 局部组件 {
components: {
‘my-footer’: {
template: ` `
}
}
}
2、.vue 结尾的文件 < template > < template > < script > < script > < style > < style > 3、 单独指定一个模板内容 < script id = ‘myContent’
type = ‘textx-template’ > < script > Vue.component(”, {
template: ‘#myContent’
}) 12. 路由模块路由模块的本质 就是建立起url和页面之间的映射关系1、 SPA的基本概念和工作原理SPA: single page application 单一页面应用程序, 只有一个完整的页面; 它在加载页面时, 不会加载整个页面, 而是只更新某个指定的容器中内容。 比如Gmail、 移动的webApp 工作原理: 1. 解析地址栏 完整的页面地址、 路由地址 2. 根据路由地址 从路由词典中找到真正的要加载的页面 3. 发起ajax请求 请求要加载的页面 4. 像指定的容器中 插入加载来的页面 1 2 3 4 5 6 7 8 9 10 11 12 SPA: single page application 单一页面应用程序, 只有一个完整的页面; 它在加载页面时, 不会加载整个页面, 而是只更新某个指定的容器中内容。 比如 Gmail、 移动的 webApp 工作原理: 1. 解析地址栏 完整的页面地址、 路由地址 2. 根据路由地址 从路由词典中找到真正的要加载的页面 3. 发起 ajax 请求 请求要加载的页面 4. 像指定的容器中 插入加载来的页面2、 路由模块的基本使用专业术语: router路由器 route路由 routes 路由数组( 路由词典) 1. 引入vue.js vue – router.js 2. 指定一个容器 < router – view > < router – view > 3. 创建业务所需要用到的组件类
var MyLogin = Vue.component() 4. 配置路由词典
const myRoutes = [{
path: ”,
component: MyLogin
}, {
path: ‘login’,
component: MyLogin
}];
const myRouter = new VueRouter({
routes: myRoutes
}) new Vue({
router: myRouter
}) 5. 测试 修改地址栏中的路由地址, 测试看加载的组件是否正确 注意事项: 1. 先引入vue, 再引入插件 2. 一定要指定router – view 3. route路由 {
path: ”,
component:
}
routes 路由数组[] router 路由器: 按照指定的路由规则去访问对应的组件 new VueRouter 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 专业术语: router 路由器 route 路由 routes 路由数组( 路由词典) 1. 引入 vue.js vue – router.js 2. 指定一个容器 < router – view > < router – view > 3. 创建业务所需要用到的组件类
var MyLogin = Vue.component() 4. 配置路由词典
const myRoutes = [{
path: ”,
component: MyLogin
}, {
path: ‘login’,
component: MyLogin
}];
const myRouter = new VueRouter({
routes: myRoutes
}) new Vue({
router: myRouter
}) 5. 测试 修改地址栏中的路由地址, 测试看加载的组件是否正确 注意事项: 1. 先引入 vue, 再引入插件 2. 一定要指定 router – view 3. route 路由 {
path: ”,
component:
}
routes 路由数组[] router 路由器: 按照指定的路由规则去访问对应的组件 new VueRouter3、 使用路由模块来实现页面跳转的方式方式1: 直接修改地址栏 方式2: js this.$router.push(‘路由地址’);
方式3: < router – link to = “路由地址” > < router – link > 1 2 3 4 5 6 方式 1: 直接修改地址栏 方式 2: js this.$ router.push(‘路由地址’);
方式 3: < router – link to = “路由地址” > < router – link > 4、 完成参数的传递在页面之间跳转的时候, 在有些场景下, 需要同时指定参数 1. 明确发送方和接收方 list–20– > detail 1. 配置接收方的路由地址 detail–》detail: index this.$route.params.index 2. 发送 routerLink to = “detail20”
this.$router.push(‘detail20’) 1 2 3 4 5 6 7 8 9 10 11 在页面之间跳转的时候, 在有些场景下, 需要同时指定参数 1. 明确发送方和接收方 list–20– > detail 1. 配置接收方的路由地址 detail–》detail: index this.$ route.params.index 2. 发送 routerLink to = “detail20”
this.$ router.push(‘detail20’) 5、 路由嵌套在一个路由中, path对应一个component, 如果这个component需要根据 不同的url再加载其他的component, 称之为路由的嵌套 举例: 比如A组件现在需要根据不同的url, 加载B组件或者C组件 1. 给A组件指定一个容器 < router – view > < router – view > 2. 配置路由词典 {
path: ‘a’,
component: A,
children: [{
path: ‘b’,
component: B
}]
}
需求: 现在有两个组件, 分别是loginmail, 建立SPA。 在此基础上, 希望mail组件 嵌套inboxoutboxdraft 补充: 在设置子路由, 路由匹配规则依然是适用的, 只不过路由地址为空和异常, 要携带父组件的路由地址 mail maildraft 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 在一个路由中, path 对应一个 component, 如果这个 component 需要根据 不同的 url 再加载其他的 component, 称之为路由的嵌套 举例: 比如 A 组件现在需要根据不同的 url, 加载 B 组件或者 C 组件 1. 给 A 组件指定一个容器 < router – view > < router – view > 2. 配置路由词典 {
path: ‘a’,
component: A,
children: [{
path: ‘b’,
component: B
}]
}
需求: 现在有两个组件, 分别是 login mail, 建立 SPA。 在此基础上, 希望 mail 组件 嵌套 inbox outbox draft 补充: 在设置子路由, 路由匹配规则依然是适用的, 只不过路由地址为空和异常, 要携带父组件的路由地址 mail mail draft13.搭建基于CLI开发环境的方式1.指定一个文件夹 C: xampphtdocsframeworkvueproject 2. 将tpls.zip拷贝到project中 3. 右键单击压缩包, 解压缩到当前文件夹 4. 进入到tpls 5. 同时按下shift和鼠标右键, 选择在此位置打开命令行串口 6. 执行npm install 7. 执行npm start 1 2 3 4 5 6 7 8 1. 指定一个文件夹 C: xampp htdocs framework vue project 2. 将 tpls.zip 拷贝到 project 中 3. 右键单击压缩包, 解压缩到当前文件夹 4. 进入到 tpls 5. 同时按下 shift 和鼠标右键, 选择在此位置打开命令行串口 6. 执行 npm install 7. 执行 npm start14.axios1.axios的get方法export
const getAjax = function (getUrl, getAjaxData) {
returnaxios.get(getUrl, {
params: {
‘getAjaxDataObj1’: getAjaxData.obj1,
obj1为getAjaxData的一个属性 ‘getAjaxDataObj2’: getAjaxData.obj2
}
})
}
1 2 3 4 5 6 7 8
export const getAjax = function (getUrl, getAjaxData) {
returnaxios.get(getUrl, {
params: {
‘getAjaxDataObj1’: getAjaxData.obj1,
obj1为getAjaxData的一个属性 ‘getAjaxDataObj2’: getAjaxData.obj2
}
})
}
2. axios的post方法export
const postAjax = function (getUrl, postAjaxData) {
returnaxios.get(postUrl, {
‘postAjaxDataObj1’: postAjaxData.obj1,
obj1为postAjaxData的一个属性 ‘postAjaxDataObj2’: postAjaxData.obj2
})
}
1 2 3 4 5 6 7 8
export const postAjax = function (getUrl, postAjaxData) {
returnaxios.get(postUrl, {
‘postAjaxDataObj1’: postAjaxData.obj1,
obj1为postAjaxData的一个属性 ‘postAjaxDataObj2’: postAjaxData.obj2
})
}
3. axios的拦截器主要分为请求和响应两种拦截器, 请求拦截一般就是配置对应的请求头信息(适用与常见请求方法, 虽然ajax的get方法没有请求头, 但是axios里面进行啦封装), 响应一般就是对reponse进行拦截处理, 如果返回结果为[] 可以转化为01.请求拦截: 将当前城市信息放入请求头中axios.interceptors.request.use(config => {
config.headers.cityCode= window.sessionStorage.cityCodejsCookie.get(‘cityCode’) returnconfig
}, 1 2 3 4 axios.interceptors.request.use(config = > {
config.headers.cityCode= window.sessionStorage.cityCodejsCookie.get(‘cityCode’) returnconfig
}, 2. 响应拦截: 处理reponse的结果。
» 本文来自:前端开发者 » 《Vue——前端知识点总结_前端开发者》
» 本文链接地址:https://www.rokub.com/2249.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!