《VUE.js 实战》读书笔记

1. 初识vue.js

MVVM模式从MVC模式演化而来，但是MVVM模式更多应用在前端，MVC则是前后端共同表现。
传统开发模式：jQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) + Gulp ( Grunt)。
vue.js可以直接通过script引入方式开发，也可以通过webpack组织项目开发。

1.1. 使用小技巧

在Vue项目中，public/index.html 文件是项目构建时的入口模板，最终会被Webpack处理并插入生成的<div id="app"></div>标签。Vue的单页面应用(SPA)的主视图通常会在App.vue组件内定义，并由Vue实例挂载到这个#app元素上。如果你需要修改public/index.html以适应你的Vue页面，你可以直接编辑该文件。

2. 数据绑定和第一个vue应用

这一章看完后，基本可以下场实战了，起码能看懂代码。

2.1. 实例与数据绑定

html 复制代码

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <title>Vue 实例</title>
</head>
<body>
    <div id="app">

        //(3) v-model指令进行数据绑定,绑定data中的name
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好，{{name}}</h1>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js "></script>
    
    <script>

        var myData{
            name: 1
        }

        //（1）VUE实例构造函数，创建实例
        var app = new vue({ 

            //(2) el用于指定一个页面中己存在的DOM元素来挂载Vue实例
            el = '#app',
            data:{
                name : ''
            }
            //(5) 也可以这样
            //data: myData
        })
        
        //(4) 可以这样访问
        console.log (app.name); 
    </script>

</body>
</html>

通过vue构造函数创建实例：
el用于指定一个页面中己存在的DOM元素来挂载Vue实例
v-model指令进行数据绑定
Vue 实例本身也代理了data 对象里的所有属性
也可以指向一个己有的变量

2.2. 生命周期

javascript 复制代码

var app = new vue({
    el:'#app',
    data:{
        a:2
    },
    //钩子，创建是触发
    created: function(){
        console.log(this.a);
    }
})

Vue 的生命周期钩子比较常用的有：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。
mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

2.3. 插值与表达式

使用双大括号（ Mustache 语法）"｛｛｝｝"是最基本的文本插值方法，它会自动将我们双向绑
定的数据实时显示出来。
如果有的时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html。

html 复制代码

<span v-html="link"></span>

data: {
    link: '<a href ＝"＃">这是一个连接<a>'
}

如果想显示｛｛｝｝标签，而不进行替换，使用v-pre 即可跳过这个元素和它的子元素的编译过程。

2.4. 过滤器

支持在｛｛｝｝插值的尾部添加一小管道符"|" 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤器也可以串联，而且可以接收参数。

html 复制代码

<div id="app">
    {{date | formateDate}}
</div>

<script>
    var app = new vue({
        el:'#app',
        data:{
            date: new date()
        },
        filters:{
            formateDate: function(value){
            //这里做过滤的事情，value就是date变量
            }
        }

    })
</script>

2.5. 指令和事件

指令（ Directives ）是Vue扣模板中最常用的一项功能，它带有前缀v-，指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。

<p v-if ＝ " show " >显示这段文本＜/p>， v-if根据show的布尔值确定是否显示。
<a v-bind:href ＝" url " >链接 </a>， v-bind 的基本用途是动态更新HTML 元素上的属性，比如id、class 等
v-on，它用来绑定事件监听器，这样我们就可以做一些交互了。

javascript 复制代码

<div id = "app">
    <button v-on:click="doSth" >干点人事</button>
</div>

<script>
    var app = new vue({
        el:"#app",
        data:{},
        methods:{
            doSth:function(){
                //干点人事
            }
        }
    })
</script>

Vue. 将methods 里的方法也代理了，所以也可以像访问Vue 数据那样来调用方法：this.doSth();

2.6. 语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。

v-bind 可以省略v-bind直接写一个冒号" ：":<a : href＝ " url " >链接</a>
v-on 可以直接用" ＠ " 来缩写：<button @click＝ " doSth " ＞干点人事</ button>

2.7. 实用小技巧

看完本章后还是有个疑问，用vue-cli建的项目，是怎么把index.html和vue件关联的呢？网上有小伙伴把来龙去脉讲清楚了，可以参考

vue-cli中webpack把js文件引入index.html的过程 - 知乎 (zhihu.com)

3. 计算属性

