找回密码
当前位置：前端开发者 > Vue.js > 正文

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

2018-04-17 分类：Vue.js 阅读(815) 评论(0)
前端知识点总结—— 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的结果。
赞(1)
前端开发者 » Vue——前端知识点总结_前端开发者
64K

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论