vue.js课程总结

一、Vue.js的基本概念

1.1、介绍

Vue.js诞生于2014年，又尤雨溪开发，是一套基于前后端分离模式、用于勾践用户界面的渐进式框架，它只关注试图层的逻辑、采用自底向上的增量式开发的设计。

1.2、优点：

轻量级：Vue简单、直接，所以Vue使用起来更加友好。

双向数据绑定：数据驱动视图、视图也可以驱动数据。

组件化开发：vue.js提供了非常方便且高效的租几间管理来进行加载公用的模块。

指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。

插件：插件用于对vue框架功能进行扩展。

1.3、开发模式

1、Model（模型）：数据层，主要是从数据库取出的经过特定出来之后的数据。

2、View（视图）：视图层，即HTML文档的DOM元素，也就是我们看到的页面。

3、ViewModel（视图模型）：用于连接视图与数据的数据模型，负责监听Model或者View的修改。

二、data数据对象

2.1data概述

        data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

        var app=new Vue（{data：{数据}}），Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

        data定义的数据通过插值语法（”{{}}“）绑定到DOM节点，data数据对象有以下两种下写法：

2.2、methods方法

        概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。在methods方法中访问data的数据，可以直接通过this.属性名的形式来访问，this表示Vue实例

次代码演示的是点击按钮把旧文本更改成新文本

三、常用指令

3.1、概述

指令（Directives）是Vue.js模板中最常见的一项功能，HTML元素仅仅是界面的呈现，若还需要喝Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须卸载HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀喝后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏，修换渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

3.2、v-text

        v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素内容，即使HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同

3.3、v-html

        v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的innerHTML，内容按照HTML格式进行解析，并且显示对应内容

3.4、v-bind

        v-bind指令用于实现单向动态数据绑定。

        前面的v-text喝v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容动态来渲染外，某些标签的属性也希望动态来绑定，这时旧可以使用v-bind动态绑定属性

3.5、v-for

        v-for是Vue.js的循环语句，当需要便利数组或对象时，常用的就是列表渲染指令v-for，他需要结合着in或者of来使用

3.6、v-model

        v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上（如input，select、textarea等）。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应同步更新为相同的数据。

3.7、v-if和v-else

        v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容智慧在指令的表达式返回true值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

        v-if的使用一般有两个场景：

        1.通过条件判断展示或者隐藏某个个元素或者多个元素；

        2.进行视图之间的切换。

四、事件修饰符

4.1、.stop阻止事件冒泡

        当事件触发时，会像气泡一样，从DOM树的底层，一层一层往上面传递，一直传递到DOM树的根节点，如果子元素和父级元素出发的时相同事件，那么当子元素被触发时父元素也会被触发，这就是事件的冒泡机制。

使用.stop修饰符阻止事件向上冒泡

4.2、.prevent阻止默认事件

        在实际开发中，若<a>的默认事件会与其他事件冲突，则可以使用.prevent修饰符阻止它的默认事件。

4.3、.capture 事件捕获模式

        事件捕获的执行顺序时由外部结构向内部结构执行，恰好与事件的冒泡顺序相反。

4.4、.self自身触发事件

        .self修饰符用来实现只有事件时元素本身触发时才回调，除此之外都不会被触发。

4.5、.once事件只触发一次

        .once修饰符用来阻止事件被多次触发，只触发一次。