我的Vue之旅——Vue初探

2017-05-26 本文已影响0人我自静默向韶华

写在前面

知道Vue已经有“一段”时间了，粗枝大叶的了解了点，因为当时资料比较少，正式项目中也没有开始用到，也就没怎么去研究。

接下来可能会去用到这个，所以准备去钻研下。

上面的没啥用，请直接略过。。。

官网链接：https://cn.vuejs.org/

Vue.js是当下很火的一个JavaScript MVVM框架(库)，它是以数据驱动和组件化的思想构建的。我暂时理解为它是一个轻量版的Angular。

Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。

它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

开启Vue之旅

Vue是什么？

一个MVVM框架(库)、和angular类似。官网有1.0和2.0两个版本，2.0对于1.0提高的地方，可以找度娘。。。

Vue优势

简单、易上手，掌握angular的朋友们，上手Vue就一句话，so easy!

vue的基础使用

Vue实例

1. 引入vue.js

2. 创建一个vue实例

创建

模板语法

插值

{{ variable }} -> 普通变量

{{* variable }} -> 一次性模板

{{{ variable }}} -> 转译模板

<input type="text" v-model="variable"> v-model 的模板语法

代码

通过使用v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

<span v-once>my Message: {{ msg }}</span>

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持：

Javascript 表达式

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。语句、流程控制等不生效。

指令

指令（Directives）是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

vue事件

v-on:事件名

v-on:mouseenter/mouseleave

v-on:click —> 缩略 @click ("v-on:"可以缩略为"@")

v-on:contextmenu/keydown

v-on:keyup.键码/enter/delete/left/right/top/bottom/ctrl.v/prevent.stop(阻止默认事件)

。。。

事件

tips：@contextmenu.stop.prevent = "method"中，stop、prevent前面的点( . )为修饰符。

v-for 循环

1. <li v-for="value in variable"></li> —> array

2. <li v-for="(key,value) in json"></li> —> json

1.极简留言板

↑ 不添加 track-by="$index" 循环中command相同的内容不重复显示

json

网页中的显示结果

filter（过滤器 / 格式化数据）

|：通道操作符

pipe -> 通道：前者表达式的计算值作为后表达式的计算参数

过滤器可以用在两个地方：mustache 插值和v-bind表达式。

mustache and v-bind

filter—mustache

网页显示

other—filter

filter：currency(默认带$、保留两位小数)/lowercase/uppercase/capitalize(首字母大写)

自定义filter

v-bind

v-bind

自定义指令

vue.directive('指令名',function(){

this.el —>对应的DOM节点

})

计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。

这就是对于任何复杂逻辑，都应当使用计算属性的原因。

computed

计算缓存 VS Methods

methods

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。

然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比而言，只要发生重新渲染，method 调用总会执行该函数。

根据实际情况分析，确定是否需要缓存，从而确定使用computed 或 methods

Computed属性 VS Watched属性

↓

watch

上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：↓↓

computed

Watcher

计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。

Vue 提供一个更通用的方法通过watch选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

Class与Style绑定

绑定HTML Class

v-bind:class="..." 可以跟对象、数组

绑定内联样式

v-bind:style="..." 可以跟对象、数组

当v-bind:style使用需要特定前缀的 CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。

从 2.3 开始可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值：

<div:style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">

条件渲染

v-if、v-else-if、v-else

<h1 v-if="ok">Yes</h1> 使用v-if进行条件渲染

<h1 v-else>No</h1> 可以使用v-else添加一个“else”块

v-else、v-else-if 元素必须紧跟在v-if或者v-else-if元素的后面——否则它将不会被识别。

template中的v-if条件组

因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个<template>元素当做包装元素，并在上面使用v-if。

最终的渲染结果不会包含<template>元素元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含元素。

template

用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，允许用户在不同的登录方式之间切换:

在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，<input>不会被替换掉——仅仅是替换了它的的placeholder。

Vue 提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的key属性。

添加key属性

这样每次切换时，输入框都将被重新渲染。<label>元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

v-show指令也用于根据条件展示元素的选项

<h1 v-show="ok">Hello!</h1>

不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。v-show是简单地切换元素的 CSS 属性display。

tips：v-show不支持<template>语法，也不支持v-else。

v-if and v-show

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。

v-if 和 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

列表渲染

v-for

1.<li v-for="value in variable"></li> ——>array

2.<li v-for="(key,value) in json"></li> ——>json

极简留言板

↑ 不添加 track-by="$index" 循环中command相同的内容不重复显示

json

网页中显示结果

of 替代 in

Template v-for