我自静默向韶华
我自静默向韶华

我的Vue之旅——Vue初探

写在前面

      知道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实例

我的Vue之旅——Vue初探_第1张图片
创建

模板语法

插值

        {{ variable  }} -> 普通变量

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

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

            v-model  的模板语法

我的Vue之旅——Vue初探_第2张图片
代码

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

        my Message: {{ msg }}

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

我的Vue之旅——Vue初探_第3张图片
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(阻止默认事件)

。。。

我的Vue之旅——Vue初探_第4张图片
事件

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

v-for 循环

1.  

  •  —> array

    2.

  •  —>  json

    我的Vue之旅——Vue初探_第5张图片
    1.极简留言板

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

    我的Vue之旅——Vue初探_第6张图片
    json
    网页中的显示结果

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

            |：通道操作符

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

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

    我的Vue之旅——Vue初探_第7张图片
    mustache and v-bind
    我的Vue之旅——Vue初探_第8张图片
    filter—mustache
    我的Vue之旅——Vue初探_第9张图片
    网页显示
    我的Vue之旅——Vue初探_第10张图片
    other—filter

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

    我的Vue之旅——Vue初探_第11张图片
    自定义filter

    v-bind

           

                  —>  缩略写法：

    我的Vue之旅——Vue初探_第12张图片
    v-bind

    自定义指令

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

                  this.el  —>对应的DOM节点

           })

    计算属性

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

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

    我的Vue之旅——Vue初探_第13张图片
    computed

    计算缓存 VS Methods

    我的Vue之旅——Vue初探_第14张图片
    methods

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

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

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

    Computed属性 VS Watched属性

    ↓
    我的Vue之旅——Vue初探_第15张图片
    watch

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

    我的Vue之旅——Vue初探_第16张图片
    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绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值：

           

    条件渲染

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

           

    Yes

     使用v-if进行条件渲染

           

    No

         可以使用v-else添加一个“else”块

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

    template中的v-if条件组

            因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个