关于Vue的那些事儿

Vue

渐进式框架

众前端周知，Vue是一套用于构建用户界面的渐进式框架，自底向上逐层应用，关注视图层。那我们就来说道说道：

渐进式：声明式渲染->组件系统->客户端路由(router)->数据管理状态(Vuex)->构建工具(npm)

所谓的渐进式：我觉得就是渐进嘛，一步一步来，首先Vue给了你核心的Vue核心库，实现最基本的组件系统、双向数据绑定。但是你要新的，强大的功能，可以啊，没有问题，自己添加嘛，逐步根据自己的需求添加相应的插件。就比如说：你需要路由了，你去添加Vue-router，你需要状态管理了，你添加Vuex，渐进式的添加使用你所需要的功能。

核心点：

响应式数据绑定：数据发生变化的时候，试图自动更新，实现数据的双向绑定。就是利用ES6的Object.definedProperty中的getter/setter代理数据，监控对数据的操作。

组合的视图组件：页面最终就是一个组件树，采用树形的数据结构进行数据结构的设计，方便之后的维护和使用。

虚拟DOM

利用内存中生成的与真实的DOM对应的dom树结构，当数据发生变化时，用最小的代价将刷新的组件应用到DOM操作上。

基本的内部指令

这个部分主要的指令就不展示了，提几个有意思的点吧：

1. v-if 和 v-show的区别
   
   v-if：在切换过程中条件内的事件监听器和子组件适当的被销毁，重建，开销比较高，一般改变比较少的时候使用；
   
   v-show：灵活的使用css的display属性，开销比较小，需要频繁切换的时候使用。

2. {{msg}}一般取值的话会有一个弊端就是，在网速很慢的时候，或者js加载很慢的时候，就会在页面直接显示{{msg}},可以用v-text解决这个问题、

<div>{{meg}}</div>
<!-- 和下面的一样 -->
<div v-text="meg"></div>

3.v-pre

直接输出原值，也就是不会输出渲染的值(vue中的data)

<div v-pre>{{meg}}</div>

4.v-cloak

在vue渲染完了指定的整个DOM之后才进行显示，必须和CSS一起使用

// css
[v-cloak] {
    display: none;
}

// html
<div v-cloak>{{meg}}</div>

5.v-once

只显示一次DOM改变的值，之后就不再改变了，优化了DOM消耗资源的问题，对页面的加载其实是很好的

生命周期

常用的一些选项

1. computed
   
   计算属性：主要就是对原来的数据进行改造(格式化输出：大小写转换，排序，添加符号)
2. methods
   
   方法属性：用于绑定HTML中的事件对应的方法
3. watch
   
   数据变化监听器：主要用于监测data中的数据变化
   
   4.filters
   
   过滤器：通常格式化字符，使用传值

filters: {
    filterA(value) {
        return value.toUpperCase();
    }
}

1. mixins
   
   混入：用于减少代码污染、减少代码量、实现代码的重用

6.extends

扩展：对构造器进行扩展

组件基础

1. 组件注册
   
   全局注册

// script
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
});

new Vue({
    el: '#app'
});

// html使用
<button-counter></button-counter>

局部注册

// script
new Vue({
    el: '#app',
    components:{
        "button-inner":{
            data: function() {
                return {
                    inner: 0
                }
            },
            template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
        }
    }
});

// html使用
<button-inner></button-inner>

简单对比组件，可以发现：就是说全局的组件注册呢，就是Vue.component的一个使用，在对象里面添加组件名，组件属性，之后就可以在全局调用组件了，一般不推荐使用吧；之后就是局部组件，那就是在绑定的组件里面去声明组件，然后调用，这个用法在路由中不就得到了广泛的应用么

父子组件

// script
// 子组件
var city = {
    template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
    template:
        `<div>
            <p> Panda from China!</p>
            <city></city>
        </div>`,
    components:{
        "city": city
    }
}

// 实例化
new Vue({
    el: '#app',
    // 定义局部组件
    components:{
        // 组件注册
        "parent": parent
    }
});

// html使用
<parent></parent>

模板使用

vue中的模板用template实现

1. 选项模板：一般选项模板就是在实例化的时候将template放入实例化之中
2. template标签模板
3. script type="x-template"标签模板

插槽 slot

关于插槽这个概念，通俗的根据我的理解，就是一个用来放置其他东西的空间，应该是说：可以提供空间给其他的组件使用

1. 单个slot
   
   也就是我们说到的默认插槽，匿名插槽，不设置name属性
2. 具名slot
   
   slot添加了name属性，也就是具名插槽了，可以在一个组件中出现多次
   
   必须写在template中

写在最后，几天重新学Vue之后吧，感觉比之前是好挺多的，对很多的概念啥的有了更深的理解吧，就像之前的ThinkPHP5.0，起初就是为了实现基本的功能，但是，还是没有深入的了解到整个框架比较重要的部分吧。二次入门还是收获很多的。有些东西还是得经过时间的磨练呀