Vue 学习笔记

作者: ygqygq2 分类: 开发 发布时间: 2022-06-28 17:31

1. Hello word

2. 指令基本用法

v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 (同angular中的ng-show)
v-hide 隐藏内容(同angular中的ng-hide)
v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用: 及时对页面的数据进行更改
v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

3. 生命周期

生命周期图示

4. 计算属性、侦听器

computed:当计算属性依赖的内容发生变更时,才会重新执行计算
methods:只要页面重新渲染,就会重新计算
watch:可以设置监听一个表达式或函数的结果变化,变化时执行回调函数,回调函数得到的参数为变化前后的新值和旧值,表达式支持单个变量和一个简单的属性访问路径,需要监听更复杂的表达式,需要使用函数取代。可以说 computed的底层实现是 watch

  • computedmethod 都能实现的一个功能,建议使用 computed,因为有缓存
  • computed 和 watcher 都能实现的功能,建议使用 computed,因为更加简洁

5. v-if 和 v-show

v-if 隐藏的原理:需要隐藏时(v-iffalse时)直接删除而不显示
v-show 隐藏则是在需要隐藏时(v-showfalse时)给该标签添加"display:none"属性让其不显示

  • 如果是频繁使用显示和隐藏操作,用v-show比较好。不会频繁创建删除标签操作,性能好。
  • 如果不是频繁操作以上两种方式都不错。
  • 如果是有多层判断可使用 v-if v-else-if v-else

6. 更新组件数据

  • 使用数组变更函数
  • 直接替换数组
  • 直接更新数组内容
  • 直接添加对象的内容,也可以自动的展示出来

7. 事件修饰符

stop: 防止事件冒泡
prevent:取消默认事件
capture:捕获事件
self:只会触发自己范围内的事件,不会包含子元素
once:只执行一次的点击
passive:提早告诉,提高性能

8. 组件

组件是页面的一部分。

  • 组件具有复用性,数据隔离。
  • 局部组件:定义了,要注册之后才能使用,性能较高。定义名字建议大写字母开头,驼峰命名。
  • 全局组件:定义了,就可以处处使用,性能不高,使用简单。定义名字建议小写字母单词,中间横杆连接。
  • 局部组件使用时,要做一个名字和组件间的映射对象,不写映射,Vue 也会自动尝试帮你做映射。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据