所有的计算属性都以函数的形式写在Vue 实例内的computed 选项内，最终返回计算后的结果。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
当执行app.fullName ='John Doe＇；时， setter就会被调用，数据firstName和lastName都会相对更新，视图同样也会更新。
计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性：二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据。
与method不同，计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。

4. v-bind 与 class 和 css 绑定

4.1. 绑定class 对象语法

给v-bind:class 设置一个对象，可以动态地切换class。
对象中也可以传入多个属性，来动态切换class 。另外，:class 可以与普通class 共存。
当:class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性。

javascript 复制代码

<div id＝ "app">
    <div :class="{'active' : isActive }"></div>
    <div class="static": class="{'active':isActive, 'error':isError}"> </div>
    <div :class="classes"></div>
</div

<script>
    var app = new vue({
        el:'#app',
        data:{
            isActive: 'true',
            isError: 'false'
        },
        computed:{
            classes:funtion(){
                return{
                    'active': this.isActive && !this.error,
                    'text-fail': this.error && this.error.type === 'fail'
                }
            }
        }
    })
</script>

4.2. 绑定class 数组语法

当需要应用多个class 时，可以使用数组语法，给:class 绑定一个数组，应用一个class 列表。
也可以使用三元表达式来根据条件切换class
class 有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法。
与对象语法一样，也可以使用data 、computed 和methods 三种方法

javascript 复制代码

<div id＝ "app">
    <div :class="[activeCls , errorCls]"></div>
    <div :class="[isActive ? activeCls :'', errorCls]" ></ div>
    <div :class="[{'active': isActive } , errorCls ]" ></ div>
</div

<script>
    var app = new vue({
        el:'#app',
        data:{
            isActive: true,
            activeCls: 'active',
            errorCls: 'error'
        }
    })
</script>

4.3. 绑定style

使用v-bind:style （即：style ）可以给元素绑定内联样式，方法与:class 类似，也有对象语法和数组语法，也可以使用data、computed等。

html 复制代码

<div :style="{'color': color, 'fontSize' : fontSize +'px'｝">文本</ div>

5. 内置指令

5.1. 基本指令

v-cloak 不需要表达式，它会在Vue 实例结束编译时从绑定的HTML 元素上移除，经常和css的display: none；配合使用，说白了就是没用的。
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

5.2. 条件渲染指令

v-if, v-else-if, v-else条件指令可以根据表达式的值在DOM中渲染或销毁元素／组件。
Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。
Vue扣提供的key 属性，它可以让你自己决定是否要复用元素， key 的值必须是唯一的。
v-show 的用法与v-if 基本一致，只不过v -show 是改变元素的css 属性di splay 。
v-if 更适合条件不经常改变的场景，因为它切换开销相对较大，而v-s how 适用于频繁切换条件。

5.3. 列表渲染指令v-for

将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for 。它的表达式需结合in 来使用，类似ite m in items 的形式。
v- for 的表达式支持一个可选参数作为当前项的索引v-for= "(book , index) in books"，其中index就是索引项。
与v-if 一样， v-for 也可以用在内置标签<template>上，将多个元素进行渲染
v-for 可以迭代整数：v-for= " n in 10"
Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：push()\pop()\shift()等等
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组

5.4. 方法与事件

在＠绑定的事件后加小圆点"．"，再跟一个后缀来使用修饰符：top\prevent\capture\self\once

6. 表单与v-model

感觉这一章的内容比前面简单了只要理解了v-model的用法，剩下的就是控件的表达。

html 复制代码

<div id="app">
    <input type="text" v-model ="message" placeholder="输入．．．">
    <p>输入的内容是：{{message}}</p>
</div>

<script>
    var app = new vue({
        el:'#app',
        data:{
            message: ''
        }
    })
</script>

6.1. 绑定值

v-model 绑定的值是一个静态字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind 来实现。

html 复制代码

<input type="radio" v-model="picked" :value="value">
//这里省略了很多代码
data:{
    picked:false,
    value:123
}
//在选中时， app.picked === app .value ， 值都是123

6.3. 修饰符

v-model 也有修饰符，用于控制数据同步的时机。

使用修饰符.lazy 会转变为在change 事件中同步。
使用修饰符.number 可以将输入转换为Number 类型。
使用修饰符.number 可以将输入转换为Number 类型。

7. 组件

7.1. 组件的用法

template的DOM 结构必须被一个元素包含，如果直接写成"这里是组件的内容"，不带

"<div></div＞"是无法渲染的。

html 复制代码

