Vue.js快速上手笔记

淮城一只猫 · · 193次浏览 ·

### Vue实例

Vue.js是一套构建用户界面的**渐进式框架**。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。

#### 创建Vue实例

创建方法如下:

“`javascript
var vm = new Vue({
//一些选项配置
})

“`

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其`data`对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

“`

```markup 

{{ hello }}

```

```

#### 生命周期

Vue实例被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。这个过程为**生命周期**,封装各个周期函数又称为:**生命周期钩子**,方便在不同周期环境下添加代码。

[![956663-20171122151938477-407847748.jpg](https://i.loli.net/2018/09/01/5b8a5aa791317.jpg)](https://i.loli.net/2018/09/01/5b8a5aa791317.jpg)

#### 模板语法

##### 插值

**文本:**`v-once`只渲染一次对应数据,改变其值不会再有变化。

**原生HTML:**如果`data`绑定的数据是html类型数据,请注意使用`v-html`指令去解析,否则直接输出html数据的文本。

**使用JavaScript表达式:**只能支持简单的表达式

### 计算属性和侦听器

#### 计算属性

在模板使用JavaScript表达式只能进行简单的逻辑,如果复杂的逻辑就不行了或者多次引用该逻辑代码岂不是要多写几处?所以对于任何复杂逻辑应当使用计算属性。

```javascript

{{ hello }}

{{ reversedHello }}

```

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.reversedHello` 依赖于 `vm.message`,因此当 `vm.hello` 发生改变时,所有依赖 `vm.reversedHello` 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。

#### 计算属性 VS 方法

同样在表达式中调用方法可以实现相同效果:

```javascript

{{ hello }}

{{ reversedHello() }}

```

注意上面函数定义是一个方法`reversedHello()`。俩个方式最终结果是相同的,不同的是****计算属性是基于它们的依赖进行缓存的****,只在相关依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变,多次访问 `reversedHello` 计算属性会立即返回之前的计算结果,而不必再次执行函数。

为什么需要缓存?假设我们有一个性能开销比较大的计算属性 **A**,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存,我们将不可避免的多次执行 **A** 的 getter!如果你不希望有缓存,请用方法来替代。

#### 计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:**侦听属性**。当有一些数据需要随着其它数据变动而变动时,很容易滥用 `watch`。然而,通常更好的做法是使用计算属性而不是命令式的 `watch` 回调。细想一下这个例子:

```javascript

{{ fullName }}

```

上面代码有很多重复:

```javascript

{{ fullName }}

```

这样效果看起来好多了!

#### 计算属性的setter

计算属性默认只有getter,需要setter可以提供:

```javascript

{{ fullName }}

```

当你执行`vm.fullName = "Jhon Chen"`时候,setter被调用`firstName`和`lastName`也会相应更新。

#### 侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

```javascript

Ask a yes/no question:

{{ answer }}





```

在这个示例中,使用 `watch` 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

### Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以可以用 `v-bind` 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 `v-bind` 用于 `class` 和 `style` 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

#### 绑定HTML Class

对象语法:

我们可以传给 `v-bind:class` 一个对象,以动态地切换 class:

```javascript

我来看看

```

当然你可以写出返回对象的计算属性:

```javascript

我来看看

```

数组语法:

我们可以把一个数组传给 `v-bind:class`,以应用一个 class 列表:

```javascript

我来看看
我来看看
我来看看

```

### 绑定内联样式

对象语法:

```javascript

我来看看

```

或者换一种更加清晰的方法:

```javascript

我来看看

```

数组语法:

```javascript

我来看看

```

自动添加前缀:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

多重值:

为 `style` 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

```

```markup 

```

```

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 `display: flex`。

### 条件渲染

#### v-if

```javascript

```

在`