VUE重点知识介绍

vue基础-一重点

01-基础-vue是什么?

vue.js 是前端js框架

库和框架的区别(方法是否需要自己来调用)

02-基础-为什么学vue

传统技术栈无法解决复杂项目的业务逻辑

企业需求

vue最容易上手

03-基础-vue能做什么

几乎没有DOM操作

适合SPA项目开发

04-基础-vue特点

通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML

05-基础-一些链接

vue官网->收藏

06-基础-vue三种安装方式

1. 本地文件
2. cdn引入
3. npm i vue

07-基础-HelloWorld

1. 在视图中 div#app
2. 引入vue.js
3. new Vue({})
4. Vue实例的选项: el data
5. 在视图中 通过{{}}使用data中的数据

08-基础-实例选项-el

通常赋值 id选择器

注意: 不能直接管理html或者是body

09-基础-实例选项-data

1. 响应式数据
2. 可以在视图中{{数据}} 可以vm.属性访问数据

10-基础-实例选项-methods

1. 在视图中 {{fn1()}} 调方法
2. vm.fn1()
3. 在视图中 通过指令 @click=“fn1()”

注意: 不推荐使用箭头函数 this指向的不是vm对象

11-基础-术语解释-插值表达式

{{data中的数据}}

注意: var a=10 if for不能写!

12-基础-术语解释-指令

所有指令v-开头

所有指令都在开始标签位置

每个指令都是为了取代DOM操作

作用:增强html功能

13-基础-系统指令-v-text和v-html

1. v-text作用: 替换标签全部内容
   • {{}}会替换出现插值表达式的位置
2. v-html作用:替换标签全部内容
   • v-html可以识别字符串中的标签

最常用的 {{}}

注意: 不推荐使用v-html 安全问题(跨站脚本攻击)

14-基础-系统指令-v-if和v-show

条件渲染

当标签频繁显示与隐藏 切换频繁 v-show (display)

当标签频繁显示与隐藏 切换不频繁 v-if

15-基础-系统指令-v-on

作用:绑定事件

语法: @事件名.修饰符=“methods中的方法”

修饰符: once和prevent

注意: $event表示事件对象

16-基础-系统指令-v-for-数组

最终写法 (value,index) in data中的数组名

解释: value指数组中的元素值 index指每个元素的索引/下标

17-基础-系统指令-v-for-对象

最终语法 (v,k,i) in data中的对象名

解释: v指对象中的值 k指key名 i指的键值对的索引 从0开始

18-基础-系统指令-v-for-key

数组最终写法

• 对象最终写法