<div id="app">
    <my-compnent></my-component>
</div>

<script>
    var data = {
        counter:0    
    };
    
    Vue.component('my-component',{//全局组件注册

        template:'<div>这是组件内容</div>',

        data:function(){//组件中的data必须使用funciton形式定义
            return {
                message:'msg信息',
                data: data //共享引用
            };
        }
    });

    var child = {
        template:'<div>这是局部组件内容</div>'
    }
    
    var app = new vue({
        el:'#app',
        components:{//局部组件注册
            'my-part-component':child
        }
    });
</script>

7.2. 使用props传递数据

父组件要正向地向子组件传递数据或参数，通过props 来实现。

html 复制代码

<div id="app">
    <input type="text" v-model="parentMessage" >
    
    //v-bind 会自动把内容识别为对应的类型，否则将只传递字符串
    <my-compnent v-bind:message="parentMessage"></my-component>//v-bind绑定父组件参数
</div>

<script>
    
    
    Vue.component('my-component',{

        props:['message'], //字符串数组
        template:'<div> {{message}} </div>', //这里就可以取到父组件的message值了

        
    });
    
    var app = new vue({
        el:'#app',
        data:{
            parentMessage: '父组件消息内容'
        }
    });
</script>

父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data 内再声明一个数据，引用父组件的prop。

另一种情况就是prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了。

除了数组外，还可以是对象，当prop 需要验证时，就需要对象写法。

javascript 复制代码

vue.component('my-component',{
    props:{
        propsA: Number,
        propsB: [Number, String],
        propsC:{
            type:Boolean,
            default:true
        }
    }
})

7.3. 组件通信

当子组件需要向父组件传递数据时，就要用到自定义事件。子组件用 $emit()来触发事件，父组件用$ on()来监昕子组件的事件。

html 复制代码

<div id="app">
    <p>总数：{{total}}</p>
    <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>

<script>
    vue.compnent('my-component',{
        template :'\
        <div>\
            <button @click＝ "handleIncrease"> +l </button> \
            <button @click＝ "handleReduce"> -l </button> \',
        date:funciton(){
            return {
                counter:0
            }
        },
        method:{
            handleIncrease:function(){
                this.counter++;
                this.$emit('increase', this.counter);
            },
            handleReduce: function(){
                this.counter--;
                this.$emit('reduce', this.counter);
            }
        }
    });

    var app = new vue({
        el: '#app',
        data:{
            total: 0
        },
        method:{
            handleGetTotal: function(total){
                this.total = total ;
            }
        }
    });
</script>

组件中使用v-model进行双向数据绑定，直接用了v-model的语法糖代表＠ input= " handler"。

html 复制代码

<div id="app">
    <p>总数：{{total}}</p>
    <my-component v-model="total"></my-component> // 语法糖，相当于@input="handleGetTotal"
</div>

<script>
    Vue.component('my-component', {
        template :'<button @click="handleClick" >+ l</button >',
        data: function(){
            return{
                counter : 0
            }
        },
        method: {
            handleClick: function(){
                this.counter++;
                this.$emit('input', this.counter);
            }
        }
    });

    var app = new vue({
        el:'#app',
        data:{
            total: 0
        }
    });
</script>

非父子组件一般有两种，兄弟组件和跨多级组件。在Vue2 中，推荐使用一个空的Vue 实例作为中央事件总线(bus)。

html 复制代码

<div id = "app">
    {{message}}
    <component-a></component-a>
</div>

<script>
    bus = new vue();

    Vue.component('component-a', {
        template:'<button @click ="handleEvent" >传递事件</button>'，
        methods:{
            handleEvent: funciton(){
                bus.emit('on-message', '来自组件component-a的内容');
            }
        }
    });

    var app = new vue({
        el:'#app',
        mounted: function(){
            var _this = this;
            bus.$on('on-message', function(msg){
                _this.message = msg; //监听
            });
        }
    });
</script>

在子组件中，使用this.$parent 可以直接访问该组件的父实例或组件，父组件也可以通过

this.$children 访问它所有的子组件，而且可以递归向上或向下无线访问，直到根实例或最内层的组件。

Vue 提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称。

html 复制代码

<div id = "app">
    <button @click="handleRef">通过ref 获取子组件实例</button>
    <component-a ref="comA" ></component-a>
</div>

