vue简单语法总结

一. 数据绑定

1.实例与数据

• 生命周期

  • created
    实例完成创建后，尚未挂载，$el还不能用
  • mounted
    el挂载到实例后调用，一般我们的第一个业务逻辑会在这里处理
  • beforeDestroy
    销毁之前调用，主要解绑使用addEventListener事件的监听

• 插值与表达式

  • {{ }}
  • v-pre标签内容不会被编译

• 过滤器

  • | {{ }}插值的尾部添加一小管道符“。”对数据进行过滤
    2.指令与事件

• 带前缀v，当表达式的值改变时，相应的将某些行为应用到dom上

• v-if

• v-bind
  动态更新html元素上的属性，比如id，class等

• v-on
  绑定事件监听器
  3.语法糖
  语法糖也可以说是缩写

• v-bind直接可以省略写为“:”

• v-on可以省略写为“@”

二.计算属性

1.用法

• 计算属性都以函数的形式写在Vue实例内的compute d选项内，最终返回计算后的结果
• 每个计算属性都有一个getter和setter方法，getter方法用于获取用户中的data数据；setter用于向data中写入数据
• 计算属性可以依赖其他计算属性
• 计算属性不仅可以依赖当前Vue的数据，还可以依赖其他实例的数据

2.计算属性缓存
计算属性可以用method实现，为什么还需要计算属性？

• 计算属性基于缓存，当计算属性所依赖的数据发生变化时，它才会重新获取值
• method是响应式依赖
• 遍历大数组和做大量计算的时候，使用计算属性

三.V-bind及class与style绑定

1.对象语法

• <div :class="{‘className’ : isActive}"></div>
• data: {isActive: true}
• : class可以与普通的类共存
• 对象中也可以传入多个属性，来动态切换class
• 当：class的表达式过程或逻辑复杂时，还可以绑定一个计算属性

2.数组语法

• <div :class="[activeCls,errorCls]"></div>
• data: {activeCls:‘active’,errorCls: ‘error’}
• 可以在数组语法中使用对象语法
• <div :class="[ activeCls,errorCls]"></div>
• 计算属性动态的给元素设置类名
  3.绑定内联样式
• 对象语法
  <div :style="{‘color’ : color,‘fontSize’ : fontSize + ‘px’}">文本</div>
• 数组语法
  <div :style="[styleA,styleB]">文本</div>

四.内置命令

• v-bind
  响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等
• v-on
  用于监听DOM事件； 例如：v-on:click v-on:keyup
• v-show
  条件渲染指令，为DOM设置css的style属性
• v-model
  数据双向绑定；用于表单输入等；例如：< input v-model= “message”>，用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的
• v-if
  条件渲染指令，动态在DOM内添加或删除DOM元素
• v-else
  条件渲染指令，必须跟v-if成对使用
• v-else-if
  判断多层条件，必须跟v-if成对使用
• v-text
  更新元素的textContent；例如： 等同于 < span>{{msg}} </ span>
• v-html
  更新元素的innerHTML；会把标签名也带上
• v-for
  循环指令
• v-cloak
  不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践
• v-once
  也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容； v-once 在业务中也很少使用，当你需要进一步优化性能时，可能会用到
• v-pre
  不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
• label for
  绑定对应的form标签
• el：element
  需要获取的对应元素，html中的容器，（id名）

五.表单与v-model

1.基本用法

• input
  对于汉字如果需要实时更新的话可以使用@input来替代v-model
• textarea
  不再关心初始化时 value 属性
• 单选按钮input:radio
  单独使用的时候不需要使用v-model, 只需要单向绑定一个数据到checked属性上即可；互斥的效果的话则需要使用v-model
• 复选框input:checkbox
  单独使用的时候v-model，多个一起使用的时候类似于单选框
  绑定到一个数组里面
• 选择列表 select-option
  设置了value
  v-model 绑定了 option 元素上的 value
  没设置value
  v-model 绑定了 option 元素上的 text
  与v-for结合, text 和 value 也通过v-bind 绑定到视图模型上

2.绑定值

• 单选框
  : 和 v-model 的结合使用
• 复选框
  在input:checkbox 上面可以动态绑定两个属性true-value 和 false-value
  :true-value=“value1” 和 :false-value=value2
  选中的时候app.picked = app.value1
  没选中的时候 app.picked = app.value2
• 选择列表
  TODO: 选择列表内容的编写

3.修饰符

• .lazy
  此时v-model绑定的数据并不会实时更新, 按回车或者失焦才会更新；在 change 事件中同步
• .number
  转化成数字
• .trim
  消除空格

六.组件

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树
1.组件注册

• 组件名应该始终是多个单词的，根组件 App 除外

• 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接

• 使用 kebab-case
  使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case

• 使用 PascalCase
  当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的
  2.父子组件通信

• 父组件到子组件通讯
  子组件接受使用父组件的数据，这里的数据包括属性和方法（String, Number, Boolean, Object, Array, Function）。vue提倡单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数

• 通过 props 传递数据 (推荐)
  父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值

• 通过 $on传递父组件方法通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系
  3.子组件到父组件通讯
• 通过 $emit传递父组件数据(推荐)与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用
• refs 获取
  可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和 this.$parent 一样并不属于数据的传递而是一种主动的查找。

引用

ONLY&YOU
L何γ