02.vue进阶

1.v-bind操作 class

1. tab栏切换
   

<div id="app">
  <ul>
     <li v-for="(item,index) in list" :key="item.id" @click="activeIndex=index">
       <a :class="{active:index===activeIndex}" href="#">{{item.name}}</a>
     </li>
   </ul>
</div>
<script>
  ...
   data:{
	activeIndex=0 //记录高亮的下标
	list:[...] //数据
  }
</script>

2. 进度条
   

语法 :style=“{ 样式 }” 对于单个标签样式，直接在行内控制

2.v-model应用于其他表单

3.计算属性

• 利用现有数据，计算新值的 属性
• 缓存特性：再次使用时，直接读取缓存，提升性能
• computed vs methodes ，

4. watch-监听器

①简单写法

监视数据变化

②完整写法

监听对象的所有属性变化

5.Vue生命周期

6.Vue cli 脚手架

全局命令工具

6.1 组件化

1.优点：便于维护，利于复用
2.分类：普通组件 、根组件
3.根组件：包含所有的普通组件
①template 结构
②style 样式
③script行为

6.2 注册组件