<script>
    Vue.component('component-a',{
        template:'<div>子组件</div>',
        data: function(){
            return {
                message : '子组件内容'
            }
        }
    });

    var app = new vue({
        el: '#app',
        methods: {
            handleRef:function(){
                var msg = this.$refs.comA.message; //ref的用法
                console.log(msg);
            }
        }
    });
</script>

7.4. slot

其实就把父组件的内容直接显示在子组件内，替换掉子组件的slot那部分。子组件child-component 的模板内定义了一个slot>元素，并且用一个＞作为默认的内容，在父组件没有使用slot 时，会渲染这段默认的文本；如果写入了slot，那就会替换整个<slot> 。

给<slot> 元素指定一个name 后可以分发多个内容，具名Slot 可以与单个Slot 共存。

html 复制代码

<div id = "app">
    <child-component>
        <h2 slot ="header" >标题</h2>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </child-component>
</div>

<script>
    Vue.component('child-component',{
        template : '\
        <div>\
            <slot name="header" ></slot>\
        </div>\
        <div>\
            <slot>\
                <p>如果父组件没有插入内容，我将作为默认出现<p>\
            </slot>\
        </div>'
    });

    var app = new vue({
        el:'#app'
    });
</script>

在＜slot>元素上有一个类似props 传递数据给组件的写法msg＝" xxx "，将数据传到了插槽。父组件中使用了＜template＞元素，而且拥有一个scope＝"props "的特性，这里的props只是一个临时变量，就像v-for= "item in items"，里面的item 一样。template 内可以通过临时变量props访问来自子组件插槽的数据msg 。

而Vue 扣2.x 提供了用来访问被slot 分发的内容的方法$ slots.

7.5. 其他

$nextTick 就是用来知道什么时候DOM 更新完成的

javascript 复制代码

this.$nextTick (function(){
    var text = document.getElementByid('div').innerHTML;
    console.log(text);
});

在一些非常特殊的情况下，我们需要动态地去创建Vue 实例， Vue 提供了Vue.extend 和$mount 两个方法来手动挂载一个实例。

html 复制代码

<div id ＝"mount-div"></div>
<script>
    var MyComponent =Vue.extend({...});

    new MyComponent().$mount('#mount-div');
</script>

8. 自定义指令

自定义指令语法和组件基本一致，只是单词改成了driective。

javascript 复制代码

//全局定义
Vue.directive('test', {...});

//局部定义
var app = new vue({
    el:'#app',
    directive: {
        test: {...}
    }
});

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。bind, inserted, updated, componentUpdated, unbind。

每个钩子函数都有几个参数可用

el 指令所绑定的元素，可以用来直接操作DOM
binding 一个对象
vnode Vue 编译生成的虚拟节点
oldVnode 上一个虚拟节点仅在update 和componentUpdated 钩子中可用

9. Render函数

在Vue.js 2 中， Virtual Dom 就是通过一种VNode 类表达的，每个DOM 元素或组件都对应一

个VNode 对象。在多数场景中，我们使用template就足够了，但在一些特定的场景下，使用Virtual Dom 会更简单。

Render 函数通过crea teElement 参数来创建Virtual Dom。

html 复制代码

<div id="app">
    <anchor :leve="2" title="特性">特性<anchor>
</div>

<script>
    Vue.component("anchor", {
        props:{
            level:{
                type: Number,
                required: true
            },
            title:{
                type: String,
                defaule: ''
            }
        },
        render: function(createElement){
            'h' + this.level,
            [
                createElement(
                    'a',
                    {
                        domProps: {
                            href: '#' + this.title
                        }
                    },
                    this.$slot.default
                )
            ]
        }
    });
    
    var app = new vue({
        el:'#app'
    })
</script>

createElement 构成了Vue Virtual Dom 的模板，它有3 个参数：第一个参数必选，可以是一个HTML 标签，也可以是一个组件或函数；第二个是可选参数，数据对象，在template 中使用。第三个是子节点，也是可选参数，用法一致。

使用Render 函数最不友好的地方就是在模板比较简单时，写起来也很复杂，而且难以阅读出

DOM 结构，尤其当子节点嵌套较多时，嵌套的createElement 就像盖楼一样一层层延伸下去。为了让Render 函数更好地书写和阅读， Vue 扣提供了插件babel-plugin-transform-vue-jsx 来支

持JSX 语法。JSX 是一种看起来像HTML ，但实际是JavaScript 的语法扩展，它用更接近DOM 结构的形式来描述一个组件的U 和状态信息。需要在webpack 里配置插件babel-plugin-transform-vue才SX 编译后才可以运行。

