渐进式框架

只要使用工具，就会带来方便，提高生产力。

vue就是一个前端框架，称为渐进式框架。关于渐进式的理解，扒一段：

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；

还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。

也可以函数式，都可以。

它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

你不必一开始就用Vue所有的全家桶，根据场景，官方提供了方便的框架供你使用。

使用历程：

form表单验证==》整个页面的dom 用Vue 来管理（用数据驱动DOM的变化）==》webpack vue-router控制路由，用于一整套前端开发的工程的构建==》熟悉组件之间的交流来处理数据交流和后端接口==》大型项目

从最初的只因多看你一眼而用了前端js库，一直到最后的大型项目决方案。

在我看来，渐进式代表的含义是：主张最少。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

– 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

声明式渲染

如果只是想简单体验下的，使用cdn直接连就可以了使用了。

script src=https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js/script

下面是代码

<div id=app

{{ message }}

input v-model=inputValue

/div>

var app = new Vue({

el: ‘#app’,

data: {

message: ‘Hello Vue!’,

inputValue

}

})

其实是很简单的逻辑，

举个栗子：在前面需要显示的地方，使用 {{ }} 先占个位子，说这个地方老王占了啊，然后在下面vue的data里面登记一下老王的信息，vue就是个管理员。至于到时候老王说是小王坐还是小李坐，那就看老王了。以前的操作dom是，老王把儿子小王送过来了，然后把亲自小王送到座位上。现在有管理员了，送门口老师这，就不用管理了。用户那边输入的input框也说明登记下，小王说啥，老师自动会告诉老王。举得例子呃……凑活理解吧

vue的这种声明式渲染，也算是响应式的核心原理是使用了js的一个函数

defineProperty

这个函数可以讲对象进行监控，setter和getter都可以进行其他的操作。就是进门出门要登记，这种中间就可以进行其他操作，比如对视图进行刷新，通知对应的watcher等等。

条件和循环

条件形式为

<p v-if=“seen”>现在你看到我了</p>

只要学开发的if肯定跑不了的，声明的地方声明  seen 就可以了。seen为true就显示，为false就不显示。

小提示： v-show和v-if的区别：

v-show的形式是这个dom还在，只不过通过 display 来进行操作，这个dom始终都还在。

v-if是直接操作dom进行显示。

类似鼠标滑过就变化的类型，使用v-show，减少计算。

类似根据权限决定是否显示的，操作几次就没有的，使用v-if，减少dom渲染

循环代码为

<li v-for=“todo in todos”>
     {{ todo.text }}
</li>

var app4 = new Vue({
 el: ‘#app-4’,
 data: {
   todos: [
     { text: ‘学习 JavaScript’ },
     { text: ‘学习 Vue’ },
     { text: ‘整个牛项目’ }
   ]
 }
})

格式死的，用两次就记住了。

用户输入&绑定方法

<button v-on:click=“reverseMessage”>逆转消息</button>

var app5 = new Vue({
 el: ‘#app-5’,
 data: {
   message: ‘Hello Vue.js!’
 },
 methods: {
   reverseMessage: function () {
     this.message = this.message.split(”).reverse().join(”)
   }
 }
})

在需要进行操作的地方绑定方法，就可以获得反馈，下面在对应的方法上，直接操作声明好的对象就可以了。

再举个栗子：老王把小王送学校，告诉小王，有人欺负你告诉老师。老师这里交代，小王找你了要批评惩罚欺负小王的小朋友，并且要换座位。

组件化应用构建

组件化应用就是把一个应用或者页面进行拆分​，各个部分处理各个部分的事情就可以了。

最最以前干这个事情的是后端拿到切好的图，拆分成头部，尾部，侧边栏之类的。不过代码之间的脚本啊，样式啊还是会相互影响的。

可以把几乎里面所有的部分都进行抽象组件化，剥离成一个一个的组件，并且可以坐到相互之间没有影响。各管各的事情。

请点击输入图片描述

这样在进行大型项目构建的时候，就可以拆分头部一个组件，边栏一个组件，主内容一个组件。细分到里面一个input就是一个组件，editor都是组件。当然根据项目要求和人员配置来划分。

生命周期

vue再进行dom操作应用渲染的时候，有个顺序，什么时候干什么事儿。不同的生命周期之下做处理不同的事务，用户收到的反馈是不同的。

请点击输入图片描述

还是这个栗子：

new Vue（首先要有学校老师，小王，老王）->beforeCreate（准备报名）->created(报名好了)->beforeMount(准备上学)->mounted(送门口交代了交代交代)->beforeDestory（准备回家）->destory(放学回家)

​

通俗​理解不是很透彻，希望指正。

​