02

前端TDK
216 阅读6分钟

vue基础-第二天

01-反馈

姓名 意见或建议
*** 老师棒棒哒
*** 慢慢慢慢，信息量太大，求练习时间
*** 老师,您的笔记可不可以写的再详细一点,初学Vue,可能一个很小的是知识点都很难理解,谢谢老师 *** 对于v-for理解偏差,刚哥,以后咱div里面放h标签好不好,老是放个P隔着屏幕都能闻到,啊 还有就是为刚哥的汉语拼音操心发愁啊O(∩_ *** 周老师,ES6中的函数this指向不清楚.什么时候是指向window,什么时候是指向其他的情况呢? 谢谢~ *** 视频杂音太大

  • 笔记问题
  • v-for 指令 增强标签的功能 让标签具备遍历的功能
  • ES6中的函数-->箭头函数-->其实是没有this-->使用的是当前定义的上一级的this
  • 当前调用时 上一级的this指向谁箭头函数内的this指向谁
  • 插耳机 02-回顾
  • vue是一个js框架
  • 适合做spa类型系统
  • mvvm框架 减少dom操作 数据驱动视图 数据双向绑定
  • 使用vue有三个选项 new Vue({}) el data methods
  • 插值表达式 {{}} 指令
  • v-text v-html
  • v-if v-show
  • v-on 简写 @
  • v-bind 简写 ：
  • v-for
  • v-model 语法糖 -> :value @input

03-vue基础-v-bind-绑定class

  • 语法： v-bind:class=“数据” :class="数据"
  • 数据：可以是对象 可以是数组
  • 对象：数据格式--》{'类名'：‘布尔值’} 键就是类名 布尔值 true 添加 false 移除
  • 数组：数据格式--》['类名'，‘类名’] 添加 加一项 移除 去除这一项

04-vue基础-v-bind-绑定style

  • 语法： v-bind:style=“数据” :style="数据"
  • 数据：可以是对象 可以是数组
  • 对象：数据格式--》 {css属性:css属性的值，...}
  • 数组：数据格式--》[{css属性的键值对},{css属性的键值对}]

05-vue基础-v-cloak

  • 是在视图未渲染的时候去隐藏视图使用插值表达式的地方
  • 但是需要自己配合 写一段样式 ` [v-cloak]{ display: none; }

06-vue基础-v-once

  • 作用：使用该指令的元素只会渲染一次

07-表格案例-静态页面

  • 了解结构
  • 分析需求
    • 列表展示
    • 删除
    • 添加
    • 搜索

08-表格案例-列表展示

  • 步骤
    • 引入vue
    • 初始化实例
    • 指定数据 [{},{}]
    • 在tr的位置进行遍历 使用的是 v-for ：key指定的是 item.id
    • 在tr内部去通过插值表达式 输出内容

09-表格案例-添加品牌

  • 步骤
    • 绑定添加事件
    • 绑定v-model数据 输入框
    • 把输入的内容 组织对象 push 追加list数据
    • 清空输入框内容

10-表格案例-删除品牌

  • 步骤
    • 绑定事件 主要 阻止浏览器行为
    • 获取到索引- 通过id去查找（findIndex((item,i)=>item.id===ID)） this.list.splice(index,1)
    • 补充：提示没有数据 v-if="list.length===0"

11-表格案例-其他效果演示

  • 处理时间格式
  • 自动获取焦点 给标签加上 autofocus 属性但是这是H5的方式 使用vue的方式来实现
  • 搜索

12-过滤器-文档分析

  • 自己分析：作用是把原始数据按照一定的规则转换成新格式的数据
  • 在插值表达式可是使用 在v-bind的属性也是可以使用
  • 使用语法：{{message | 过滤器}}

13-过滤器-全局过滤器

  • 一个VM实例管理一个区域，但是可以使用多个VM管理多个区域
  • 定义的全局过滤器 可以在任何视图使用
  • 如果 vm 管理的区域想使用 过滤器 需要在实例之前来定义过滤器
  • 语法：Vue.filter('过滤器的名称',function(管道符前的结果){//逻辑 return '返回结果'})

14-过滤器-局部过滤器

  • 如果定义的是局部的过滤器 只能在当前定义过滤器的实例管理的视图中使用
  • 在 new Vue({}) 选项对象定义一个 选项 filters 指向对象 来定义过滤器
  • key:function(v){}
  • key的名字就是过滤器的名称
  • 函数就是处理函数一定需要返回值
  • 函数中的v是管道符前的执行结果

15-过滤器-参数和串联使用

  • 串联语法 {{message|upper|其他过滤器}}
  • 传参 {{message|upper|其他过滤器(参数) }}

16-表格案例-用过滤器转换日期

  • 自己去转换日期
  • 使用momnet.js

17-vue基础-ref操作dom

  • 给这个元素加一个属性 ref="dom的标识"
  • 在函数中 vm.$refs 的对象 你的dom就挂载在该对象
  • 语法：this.$refs.dom的标识 去操作dom

18-自定义指令-全局指令

语法：Vue.directive('指令名称',{inserted:function(){ //实现指令的功能 } })

19-自定义指令-局部指令

 /* 
选项  directives:{key:value} 
key就是指令的名称
value就是配置指令的对象 {inserted:function(el){//实现指令功能}}
*/

20-表格案例-用指令获取焦点

Vue.directive('focus',{
    inserted(el){
      el.focus()
    }
  })

21-计算属性-文档分析

  • 使用场景：当前插值表达式逻辑复杂是 使用 计算属性 实现
  • 计算属性：会依赖data中的数据，通过一定的逻辑生成一个新数据

22-计算属性-基本用法

  • 在Vue({}) 选项中 computed 选项
  • computed:{} 对象是用来定 若干个计算属性的
  • key:value组成
  • key 计算属性名称
  • value 处理逻辑的函数 函数的返回值就是计算属性的值

23-计算属性-methods方法区别

  • 视图更新时，操作的不是计算属性的数据，那么计算属性不会再次计算 函数会再次执行
  • 当多次调用的时候 计算属性会缓存 函数多次调用

24-表格案例-商品搜索功能分析

  • 获取输入的搜索关键字 v-model绑定
  • 根据搜索关键字 去 data中的list 查找
  • 使用计算属性 去依赖list数据 获取符合条件的数据也是一个数组
  • 默认是所有的数据都符合条件 一开始就可以使用 筛选后的数组

25-表格案例-回顾ES6高阶函数

  • Array.filter() 筛选数组中符合条件的选项返回一个新数组
  • const arr = [1,2,3,4,5]
// 筛选 大于 3 的选项  组成一个新数组
// filter 也会遍历
const newArr = arr.filter((item,i)=>{
    return item > 3
})

// ES6的函数
// findIndex()  
// padStart(10,'-')  padEnd(10,'-')
  • String.includes() 判断字符串中是否包含某段字符
  • const str = 'abcd'
const flag = str.includes('ab')

26-表格案例-计算属性实现搜索

见案例

avatar
文章
阅读
粉丝