一. Vue 基础
- 模板语法 (1)插值 a.文本 {{}} b.纯HTML v-html ,防止XSS,CSRF c.表达式
(2)指令:是带有 v- 前缀的特殊属性 v-bind v-if v-show v-on:click v-for
(3)缩写 v-bind:src => :src v-on:click => @click - class 与 style
(1)绑定HTML Class -对象语法 -数组语法
(2)绑定内联样式 -对象语法 -数组语法
3. 条件渲染
(1)v-if
(2)v-else v-else-if
(3)template v-if ,包装元素template 不会被创建
(4)v-show
4. 列表渲染
(1)v-for (特殊 v-for=“n in 10”) a. in b. of
(2)key: *跟踪每个节点的身份,从而重用和重新排序现有元素 *理想的 key 值是每项都有的且唯一的 id。
(3)数组更新检测
a. 使用以下方法操作数组,可以检测变动 push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决
(1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice
(4)应用:显示过滤结果
5. 事件处理
(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名
(3)内联处理器方法-执行函数表达式
(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html
(5)按键修饰符
6. 表单控件绑定/双向数据绑定 v-model (1)基本用法 -购物车 (2)修饰符 .lazy :失去焦点同步一次 .number :格式化数字 .trim : 去除首尾空格