vue学习笔记

Vue2.x 核心技术

https://www.imooc.com/learn/1091

 

计算属性与侦听器

计算属性：computed
侦听器：watch
使用场景，watch（异步场景），computed（数据联动）

 

条件渲染、列表渲染、Class与Style绑定
条件渲染：v-if v-else v-else-if，v-show
列表渲染：v-for <div v-for="item in list">
style和class 的绑定：style可写成对象形式，然后通过属性绑定v-bind进行绑定；class绑定写成对象形式，键名是真是的class名称，值为布尔值或表达式，或者可以使用数组直接输出字符串，也可以用对象表达式+数组混合的方式

1、对象形式：:class="{'active':true}"
2、数组&对象形式：:class="['active',{'another':true}]"

 

页面加载是出现闪烁的处理办法：
1<div v-cloak>{{msg}} --- {{age}}</div> [v-cloak]{ diaplay:none; }
2<div v-html="template"></div> // v-html可输出原始代码
3<div v-text="content"></div> // v-text进行转译

组件化的思想
独立的、可复用的、整体化的
组件化的原因
实现功能模块的复用、高执行效率、开发单页面复杂应用
拆分原则
300行原则（包括样式、逻辑等所有代码）、复用原则（经常去使用，比如头部导航和底部版权）、业务复杂性原则