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

列表渲染

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验证助类型检查