vue的学习和整理（a）

1.vue的基本介绍

Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
vue是一个MVVM视图层框架，可以构建出复杂的单页面应用程序。vue与原生的Js显著的区别就是不再对dom进行直接操作，而是通过对数据操作来改变视图。

MVVM

M model 数据模型
V view 视图
VM 视图模型
关系如下图

2.vue的安装

1.下载

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2.使用 CDN 方法

    Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
    
    unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
   
    cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3.NPM 安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装

$ cnpm install vue

4.命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可

3.vue的实例 new Vue({})

1. 创建一个实例

每个 Vue 应用都需要通过实例化 Vue 来实现
    var vm = new Vue({
    // 配置选项
    })

2.Vue 构造器中

    1.el参数，它是DOM元素中的id。在上面实例中id为vue_det，在div元素中
    2.data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
    3.methods 用于定义的函数，可以通过 return 来返回函数值。
    4.{{ }} 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

    除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。
    它们都有前缀 $，以便与用户定义的属性区分开来。

唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

4.实例生命周期钩子

 created()/mounted()/updated()/destroyed()
  beforeCreate()/  beforeMount()/  beforeUpdate()/  beforeDestroy()

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

5.模板语法

插值

1.文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

2.原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p>
                <p>Using v-html directive: <span v-html="rawHtml"></span></p>

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

3.Attribute

        Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
            <div v-bind:id="dynamicId"></div>   
        对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
            <button v-bind:disabled="isButtonDisabled">Button</button>
            注意：如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

4.使用 JavaScript 表达式

        在我们的模板中，只绑定简单的 property 键值。
            {{ number + 1 }}
            {{ ok ? 'YES' : 'NO' }}
            {{ message.split('').reverse().join('') }}
            <div v-bind:id="'list-' + id"></div>
        有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
            {{ var a = 1 }} <!-- 这是语句，不是表达式-->
            {{ if (ok) { return message } }} <!-- 流控制也不会生效，请使用三元表达式 -->

指令

    指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。
      指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.参数

        一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
            <a v-bind:href="url">...</a>
            在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

2.动态参数（2.6.0 新增）

 <a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

 例如，如果你的 Vue 实例有一个 data property attributeName，
 其值为 "href"，那么这个绑定将等价于 v-bind:href。

1.对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。
任何其它非字符串类型的值都将会触发一个警告。

2.对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，
放在 HTML attribute 名里是无效的——
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

3.修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符
告知 v-on 指令对于触发的事件调用 event.preventDefault()

缩写

1.v-bind

        完整语法
        <a v-bind:href="url">...</a>

        缩写
        <a :href="url">...</a>

        动态参数的缩写 (2.6.0+)
        <a :[key]="url"> ... </a>

2.v-on

        完整语法
        <a v-on:click="doSomething">...</a>

        缩写
        <a @click="doSomething">...</a>

        动态参数的缩写 (2.6.0+)
        <a @[event]="doSomething"> ... </a>

6.计算属性和侦听器 computed / watch

计算属性

对于任何复杂逻辑，都应当使用计算属性。

1.基本用法 【计算属性 reversedMessage】

        <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        </div>

        var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
            }
        }
        })

2.计算属性缓存 vs 方法

将上方计算属性代码转换为方法代码

        <p>Reversed message: "{{ reversedMessage() }}"</p>

        // 在组件中
        methods: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
        }

【计算属性】计算属性是基于它们的响应式依赖进行缓存的。
——> 有缓存
【方法】每当触发重新渲染时，调用方法将总会再次执行函数。
——> 无缓存

3.计算属性 vs 侦听属性

将上方计算属性代码转换为侦听属性

        var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
            this.fullName = this.firstName + ' ' + val
            }
        }
        })

4.计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

    computed: {
    fullName: {
        // getter
        get: function () {
        return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
        }
    }
    }

侦听器

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