javascript 复制代码

new vue({
    el:'#app',
    render(h){
        <anchor lever={1}> <span>一级</span> 标题 </anchor>
    }
})

10. 使用Webpack

在webpack 的世界里，一张图片、一个css 甚至一个字体，都称为模块（ Module),彼此存在依赖关系， webpack 就是来处理模块间的依赖关系的，并把它们进行打包。

web pack 的主要适用场景是单页面富应用（ SPA ）。SPA 通常是由一个h恤l 文件和一堆按需加载的js 组成，它的html 结构可能会非常简单。只有一个<div>节点，所有的代码都集成在了神奇的ma in 扣文件中，理论上古可以实现像知乎、淘宝这样大型的项目。

export 和import 是用来导出和导入模块的。一个模块就是一个js 文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。

javascript 复制代码

//Config.js

var Config ={
    version : '1.0.0'
};

export {Config};

//main.js

import {Config} from "./Config.js"

如果使用npm 安装了一些库，在webpack 中可以直接导入。归根到底， webpack 就是一个.js 配置文件，你的架构好或差都体现在这个配置里，随着需求的不断出现，工程配置也是逐渐完善的。

在webpack 的世界里，每个文件都是一个模块，比如css 、.js 、.html 、.jpg 、.less 等。对于不同的模块，需要用不同的加载器（ Loaders ）来处理，而加载器就是webpack 最重要的功能。

webpack 虽然概念比较新，看似复杂，但它只不过是一个js 配置文件，只要搞清楚入口（ Entη ）、出口（ Output ）、加载器（ Loaders ）和插件（ Plugins ）这4 个概念。

Vue.js 是一个渐进式的JavaScript 框架，在使用webpack 构建Vue 项目时，可以使用一种新的构建模式： .vue 单文件组件。一个. vue 文件一般包含3 部分，即＜template＞、＜script>和＜style＞。每个. vue 文件就代表一个组件，组件之间可以相互依赖。

javascript 复制代码

<template>
    <div> hello {{name}}</div>
</template>

<script>
    export default{
        data (){
            return {
                name : 'Vue.js'
            }
        }
    }
</acript>

<style scoped>
    div{
        color: #f60;
        font-size: 24px;        
    }
</style>

11. 插件

11.1. 路由

SPA其实就是在前后端分离的基础上，加一层前端路由。因此， SPA 只有一个ht时，整个网站所有的内容都在这一个html 里，通过JavaScript 来处理。

每个页面对应一个组件，也就是对应一个.vue 文件。在router 目录下创建views 目录，用于存

放所有的页面。再回到main.js 里，完成路由的剩余配置。创建一个数组来制定路由匹配列表，每一个路由映射一个组件：

javascript 复制代码

const Routers = {
    {
        path : "./index",
        component: (resolve) => require(['./views/index.vue'], resolve)
    }
}

vue-router 有两种跳转页面的方法，第一种是使用内置的＜router-link＞组件，它会被渲染为一个

<a>标签。第二种跳转方法，使用router 实例的方法。比如在about.vue 里，通过点击事件跳转。

11.2. 状态管理

虽然bus 己经可以很好地解决跨组件通信，但它在数据管理、维护、架构设计上还只是一个简单的组件，而Vuex 却能更优雅和高效地完成状态管理。

Vuex 里的数据都是响应式的，任何组件使用同数据时，只要数据变化，对应的组件也会立即更新。在组件内，数据只能读取，不能手动改变，改变store 中数据的唯一途径就是显式地提交mutations 。

Vuex 还有其他3 个选项可以使用： ge忧ers 、actions 、modules 。Vuex 很像是一种与开发

者的约定，所以涉及改变数据的，就使用mutations ，存在业务逻辑的，就用actions 。至于将业务

逻辑放在action 里还是Vue 组件里完成，就需要根据实际场景拿捏了。

12. 总结

这篇博客是一边学习看书一遍写的，每天早上开工前1个小时学习，前后估计写了有1个月时间。说实话，《VUE.js 实战》这本书感觉写的缺了点原理的解释，可能是篇幅的原因。当然也可能是第一次看关于前端的语言书籍，很多前端技术默认的东西没有掌握所以看起来有点吃力。无论如何，算是对vue有了基本的认识，后面项目中遇到了也不会搓手不及了。