FCC学习计划,主要是为了帮助大家同时也包括我自己,走出懂和不懂的交界线。在设计一条大体层次分明的主线下,大家一起分享学习,不再是你讲我听的低效率模式,而是大家一起学习一起分享一起参与。在一个主线下,重新捋清楚大家的技术盲区。本期内容选择武汉前端行业比较流行的Vue 框架,在基础的层次上,稍微提高和进行发散,不论你是老手或是新手,相信参加过后都会有很大的收获。
**主线简介
—Vue 语法
—Vue 属性方法
—Vue 指令
——————————————————————————————————说明的分割线———————————————————————————————————————
关于例子:文中的例子是一些自己半知半解的问题,感谢大家帮我解惑,哈哈。知识点的问题不局限于
下列提出的,大家也可以举出自己的疑惑,以聊天的形式,氛围轻松愉悦。
关于主线内容:本期主线暂时是基础的部分,如果时间充足也可以继续展开,剩余的内容将尽量保持紧凑。
关于后续记录:讨论过程中可能会进行一定程度的记录,不过如果过程比较激烈,比如打起来了,开玩笑的
。记录和现场相比可能会有遗漏的部分,建议大家现场围观,积极参与。
-
Vue 语法
- 括号的使用环境,我们常见的双括号,单括号,已经习惯了直接去使用,那么大家知道有什么规则在里面么:显示数据中的html使用
{{{}}}
在v-directive
中的{}
又有什么意义,在文本处{{}}
。
Mustache语法{{ message }} {{{ htmlSegment }}} ![]({{ photoURL }})
还有es6新特性`${message}'to be one'`
- html 见过的javascript表达式
{{number + 1}}
不能使用的{{var some = 1}}
语句or表达式 - 被劫持的this vue实例如何拦截this,你开发中遇到的一些常常丢失this的情况
- 括号的使用环境,我们常见的双括号,单括号,已经习惯了直接去使用,那么大家知道有什么规则在里面么:显示数据中的html使用
-
Vue 属性方法
- 生命周期钩子「细聊」
- 生命周期里的keep-alive,怎么实现路由前进刷新后退不刷新
- 数组处理方法
Vue 中的数据双向绑定只能对对象进行绑定,假如数据是一个对象呢,
Vue 对观察数组变化做了什么处理,常见的有哪些数组方法。对原生方法处理后有什么影响,怎么避免 - 过滤
{{ message | capitalize }}
,你眼中 vue 其他地方也用到了过滤。
- 生命周期钩子「细聊」
-
Vue 指令
V-bind
V-on
修饰符
不同修饰符的作用互相独立,因此串联顺序不会影响使用效果;self 修饰符的作用是阻止响应由其他元素冒泡的事件,stop 修饰符用于停止冒泡,但这两者并不矛盾,可以应用于同一元素绑定事件;大部分 HTML 属性不区分大小写,使用 camel 修饰符时,对应的属性会被移除“-”号,但并不会呈现为驼峰样式,仅对类似于 SVG 元素的 viewBox 这样的特殊属性才会改为驼峰样式。
自定义修饰符到底有什么用?怎么用?v-if v-show
区别及使用环境v-for
-
类与样式的绑定姿势
- 类绑定的对象语法
<span class="switch" :class="{toggle: show }"></span> data:{ show :0, }
- 类绑定的数组语法
<span class="switch" :class="classArr"></span> data:{ classArr:['border','shadow'], }
- 样式绑定的对象语法
<span class="switch" :style="{color : redColor, fontsize : fontSize +'px' }" ></span> data:{ activeColor: 'red', fontSize: 30, }
- 样式绑定的数组语法
<div v-bind:style="[styleObjectA, styleObjectB]"></div> styleObjectA: { color: red }, styleObjectB: { fontSize: '30px', boxShadow: '10px 10px 5px #888' }
-
Vue 小技巧
-
vm.$atrr === atrr
「Vue实例暴露了一些有用的实例属性和方法,都以有前缀$,」
Vue 的EventBus
就是通过生成空的Vue实例,bus.$emit(),bus.$on()
,在不同组件位置绑定和触发事件达到数据传递的效果。暴露的其他属性方法有vm.$data vm.$el vm.$watch
,那么这些你能想到的可以用来做什么呢 - 强大的
is = 'component'
- 未加载页面时会闪{{ }} (花括号)背后是怎么实现的。
v-cloak
-
-
进阶:
- Vue router
.如何使用vue-router:比如动态路由、路由守卫、meta - Vuex 你眼中的 Vuex , 你所带着的疑问。
例如:vuex与bus的区别,什么时候使用哪一个 - 聊一聊Vue命名优雅姿势。
- 如何写好组件:比如怎么预留接口,做好通信
- 如何写自己的插件,比如写一个弹框,一个加载条
- 如何使用render方法
- 一些文档里写着高阶的api的使用姿势
- 构建vue多页面应用,比如脚手架的搭建
- Vue router