FCC 武汉 Vue学习计划展开「第一期」【即将开始】

FCC学习计划，主要是为了帮助大家同时也包括我自己，走出懂和不懂的交界线。在设计一条大体层次分明的主线下，大家一起分享学习，不再是你讲我听的低效率模式，而是大家一起学习一起分享一起参与。在一个主线下，重新捋清楚大家的技术盲区。本期内容选择武汉前端行业比较流行的Vue 框架，在基础的层次上，稍微提高和进行发散，不论你是老手或是新手，相信参加过后都会有很大的收获。

**主线简介
—Vue 语法
—Vue 属性方法
—Vue 指令
——————————————————————————————————说明的分割线———————————————————————————————————————
关于例子：文中的例子是一些自己半知半解的问题，感谢大家帮我解惑，哈哈。知识点的问题不局限于
      下列提出的，大家也可以举出自己的疑惑，以聊天的形式，氛围轻松愉悦。
关于主线内容：本期主线暂时是基础的部分，如果时间充足也可以继续展开，剩余的内容将尽量保持紧凑。
关于后续记录：讨论过程中可能会进行一定程度的记录，不过如果过程比较激烈，比如打起来了，开玩笑的
。记录和现场相比可能会有遗漏的部分，建议大家现场围观，积极参与。

• Vue 语法

  • 括号的使用环境，我们常见的双括号，单括号，已经习惯了直接去使用，那么大家知道有什么规则在里面么：显示数据中的html使用{{{}}}在v-directive中的{}又有什么意义，在文本处{{}}。

    {{ message }} {{{ htmlSegment }}} ![]({{ photoURL }})
    

    Mustache语法
    还有es6新特性 `${message}'to be one'`
  • html 见过的javascript表达式 {{number + 1}}不能使用的{{var some = 1}}
    语句or表达式
  • 被劫持的this vue实例如何拦截this，你开发中遇到的一些常常丢失this的情况

• 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多页面应用，比如脚手架的搭建

「未预告：Next」 你眼中的设计模式and 你手中的设计模式[一]

「未未期预告：Next」 你眼中的设计模式and 你手中的设计模式[二]