Vue2一天速成

最新推荐文章于 2024-08-14 23:06:44 发布

小�同学

最新推荐文章于 2024-08-14 23:06:44 发布

阅读量1.9k

点赞数 26

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_50658892/article/details/136509338

版权

研二下了，导师接了项目，要做项目，只能快速一天速成vue。以前学习都喜欢看视频教学，这次选择了文档。学的菜鸟教程的vue2.仅仅个人学习笔记，

Vue.js 响应接口 | 菜鸟教程 (runoob.com)

模板语法

插值

使用插值 { { } }进行数据绑定

使用v-html输出html代码

v-指令

使用v-bind进行属性值绑定(用来响应地更新 HTML 属性)

使用v-model进行双向数据绑定(input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值)

使用v-if 决定是否插入元素（v-if、v-else-if、v-else结合使用）

使用v-on 监听DOM事件

使用v-show 选择展示元素

v-bind和v-on有缩写

注意v-model：它分成两步

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

过滤器

条件语句

v-if、v-else-if、v-else结合使用

循环语句

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

v-for 可以迭代对象，得到对象的所有的index，key，value值

v-for 可以迭代整数

计算属性

计算属性关键词: computed

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

setter和getter，不太清楚。

在实际的项目开发中，我们有很多的应用场景需要用到计算属性，比如：

数据过滤

表单验证

数据计算结果

数据格式化

监听属性

使用v-on可以实现监听DOM，比如点击事件

但监听属性 watch，可以通过 watch 来响应数据的变化，当监听的值发生变化时，就能调用watch里面的回调方法

样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

class属性绑定

<div v-bind:class=" { 'active': isActive } "> </div>，当设置'active': false时，则没有active定义的样式

数组语法：

把一个数组传给 v-bind:class

事件处理器

事件监听的时候可以使用v-on指令

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

比如：

表单

用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素

input（text、checkbox、radio）、textarea、select列表

还有修饰符

.lazy，

.number，将用户的输入值转为 Number 类型

.trim，自动过滤用户输入的首尾空格

组件

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

全局组件

Vue.component( tagName , options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>

// 注册

Vue.component('runoob', {

template: '<h1>自定义组件!</h1>'

})

局部组件

var Child = {

template: '<h1>自定义组件!</h1>'

}

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件单向传递数据给子组件。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

可以传递字符串、数组、对象

Vue的prop用法 - 掘金 (juejin.cn)

vue中组件的自定义事件（详）_vue自定义事件-优快云博客（这个更细）

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

Vue的prop用法 - 掘金 (juejin.cn)

Prop 验证

组件可以为 props 指定验证要求。

类型检查，type可以是：

String

Number

Boolean

Array

Object

Date

Funtion

Symbol

type 也可以是一个自定义构造器，使用 instanceof 检测

组件-自定义事件

vue中组件的自定义事件（详）_vue自定义事件-优快云博客

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！实现父子传值。

使用v-on

组件自定义事件需要用到v-on，也就是v-on在谁身上，就是在谁的组件实例上绑定了事件
在父组件中给子组件绑定一个自定义事件
此时子组件就可以注释掉props接收的对象，然后通过$emit去触发
再传入参数。不传参数就是单纯的触发父组件对应的函数。父组件接收参数。

传递的data数据必须是一个函数而不是对象，这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例。

使用ref属性

可以使用ref属性，灵活

原生事件和自定义事件

自定义事件：子组件在父组件中使用时，直接绑定在子组件上的事件就是自定义事件，必须经过子组件的触发vm.$emit()才能执行
原生事件：直接在子组件里的模板上绑定的事件，子组件引入后是可以直接触发的。

（17）深入理解 Vue 组件——④ 给组件绑定原生事件 | Vue 基础理论实操 - 掘金 (juejin.cn)

自定义组件的v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

等价于：

<input

:value="parentData"

@input="parentData = $event.target.value"

由于 v-model 默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。

子组件添加v-model指令，并指定model中的值和事件、以及props的数据类型，并在method中向上派发事件。父组件中给子组件加v-model指令，并在data中获取数据，得到数据给子组件使用。从而实现双向绑定。

在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性
子组件内使用 prop 创建，创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。
子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值

4． v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上

Vue之v-model双向绑定原理---kalrry - 掘金 (juejin.cn)

自定义指令

彻底搞懂vue之自定义指令 - 掘金 (juejin.cn)

钩子

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括v- 前缀。
- value: 指令的绑定值，例如：v-my-directive="1 + 1", value 的值是2。
- oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1"， expression 的值是"1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。（可以认为arg和value是一对，名称和值）
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。