vue基础-一重点
01-基础-vue是什么?
vue.js 是前端js框架
库和框架的区别(方法是否需要自己来调用)
02-基础-为什么学vue
传统技术栈无法解决复杂项目的业务逻辑
企业需求
vue最容易上手
03-基础-vue能做什么
几乎没有DOM操作
适合SPA项目开发
04-基础-vue特点
通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML
05-基础-一些链接
vue官网->收藏
06-基础-vue三种安装方式
- 本地文件
- cdn引入
- npm i vue
07-基础-HelloWorld
- 在视图中 div#app
- 引入vue.js
- new Vue({})
- Vue实例的选项: el data
- 在视图中 通过{{}}使用data中的数据
08-基础-实例选项-el
通常赋值 id选择器
注意: 不能直接管理html或者是body
09-基础-实例选项-data
- 响应式数据
- 可以在视图中{{数据}} 可以vm.属性访问数据
10-基础-实例选项-methods
- 在视图中 {{fn1()}} 调方法
- vm.fn1()
- 在视图中 通过指令 @click=“fn1()”
注意: 不推荐使用箭头函数 this指向的不是vm对象
11-基础-术语解释-插值表达式
{{data中的数据}}
注意: var a=10 if for不能写!
12-基础-术语解释-指令
所有指令v-开头
所有指令都在开始标签位置
每个指令都是为了取代DOM操作
作用:增强html功能
13-基础-系统指令-v-text和v-html
- v-text作用: 替换标签全部内容
- {{}}会替换出现插值表达式的位置
- 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-基础-表格案例-效果演示
- 列表渲染
- 添加商品
- 删除商品
静态页面准备好
22-基础-表格案例-列表渲染
. 找到重复出现的标签结构
- 确定要用的指令 v-for列表渲染 (v,i) in list数组
- 在data中提供一个数组list
- 在视图中 通过{{}}使用数据
23-基础-表格案例-处理无数据时的渲染
v-if=“list.length===0”
24-基础-表格案例-添加商品
- 找到输入框 -> v-model=“data中的数据”
- 在data中提供一个itemname数据
- 找到添加按钮 绑定事件 @click=“addItem()”
- 在methods中提供addItem方法
- 在addItem()中 向list数组中添加元素
25-基础-表格案例-删除商品
- 找到删除按钮 @click=“deleItem()”
- 在methods提供deleItem()
- 在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-绑定其他表单元素
- 多行文本输入框
- textarea标签内容是无效的
-
复选框
-
一个复选框 v-model=“布尔”
-
多个复选框 v-model=“同一个数组”
-
单选按钮 radio
- 多个单选按钮绑定 v-model=“同一个数据”
-
下拉框 select+option
-
显示默认项 v-model="select"和默认option的value值一致
-
select值是选中option对应value值
08-基础-系统指令-v-cloak
场景: {{}}闪烁问题
- div#app v-cloak
- style中 [v-cloak]{display:none}
注意: v-cloak不需要赋值
09-基础-系统指令-v-once
场景: 当标签只需要被渲染一次时,
注意:不需要赋值
10-基础-表格案例-其他效果演示
- 自动获取焦点
- 日期格式处理
11-基础-过滤器-过滤器的文档分析
- 场景: 当数据格式需要处理时(文本格式化)
- 分类:全局和局部(本地)
- 使用位置: {{msg|过滤器}} 和 v-bind:属性=“表达式|过滤器”
12-基础-过滤器-全局过滤器
- Vue.filter(过滤器名字,(v)=>{})
- (v)=>{return 处理的结果}
- 在视图中{{被处理的数据 | 过滤器的名字}}
注意: v参数自带的 不需要手动传入
13-基础-过滤器-局部过滤器
- 通过选项filter定义过滤器 filters:{过滤器名字:function(v){}}
- function(v){return 处理的结果}
- 在视图中{{msg|过滤器名字}}
注意: 选项filters 不要忘记s
14-基础-过滤器-传参数和串联使用
- 传参数 {{msg|过滤器名字(自己的参数)}} -> (v,y)=>{y指的是自己传的参数}
- 串联 {{msg|过滤器A|过滤器B}}
注意: 过滤器B处理的是过滤器A所retrun的结果
15-基础-表格案例-使用过滤器完成日期格式处理功能
moment(v).format(日期格式)
16-基础-ref操作DOM
场景: 在vue操作dom元素
- 给要操作的元素设置ref属性值
- 在mounted(){this.$refs.ref属性值.focus()}
注意: mounted是选项 不需要我们调用
17-基础-自定义指令-全局自定义指令
获取焦点->没有自带指令->自定义指令
- Vue.directive(指令名,{inserted(el){}})
- inserted(el){具体功能}
- v-指令名
指令名不要加v-
inserted(el){el指的是使用该指令的dom元素}
18-基础-自定义指令-局部自定义指令
- 通过选项directives定义局部自定义指令 directives:{指令名:{inserted(el){}}}
- inserted(el){}
- 使用指令 v-指令名
注意: 只能在该选项所在的vue实例所管理的视图中去使用
19-基础-表格案例-使用自定义指令完成自动获取焦点功能
ref操作dom 和 获取焦点 自定义指令 没有必然联系
20-基础-实例选项-计算属性-文档分析
场景: 当数据A的逻辑很复杂时 把A这个数据写在计算属性中
代码位置: 通过选项computed:{计算属性a:值}
值: 带有返回值retrun的函数
计算属性a和data中的数据用法一样
21-基础-实例选项-计算属性-基本使用
当计算属性b依赖了data中的数据a时,
当a变化时,b会自动变化
22-基础-实例选项-计算属性和methods区别
当计算属性没有依赖data数据时
会把第一次使用计算属性retrun的结果进行缓存
总结
- 过滤器
- 定义过滤器
- 具体功能 (v)=>{}
- 使用过滤器
- 自定义指令
- 定义指令
- 具体功能 inserted(el){}
- v-指令名
- ref操作dom
- 给要操作的dom元素 设置ref
- mounted(){this.$refs.ref属性值.focus()}
- 计算属性
场景: 数据b依赖数据a时 b改成计算属性
用法: b和data中的数据用法一样 {{b}}
值: funtion(){retrun 复杂逻辑的结果}
特点
依赖了a,a变->b自动变化
没有依赖a,第一次结果缓存