暑期带你不走偏快速学习Vue
2021-07-29 11:57:20 3 举报AI智能生成
前端学期不可少的技能，暑期带你不走偏快速学习Vue
作者其他创作
大纲/内容
Vue.js是一套构建用户界面的渐进式框架
渐进式意味着你可以将Vue作为你应用的一部分
Vue采用自底向上增量式开发的设计
Vue.js 是一款 MVVM 框架
介绍
数据响应式
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
特点
CDN引入
下载引入
NPM安装
CLI和NPM结合使用
安装
认识Vue
new Vue({ option }) 是mvvm中的 viewmodel
构造器
实例本身的属性和方法都有$前缀用以区分代理属性
属性与方法
实例创建完成后执行的钩子
created
编译好HTML挂载到页面执行的事件钩子
mounted
数据更新之后的钩子
update
实例销毁完成执行的钩子
destoryed
实例生命周期
钩子的this指向调用它的实例
分支主题
图示Vue生命周期
Vue实例
支持简单的JS表达式
Mustache{{}}
该指令表示数据之更新一次
v-once
解析数据中的html渲染到页面
v-html=""
v-text=""
显示原本的Mustache语法
v-pre
解决插值表达式闪烁的问题
v-cloak
插值指令
绑定属性
v-bind
事件监听
v-on
条件判断
元素是否显示
v-show
表单数据双向绑定
v-model
循环遍历
v-for
参数
阻止事件冒泡
.stop
阻止默认事件行为
.prevent
只触发一次
.once
特定键触发
.{jkeyCode | keyAlias }
.lazy
转换为数字类型
.number
去除两侧空格
.trim
修饰符
<div :class="active"></div>
:
<button @click="btnClick">按钮</button>
@
缩写
指令
滤器不改变真正的数据，而只是改变渲染的结果
对文本格式化/处理
理解
全局注册时是filter
局部过滤器是filters
使用
过滤器
模板语法
解决模板中放入过多逻辑
计算属性是基于它们的响应式依赖进行缓存的
主要作用
每个计算属性都包含一个 getter 和 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
计算属性的setter和getter
methods不管数据发没发生变化都会调用函数
computed只有在依赖数据发生变化时才回调函数
computed vs methods
计算属性
数据变化时执行异步或开销较大的操作时
注意: watch 中的属性 一定是data 中 已经存在的数据
侦听器
计算属性和侦听器
对象语法
数组语法
绑定class
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
自动添加前缀
多重值
绑定style
v-bind绑定class与style
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
作用
最终的渲染结果将不包含 <template> 元素
在<template>元素使用v-if
v-else 元素需紧跟 v-if 后面
v-else-if (vue2.1.0新增)
key表示: 这两个元素是完全独立的，不要复用它们
使用 key 管理可复用元素
v-if ( v-else )
带有 v-show 的元素始终会被渲染并保留在 DOM 中
v-show 只是简单地切换元素的 CSS 属性 display
与 v-if 对比
v-show 不支持 <template> 元素，也不支持 v-else
注意
v-show (简单的切换display属性)
当条件不成立不会渲染
v-if
无论条件是否成立都会渲染
v-if vs v-show
v-if 与 v-for 一起使用
条件渲染
基本语法
1.item: 每一项元素 2.index: 下标/索引
v-for遍历数组
1.value: 属性值 2.key: 属性名 3.index: 索引
v-for遍历对象
避免 v-if 和 v-for 用在一起
v-for比 v-if 具有更高的优先级
v-for和v-if
key的作用主要是为了高效的更新虚拟DOM
key
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
变异方法 (会改变原数组)
filter()
concat()
slice ()
这些不会改变原始数组，但总是返回一个新数组
非变异方法 (不会改变原数组)
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.利用索引设置一个项
2.修改数组长度时
注意实现
数组更新检测
列表渲染
绑定事件监听
事件监听方法/参数
阻止冒泡
最默认事件行为
从特定键触发
.{jkeyCode \\| keyAlias }
事件之触发只一次
.opce
滚动事件的默认行为 (即滚动行为) 将会立即触发
.passive
2.3.0新增
事件修饰符
Vue中使用 v-model 指令来实现表单元素和数据的双向绑定
基本概念
v-model: 只有 v-model 才能实现双向数据绑定
与 v-bind 区别
基本概念及用法
v-bind绑定一个value属性
v-on指令绑定当前元素的input事件
v-model其实是一个语法糖
v-model原理
绑定的的值是: value
单选按钮
v-model 即为: 布尔值
单个复选框
绑定的值是: 数组
多个复选框
单个选择框
多个单选框
v-model 表单绑定的value
输入的内容转换为number数据类型
过滤用户输入的首尾空白字符
动态的给 表单中的 "value" 赋值而已
值绑定
表单输入绑定
什么是组件化?
组件可以扩展 HTML 元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用
几乎任意类型的应用的界面都可以抽象为一个组件树
Vue组件化思想
认识组件化
2.使用组件 <tagName/>
全局注册
在Vue实例options中定义
局部组件注册
注册组件
将template中的HTML分离出来
1.使用 script
2.使用 template
模板的分离写法
组件基础
组件是一个单独功能模块的封装
组件中的可以访问顶层Vue实例中的数据吗?
不能访问Vue实例中的数据
组件中数据的访问
组件的数据放在组件对象的data属性当中
只是这个data属性必须是一个函数
而且这个函数要返回一个对象
组件数据的存放
如果在组件中data是一个对象会发生什么?
如果在组件中data是一个函数
组件中data为什么必须是函数?
组件中数据的存放
props
default:any: 为该porps之当一个默认值
required: Boolean 定义该porps是否是必填项
validator: Function 自定义验证会将porps值作为唯一值参数代入
props数据验证
父组件向子组件传值
自定义事件
自定义事件流程
子组件向父组件传值
父子组件的通信
父访问子: $children
父访问子: $refs
子访父: $parent
父子组件的访问
组件的插槽也是为了让我们封装的组件更加具有扩展性。
基本理解
该插槽插入什么内容取决于父组件如何使用
slot 基本使用
有时候我们需要给插槽设置一个具体的默认内容
它只会在没有提供内容的时候就会被渲染
插槽默认值
slot元素有一个特殊的attribute: name
概念
2.并以v-slot的参数形式提供其名称: v-slot:header
一个不带name的<slot>出口会带有隐含(默认)的名字"default"
具名插槽 slot
有时让插槽内容能够访问子组件中才有的数据是很有用的
父组件替换插槽的标签，但是内容由子组件来提供
总结
作用域插槽
插槽slot
组件
Vue快速学习
0 条评论
回复 删除
下一页
