Vue 基础-02-重点

Vue 基础-day02-重点

01-基础-系统指令-v-bind-绑定 class-对象语法

:class="{期望的类名:data中bool型数据的值}"

        <p class="main" :class="{left:a,right:b}">
            内容
        </p>

02-基础-系统指令-v-bind-绑定 class-数组语法

 <p class="main" :class="[a,b]">内容

        </p>

a和b的值是最终渲染的类名

03-基础-系统指令-v-bind-绑定 style-对象语法

<p :style="{color:a,fontSize:b}">内容</p>

{}中的key是css属性font-size的js写法fontSize

04-基础-系统指令-v-bind-绑定 style-数组语法

<p :style="[a,b]">内容</p>

a和b是data中的{属性名:值}类型的数据

05-基础-系统指令-v-model-基础用法

回顾

1. v-model绑定表单元素

效果

1. value的初始值 = msg的初始值
2. 当视图操作->UI操作->视图变化->View变化->msg数据发生变化->data中响应式数据->{{msg}}

注意: v-model绑定的数据 只有v-model绑定的数据才是双向绑定 -> V->M M->V

06-基础-系统指令-v-model-语法糖原理

        <input type="text" :value="msg" @input="msg=$event.target.value">

v-model其实就是语法糖(简化语法)

回顾

1. 事件 input和onchange
2. e.target->触发当前事件的标签

07-基础-系统指令-v-model-绑定其他表单元素

select+option

   <!-- 相对常用的其他表单元素 -> 选择框
        1. v-model绑定数据select的初始值和option的value一样->默认显示
        2. 选中某个option->被选中的option的value赋值给v-model绑定的属性select值
        -->
        <select v-model="select">
      <option value="beijing">北京</option>
      <option disabled value="">请选择</option>
      <option value="shanghai">上海</option>
      <option value="chengdu">成都</option>
    </select> {{select}}

08-基础-系统指令-v-cloak

作用: {{msg}}页面闪烁

   v-cloak 解决{{}}时页面闪烁问题->
         1. 给vue管理的容器标签div#app添加v-cloak
         2. 样式代码中,选中拥有v-cloak属性的元素,设置样式display:none


<div id='app' v-cloak>
    </div>

  <style>
        [v-cloak] {
            display: none
        }
    </style>

注意: v-cloak不赋值

09-基础-系统指令-v-once

设置v-once的元素 只渲染一次(即使data变化->也不渲染)

10-基础-表格案例-添加商品

添加添加- > 向表格中添加新数据

1. input v-model="name"
2. @click="add"
3. methods 增加方法
4. 向this.list数组中添加元素
5. 清空输入框

11-基础-表格案例-删除商品

1. 找按钮->绑定事件
2. methods 增加方法
3. this.list.splice(索引,1)

12-基础-表格案例-其他效果演示

1. 日期格式需要处理
2. 自动获取焦点
3. 搜索功能

13-基础-过滤器-过滤器的文档分析

场景: data中的数据格式(日期格式/货币格式/大小写等)需要数据时

使用位置:{{}}和v-bind="表达式"

具体用法:{{msg | 过滤器名字}}

分类:本地(局部)和全局

本地: 通过选项filters

全局: 在newVue上面 Vue.filter()

14-基础-过滤器-全局过滤器

1. 定义Vue.filter("名字",函数(v){})
2. 功能实现 函数(v){return 处理结果}
3. 使用 {{msg | 名字}}

注意: 函数形参v指的过滤器的调用者 也就是某个被处理的数据

15-基础-过滤器-局部过滤器

1. 定义 通过选项filters:{}
2. 功能
3. 使用

注意: 局部(本地)只能在当前选项所在的Vue所管理的视图区域

16-基础-过滤器-传参数和串联使用

1. 过滤器可以传自己的参数

2. 过滤器可以串联使用

   {{count | a("元")}}
   {{count | aFilter("元") | bFilter}}

b过滤器处理的是上一个过滤器所返回的结果

17-基础-表格案例-使用过滤器完成日期格式处理

使用过滤器结合moment实现日期格式处理

18-基础-ref 操作 DOM

if->v-if

for->v-for

.onclick->@click->v-on:click

获取焦点->js写法 input.focus()->这个dom操作有没有对应的v-指令->文档->没有指令

->可以考虑在vue操作dom元素->ref操作dom

1. 给要操作的元素设置ref属性值
2. 在选项mounted(){this.$refs.ref的值.js的方法()}

注意: mounted(){} vue渲染完页面->自动触发

19-基础-自定义指令-全局自定义指令

获取焦点-> dom操作->指令->没有->没有自带的指令->没有默认的指令-> 自己写一个指令->自定义指令

参照过滤器: 两类+三步

1. 定义

2. 功能

3. 使用

   Vue.directive("focus", {
   // inserted方法 不需要我们调用
   inserted: function(el) {
   console.log(el);
   // el指的是将来使用该指令的标签 这里就是input
   el.focus();
   }
   });

注意:

1. 命名指令时 不加v-
2. el指的是将来该指令的使用 这里input
3. inserted会自动触发

20-基础-自定义指令-局部自定义指令

1. 定义 (选项)
2. 功能
3. 使用

选项directives 类比 过滤器filters

21-基础-表格案例-使用自定义指令完成自动获取焦点功能

获取焦点的解决方案

1. ref操作dom
2. 自定义指令(全局和局部)

案例中使用的相对常用的全局自定义指令

22-基础-实例选项-计算属性-文档分析

搜索-> 计算属性

场景: 复杂逻辑->当数据b依赖了数据a.此时把数据b写在计算属性中,数据a依然写在data中

计算属性computed选项:{计算属性b:值}

计算属性b的值:带有return的函数

用法: 计算属性b和data中的数据 用法一样,-> 视图{{}}渲染

目的:简化视图中的代码->利于代码维护

23-基础-实例选项-计算属性-基本使用

24-基础-实例选项-计算属性和 methods 区别

25-基础-表格案例-商品搜索功能分析

26-基础-回顾-filter 方法和 startsWith 方法

27-基础-表格案例-用计算属性实现商品搜索功能