1. Vue.js

1.1. 安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

1.2. IDE

  • WebStorm 安装 VUE 插件

1.3. styles

Vue-loader在v9.8.0之后加入了对CSS Modules的支持。

1.4. 语法

1.4.1. v-bind

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

v-bind: 可缩写为 :

1.4.2. 计算属性 Methods Watched-Property

  • 计算属性: 只有在它的相关依赖发生改变时才会重新取值,更好的方式是
  • method: 每当重新渲染的时候，method 调用总会执行函数,只有纯粹的数据逻辑，而不是去处理 DOM 事件细节
  • watch: 通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调
  • 事件修饰符: 处理 DOM 事件细节

1.4.3. v-if vs v-show

  • v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
  • v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

1.4.4. 组件

Vue 组件的 API 来自三部分

  • Props 允许外部环境传递数据给组件
  • Events 允许组件触发外部环境的副作用
  • Slots 允许外部环境将额外的内容组合在组件中。

组件需要的一切都是通过上下文传递，包括：

  • props: 提供props 的对象
  • children: VNode 子节点的数组
  • slots: slots 对象
  • data: 传递给组件的 data 对象
  • parent: 对父组件的引用

1.4.5. 过渡效果概述

  • v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
  • v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
  • v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

1.5. References

results matching ""

    No results matching ""