• 原因: 渲染效率更高

  19-基础-系统指令-v-bind-基础用法

  作用: 绑定标签的任何属性

  场景: 当标签的属性值不确定时

  语法: :要绑定的属性名=“data中的数据”

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

  作用: 绑定表单元素

  21-基础-表格案例-效果演示

  1. 列表渲染
  2. 添加商品
  3. 删除商品
     静态页面准备好

  22-基础-表格案例-列表渲染

  . 找到重复出现的标签结构

  1. 确定要用的指令 v-for列表渲染 (v,i) in list数组
  2. 在data中提供一个数组list
  3. 在视图中 通过{{}}使用数据

  23-基础-表格案例-处理无数据时的渲染

  v-if=“list.length===0”

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

  1. 找到输入框 -> v-model=“data中的数据”
  2. 在data中提供一个itemname数据
  3. 找到添加按钮 绑定事件 @click=“addItem()”
  4. 在methods中提供addItem方法
  5. 在addItem()中 向list数组中添加元素

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

  1. 找到删除按钮 @click=“deleItem()”
  2. 在methods提供deleItem()
  3. 在deleItem()中 从list中移除当前元素

  Vue基础二-重点

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

  <p :class="{left:a,active:b}">内容</p>
  
  data:{
      a:true,
      b:true
  }
  

  当a的值为true时 类名left生效

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

  <p :class="[a,b]">内容</p>
  
  data:{
      a:'left',
      b:'foot'
  }
  

  03-基础-系统指令-v-bind-绑定style-对象语法(欠视频)

  <p :style="{color:c,fontSize:f}">内容</p>
  
  data:{
      c:'red',
      f:'30px'
  }
  

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

          <p :style="[a,b]">neirong</p>
  
  data:{
      a:{},
          b:{}
  }	
  

  05-基础-系统指令-v-bind-切换class练习

  @click=“isActive=!isActive”

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

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

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

  双向数据绑定

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

  1. 多行文本输入框
  • textarea标签内容是无效的

  2. 复选框

  3. 一个复选框 v-model=“布尔”

  4. 多个复选框 v-model=“同一个数组”

  5. 单选按钮 radio

  • 多个单选按钮绑定 v-model=“同一个数据”

  4. 下拉框 select+option

  5. 显示默认项 v-model="select"和默认option的value值一致

  6. select值是选中option对应value值

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

  场景: {{}}闪烁问题

  1. div#app v-cloak
  2. style中 [v-cloak]{display:none}

  注意: v-cloak不需要赋值

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

  场景: 当标签只需要被渲染一次时,

  注意:不需要赋值

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

  1. 自动获取焦点
  2. 日期格式处理

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

  1. 场景: 当数据格式需要处理时(文本格式化)
  2. 分类:全局和局部(本地)
  3. 使用位置: {{msg|过滤器}} 和 v-bind:属性=“表达式|过滤器”

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

  1. Vue.filter(过滤器名字,(v)=>{})
  2. (v)=>{return 处理的结果}
  3. 在视图中{{被处理的数据 | 过滤器的名字}}

  注意: v参数自带的 不需要手动传入

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

  1. 通过选项filter定义过滤器 filters:{过滤器名字:function(v){}}
  2. function(v){return 处理的结果}
  3. 在视图中{{msg|过滤器名字}}
     注意: 选项filters 不要忘记s

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

  1. 传参数 {{msg|过滤器名字(自己的参数)}} -> (v,y)=>{y指的是自己传的参数}
  2. 串联 {{msg|过滤器A|过滤器B}}
     注意: 过滤器B处理的是过滤器A所retrun的结果

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

  moment(v).format(日期格式)

  16-基础-ref操作DOM

  场景: 在vue操作dom元素

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

  注意: mounted是选项 不需要我们调用

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

  获取焦点->没有自带指令->自定义指令

  1. Vue.directive(指令名,{inserted(el){}})
  2. inserted(el){具体功能}
  3. v-指令名

  指令名不要加v-

  inserted(el){el指的是使用该指令的dom元素}

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

  1. 通过选项directives定义局部自定义指令 directives:{指令名:{inserted(el){}}}
  2. inserted(el){}
  3. 使用指令 v-指令名

  注意: 只能在该选项所在的vue实例所管理的视图中去使用

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

  ref操作dom 和 获取焦点 自定义指令 没有必然联系

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

  场景: 当数据A的逻辑很复杂时 把A这个数据写在计算属性中

  代码位置: 通过选项computed:{计算属性a:值}

  值: 带有返回值retrun的函数

  计算属性a和data中的数据用法一样

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

  当计算属性b依赖了data中的数据a时,

  当a变化时,b会自动变化

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

  当计算属性没有依赖data数据时

  会把第一次使用计算属性retrun的结果进行缓存

  总结

  1. 过滤器
     1. 定义过滤器
     2. 具体功能 (v)=>{}
     3. 使用过滤器
  2. 自定义指令
     1. 定义指令
     2. 具体功能 inserted(el){}
     3. v-指令名
  3. ref操作dom
     1. 给要操作的dom元素 设置ref
     2. mounted(){this.$refs.ref属性值.focus()}
  4. 计算属性
     场景: 数据b依赖数据a时 b改成计算属性
     用法: b和data中的数据用法一样 {{b}}
     值: funtion(){retrun 复杂逻辑的结果}
     特点
     依赖了a,a变->b自动变化
     没有依赖a,第一次结果缓存