Vue 2.0 学习笔记

转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78339432.
本文出自 [ 党耀的博客 ]

参考自 [Vue官网]

目录

路由器：vue-router

官方提供的基于Vue的路由器，使得构建单页面应用变得非常简单，只需要简单的组件配置和路由映射即可

数据状态管理：vuex

类似Flux和Redux这两个数据状态管理工具，将整个应用的状态数据存储在一个单例store中，通过约定的方式进行获取，修改。

其他工具：vue-resource和vue-devtools

vue-resource是提供异步请求的插件，可以使用XMLHttpRequest和JSONP发送请求，并且支持Promise和请求拦截。

vue-devtools是用于调试Vue应用的Chrome插件，可以实时查看组件的状态，使用vuex的话还可以查看store的各种状态。

vue语法相关

Vue实例

• 1.vue通过构造函数创建根实例。所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

• 2.Vue 实例在被创建之前都有一个初始化过程。在这个过程中，实例会调用一些 生命周期钩子 ，可以在这里执行自定义逻辑。

生命周期钩子：

• beforeCreate：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

• created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

• mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。

• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用

• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。该钩子在服务器端渲染期间不被调用。

• activated：keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

• deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

模板语法

一.插值

1.文本
数据绑定{{msg}}，可以动态绑定更新
利用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但是会影响到该节点上所有的数据绑定。

2.HTML
输出真正的 HTML ，需要使用 v-html 指令。但是不能使用 v-html 来复合局部模板，对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。

注意：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

2.特性
作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令，

<div v-bind:id="dynamicId">div>

3.使用JavaScript表达式
每个绑定都只能包含单个表达式，所以下面的例子都不会生效：

{{ var a = 1 }}


{{ if (ok) { return message } }}

二.指令

是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

if="seen">现在你看到我了
//v-if指令接收的是true/false,根据值来插入/移除
元素

1.参数

一些指定能够接收一个参数，类似响应式更新HTML属性。这里href就是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
还有v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

2.修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。深入地了解 v-on 与 v-model时，会看到更多修饰符的使用。

on:submit.prevent="onSubmit">form>
// .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

三.过滤器

总结：过滤器滤就是像网般一层一层过滤数据，所以要放在表达式尾部，并且前面表达式的值作为过滤器函数的第一个参数。允许多个过滤器串联使用。

Vue.js 允许自定义过滤器，使用场景：用于文本转换。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部。注意，对于复杂数据的转换，应该使用计算属性。

{{ message | filterA(‘arg1’, arg2) }} message的值为过滤器第一个参数，’arg1‘为第二个，arg2第三个。

四.缩写

v- 前缀作为一种视觉提示。Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

<a v-bind:href="url">a>


<a :href="url">a>


<a v-on:click="doSomething">a>


<a @click="doSomething">a>

五.计算属性

在模板中放入过多的逻辑会让模板过重难以维护，这就是为什么vue规定了数据绑定只能使用一种表达式。

1.计算属性的基础例子

vue.computed是一种计算属性，在模板里已经绑定了依赖关系，当原始数据发生变化时候才会调用。

2.计算属性VS Methods

将同一函数定义为method 而不是计算属性，对于最终的结果，两种方式是相同的。
不同的是计算属性是基于它们的依赖进行缓存的。计算属性只在它的相关依赖发生改变时才重新求值。只要 message 还没有发生改变，多次访问 reversedMessage 计算属性也不会重新计算，而是返回之前的结果。

而method，只要重新渲染，method就会执行该函数。

3,计算属性 VS Watched属性

watched 是vue提供的一个观察和相应vue实例变化的通用方式，不要滥用这个属性，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
代码简洁。

计算属性在绑定在div上时return值有限制？？？ 目前如果用true/false判断可行，字符串就判断失败
4.计算属性默认只有getter方法，但是有需要可以自定义setter

5.观察Watchers

当需要在数据变化时执行异步操作或开销大的操作，可以用watchers。watch 允许执行异步操作 (访问一个 API)，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这是计算属性无法做到的。

六.Class与Style绑定

1.绑定HTML Class
在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

详见：
对象语法
数组语法

用在组件上,当你在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖.

2.绑定内联样式

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

• 多重值(适用版本2.3.0+)
  从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。这会渲染数组中最后一个被浏览器支持的值。

七.条件渲染

这里提到了Handlebars.js这个模板引擎

• v-if
  在vue.js中通过v-if指令来做判断，如果想要切换多元素，可以直接添加在template上，将它作为一个包装元素。

• v-else
  用来表示else块,必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

• v-else-if
  在2.1.0新增，可以链式的使用，类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

关于复用，vue本身会复用已有元素而不是重新渲染，可以用key来管理复用的元素。

<template v-if="loginType === 'username'">
  <label>Usernamelabel>
  <input placeholder="Enter your username">
template>
<template v-else>
  <label>Emaillabel>
  <input placeholder="Enter your email address">
template>

<input> 不会被替换掉——仅仅是替换了它的 placeholder，在input标签添加属性key=“”;就可以控制不复用。

• v-show
  根据条件展示元素,v-show 的元素始终会被渲染并保留在 DOM 中。只是简单地切换元素的 CSS 属性 display 。
  v-show 不支持 template 语法，也不支持 v-else

对比：
其实就相当于android里的gone/invisible 。v-if 当值为false时就相当于gone ，不保留view占用的空间,js里就是不去渲染，只有当值为true才会渲染该块。v-show会不管初始条件是什么都会去渲染。如果频繁的切换状态就用show.

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

学无止境，未完待续