vue学习记录

vue基本知识

使用webpack工具结合vue进行学习。

指令

• v-text 是元素的innerText只能在双标签中使用后
• v-html 是元素的innerHTML,不能包含大括号表达式
• v-if 元素是否移除或者插入
• v-show 元素是否显示
• v-model 双向数据绑定
• v-bind 单向数据绑定
  • 简化的写法： :属性名="表达式"
• class结合v-bind使用
  • 根据可变表达式的结果来给class赋值，需要用到v-bind:class=“XXX”
  • class 结果分类
    • 一个样式：返回字符串（三元表达式和样式名）
    • 多个样式：返回对象（样式做key，true或false做值）
• methods和v-on的使用
  • 绑定事件的方法
    • v-on:事件名="表达式||函数名"
    • 简写：@事件名="表达式||函数名"
  • 函数名如果没有参数，可以省略() 只给一个函数名称
• v-for 使用
  • 可以操作数组 (item, index)
  • 可以操作对象 (value, key, index)
• key(循环时候的添加的) 类似trank by 的一个属性，用于js中的元素与页面之间的关联，当删除元素的时候，是单个元素的删除而不是替换，所以需要关联其关系