Vue

Vue

基础

杂项

  • 和应用交互:v-on 指令添加一个事件监听器
  • 表单输入和应用状态之间的双向绑定:v-model
  • 组件化的应用构建: component
  • 绑定: v-bind
  • 阻止修改现有的属性 : Object.freeze()
  • Vue 实例 [ 数据属性 ,实例属性,方法],前缀 $以便与用户定义的属性区分开
  • 生命周期回调,Vue实例创建过程触发

一些按照功能学习

模板语法

插入值

文本HTML, Atribute, JS表达式
{{}}, v-html v-bind {{ JS }}

指令

v-* ,职责是,当表达式的值改变时响应式地作用于 DOM
接受一个参数

  1. 参数在这里插入图片描述

  2. 动态参数在这里插入图片描述

  3. 修饰符
    在这里插入图片描述

  4. 缩写

    • v-bind —— :
    • v-on —— @

计算属性和侦听器

computed VS watch 都数据变化,computed计算属性后进行缓存,watch允许我们执行异步操作 (访问一个 API)

在这里插入图片描述

class和style绑定

v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

条件渲染 v-if and v-show

1.  元素上使用 v-if 条件渲染分组在这里插入图片描述

列表渲染

v- for 遍历数据或对象属性
在这里插入图片描述

事件处理(响应操作)

  1. v-on = 绑定到方法 + 直接调用方法
  2. 事件修饰符 + 按键修饰符 + 系统修饰符
    在这里插入图片描述

表单输入绑定 v-model

核心:放在什么位置,就绑定到了什么值

在这里插入图片描述
文本:v-model=“message”
复选框:
绑定到布尔值:v-model=“checked”
多个复选框,绑定到同一个数组:v-model=“数组”
选择框:select v-model=“值”

值绑定
修饰符

.lazy : v-model 在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件进行同步
.number : 自动将用户的输入值转为数值类型
.trim : 自动过滤用户输入的首尾空白字符

=================================================
事件处理:v-on 监听DOM事件,触发时运行JS代码

  1. 事件修饰符
    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求,Vue为解决这样的需求提供了一下修饰符:
- .stop .prevent .capture .self .once .passive

组件

使用: 先注册,再在body中声明
  1. 组件可复用
  2. 组件的data 必须是一个函数,返回数据的独立拷贝
通过 Prop 向子组件传递数据
单个根元素
监听子组件
  1. 父级组件通过 v-on 监听子组件实例的任意事件
  2. 子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
  3. 子组件使用$emit方法 的第二个参数抛出一个值
  4. 父组件通过 $event 访问到被抛出的这个值
通过插槽分发内容
动态组件 (再回头看动态和异步组件)

在这里插入图片描述

深入了解组件

组件注册

全局、局部

Prop

prop大小写有规定,数据类型有动静,具体分5中,
单向数据流传递,Prop验证助类型检查

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值