一、vue介绍

1.Vue.js是用于构建交互式的 Web 界面的库。

2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。

3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。

4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。

5.内核生成：Es6和--->类和继承

6.Model：js对象。

 View：html视图。

 通过事件驱动去监听视图的变化，方法和指令，监听视图对象的方法。

 双向绑定（v-model）；

 DOM事件：JS;

7.Css\js\html\-->js类，模式：MVC模式（虚拟DOM），单向数据流，js的角度封装

8.vue是单独拿出来，MVVM模式（分开的，用事件去监听DOM），双向数据流，采用指令(标记中的一个属性)

二、 Vue的实例

1.构造器：

每个 Vue.js应用都是通过构造函数Vue创建一个 Vue的根实例启动的

var Vm = new vue({

                //选项

             })

2.在实例化Vue时,需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项.

3.属性和方法：

Var data={a:1}

Var vm=new vue({

   data:data

})

Data是存在动态属性和对象的，相当于react里的state。

4.el:’#id’-----是将vue的动态信息绑定在dom结构上，相当于react-dom里的render方法.

注意：搭环境的时候添加：Mode:”develoads”

5.

(1)在模板中绑定表达式是非常便利的,但是它们实际上只用于见简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。

(2)为了不让模板过重我们都是使用计算属性:

1)Vue中data放定义的数据内容。

2)Computed放计算的属性内容。

6.计算缓存methods：（展示存在的东西）

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

2.不同的是计算属性是基于它们的依赖进行缓存的。

3.计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问reversedMessag计算属性会立即返回之前的计算结果,而不必再次执行函数

4.只要发生重新渲染，method调用总会执行该函数。

通过事件完成的功能，调用方法，用完重新计算

7.模板语法------缩写

V- 前缀在模板中是作为一个标示Vue特殊属性的明显标识。当你使用Vue.js为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。同时，当搭建Vue.js管理所有模板的SPA时,V-前缀也变得没那么重要了。因此, Vue.js为两个最为常用的

指令提供了特别的缩写:

v-bind缩写:

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

<!--缩写--><a :href="url"></a>

V-on缩写

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

<!--缩写--><a@click="doSomething"></a>

8.计算侦听-watch

Vue提供了一种更通用的方式来观察和响应 Vue实例上的数据变动:侦听属性。

应用:通常用在数据变化时执行异步或开销较大的操作时,特殊的方式会用到，实时监听，占缓存比较大，开销比较大。

如果操作比较简单,一般用的computed。

三、 Vue的生命周期

初始化的注入：里面是一个事件系统，created，架构

是否指定"el":没有的话要DOM结构上绑定对象

是否具有模板：是的话进行虚拟DOM，渲染模板。不是的话进行真实的DOM，输出在html中。

模板之后创建实例化对象，渲染实例，相当于willmount

函数封装：（内核原理）

在底层的实现上,Vue将模板编译成虚拟 DOM渲染函数。结合响应系统，在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM 操作上。

文本：

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

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

通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

四、条件渲染

1.v-if有两种用法，可以使用在文本里，也可以在模板里。

节点模板使用方式v-if.html

2.v-else给v-if添加一个else块。

v-else.html

3.v-else-if:vue2.0新增的模块。

v-else-if.html

4.v-show:根据条件展示元素

v-show 的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性 display。

v-if:多  根据里面的条件去判断里面的DOM结构是否加载。

v-show:少   始终被渲染，只是改变里面的 display：none属性。

index.html:

index.js:

5.v-for  指令需要以item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。(遍历对象的语法)--------例如:v-for.html

6.在模板中使用:v-for模板.html

7.迭代对象:v-for对象.html

8.迭代对象加属性:index:下标，key关键字，value:值,位置不能变化,名字可以随意起

9.v-for属性加参数.htm

index.html:

index.js:

10.循环整数:v-for整数.html

index.html:

index.js:

效果图：

11.使用v-on监听dom事件

使用方式:v-on:事件名称  例如v-on:click,监听单击事件

例如:监听dom事件:v-on-dom.html

       方法事件:v-on-function.html

当逻辑处理较复杂的时候,可以定义一个方法处理,v-on可以接受一个方法。

内联处理器方法：v-on-内联.html

12.Vue.js为 v-on提供了事件修饰符来处理 DOM 事件细节:

.stop: 阻止单击事件冒泡

.prevent:阻止默认事件

.capture:事件捕获

.self :事件本身

.once :事件只触发一次(2.1.4版本新增)

13.阻止单击事件冒泡:<a v-on:click.stop="doThis"></a>

提交事件不再重载页面:<form v-on:submit.prevent="onSubmit"></form>

修饰符可以串联:<a v-on:click.stop.prevent="doThat" ></a>

只有修饰符:<form v-on:submit.prevent> </form>

添加事件侦听器时使用事件捕获模式:<div v-on:click.capture=”doThis">...</div>

只当事件在该元素本身(而不是子元素)触发时触发回调:<div v-on:click.self="doThat">...</div>

14.基础用法:

vue.js的v-model在表单控件上实现双向绑定.

v-model会根据控件类型自动选取正确的方法来更新元素.

v-model并不关心表单控件初始化所生成的值。因为它会选择 Vue实例数据来作为具体的值，使用指令进行绑定，双向绑定.

index.html:

index.js:

效果图：

index.html:

index.js:

效果图：