Vue基础笔记

最新推荐文章于 2022-11-21 11:04:42 发布

文正哟

最新推荐文章于 2022-11-21 11:04:42 发布

阅读量193

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/m0_47955692/article/details/108256004

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue笔记

Vue是一套用于构建用户界面的渐进式框架，它的5层渐进式是声明式渲染、组件系统、客户端路由、大规模状态管理、构建工具。

Vue的核心是声明式渲染，一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

指令与自定义指令

指令分为框架内置指令和自定义指令。

内置指令

指令是带有v-前缀的特殊属性attrbute，指令attrbute的预期值是单个JavaScript表达式（比如三目表达式），但v-for是例外情况。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

我们可以运用内置指令执行DOM操作：

内容输出指令：v-text、v-html

条件渲染指令：v-show、v-if、v-else/v-else-if

v-show：根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。

v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

v-else/v-else-if：前一兄弟元素必须有 v-if 或 v-else-if。

注：除 false、0、""、null、undefined 和 NaN 以外皆为真值。

列表渲染指令：v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名。

另外也可以为数组索引指定别名 (或者用于对象的键)。

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示。

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

详见：https://cn.vuejs.org/v2/api/#v-for

属性绑定指令：v-bind，缩写：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

使用对象写法，可以根据值（boolean）动态添加对应的 class。

修饰符：

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

详见：https://cn.vuejs.org/v2/api/#v-bind

双向数据绑定指令：v-model

单向数据流：当数据更新的时候，页面视图就会更新，但是页面视图中绑定的元素更新的时候，对应的数据是不会更新的。

双向数据流：数据更新，依赖于此数据的视图会更新；用户通过视图输入值，对应的数据也会更新，从而改变其他依赖于此数据的视图。

v-model是双向数据流

限制：
- <input>：checkbox 和 radio 使用 value 属性和 change 事件
- <select>：select 字段将 value 作为 prop 并将 change 作为事件
- <textarea>
- components
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤

详见：https://cn.vuejs.org/v2/api/?#v-model

事件指令：v-on，对应组件里的methods选项。缩写@

绑定事件监听器。

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

详见：https://cn.vuejs.org/v2/api/?#v-on

Vue中的组件：data、props、生命周期

data有两种模式，一种是对象模式，另一种是函数模式。

对象模式一般使用在根组件中，因为根组件只有一个。

函数模式使用在自定义组件中，因为自定义组件是使用多次的，可复用的。使用函数模式后，每个实例可以维护一份被返回对象的独立的拷贝，而不会影响到其他组件的数据。

详见：https://cn.vuejs.org/v2/guide/components.html

可复用组件中的数据类别有2种，一种是组件内部私有数据data，另一种是组件外部传入数据props。

props：如何一个函数一样，函数除了可以定义内部私有变量，有时候为了提高函数的复用性，我们通过会通过参数来接收外部传入的数据。组件也可以。

首先，组件内部通过 props 来定义可以接收的数据名称，就像是函数的形参。

然后，在使用该组件的时候可以通过标签属性的方式进行传参（可配合 v-bind 传入表达式）。

注意事项

如果传入的 props 值为一个表达式，则必须使用 v-bind
组件中的 data 和 props 数据都可以通过组件实例进行直接访问
data 中的 key 与 props 中的 key 不能冲突

Prop

大小写问题 html中的属性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，所以，我们在使用DOM中的模板时，要用短横线分隔命名法来代替驼峰命名法。

Vue解析的时候会把短线分割法转变为驼峰命名法。

props的形式 可以使用数组形式，也可以使用对象形式。使用对象模式的话，就可以给每个prop指定值的类型。

单向数据流 不要修改props的数据，因为props传入的数据不仅仅只是被当前的组件所使用，还可能被其他组件用。只允许外到里，不允许里到外。—如果非要修稿数据，那么需要把修改数据的请求通知给父级（数据的持有人）this.$emit('事件名称'，数据)，然后父级监听事件@事件名称="事件方法"

双向绑定 有些时候，组件设计就是希望能够在内部去更新传入的值，如果为了数据安全而每次都需要触发事件，父级监听然后修改，这个过程太过于繁琐。所以，有了v-model。（但是不推荐了）。

还有另一个语法糖sync，它和v-model类似，但是比v-model更加直观，而且可以同时绑定多个。这里事件名称要使用 update 加上 prop 名称的格式，updata:[prop]。

组件通过prop传参的过程:注册组件->实例化->从prop中拿到数据->渲染到组件（杯壁）。prop的数据是来自父组件的，在子组件的方法里配置了一个this.$emit('事件名称'，数据)，触发这个事件，父级监听了数据改变，然后再往下改变。

生命周期 组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法。

基本生命周期函数有下面几个阶段：