Vue
基础
杂项
- 和应用交互:v-on 指令添加一个事件监听器
- 表单输入和应用状态之间的双向绑定:v-model
- 组件化的应用构建: component
- 绑定: v-bind
- 阻止修改现有的属性 : Object.freeze()
- Vue 实例 [ 数据属性 ,实例属性,方法],前缀 $以便与用户定义的属性区分开
- 生命周期回调,Vue实例创建过程触发
一些按照功能学习
模板语法
插入值
文本 ,HTML, Atribute, JS表达式
{{}}, v-html v-bind {{ JS }}
指令
v-* ,职责是,当表达式的值改变时响应式地作用于 DOM
接受一个参数
-
参数
-
动态参数
-
修饰符
-
缩写
- v-bind —— :
- v-on —— @
计算属性和侦听器
computed VS watch 都数据变化,computed计算属性后进行缓存,watch允许我们执行异步操作 (访问一个 API)
class和style绑定
v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
条件渲染 v-if and v-show
列表渲染
v- for 遍历数据或对象属性
事件处理(响应操作)
- v-on = 绑定到方法 + 直接调用方法
- 事件修饰符 + 按键修饰符 + 系统修饰符
表单输入绑定 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代码
- 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求,Vue为解决这样的需求提供了一下修饰符:
- .stop .prevent .capture .self .once .passive
组件
使用: 先注册,再在body中声明
- 组件可复用
- 组件的data 必须是一个函数,返回数据的独立拷贝
通过 Prop 向子组件传递数据
单个根元素
监听子组件
- 父级组件通过 v-on 监听子组件实例的任意事件
- 子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
- 子组件使用$emit方法 的第二个参数抛出一个值
- 父组件通过 $event 访问到被抛出的这个值
通过插槽分发内容
动态组件 (再回头看动态和异步组件)
深入了解组件
组件注册
全局、局部
Prop
prop大小写有规定,数据类型有动静,具体分5中,
单向数据流传递,Prop验证助类型检查