Vue.js基础入门笔记

.什么是Vue？

        1.Vue是一套用于构建用户界面的渐进式框架。

        2.Vue的数据驱动是通过MVVM（Model-View-ViewModel）模式来实现的

                (1).Model指的是数据部分的处理，主要负责业务数据

                (2).View指的是视图部分，即DOM元素，负责视图的处理

                (3).ViewModel是连接视图与数据库的数据模型，负责监听Model或者View的修改

.Vue的优势

        1.轻量级 ：

        2.数据绑定 ：Vue是一个MVVM框架，数据双向绑定.

        3.指令 ：包括内置指令和自定义指令，指令会给绑定的元素添加一些特殊的行为.

        4.插件 ：

.Vue开发环境

        1.Visual Studio Codo编辑器

                (1).轻巧极速，占用系统资源较少.

                (2).具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能.

                (3).跨平台.

                (4).主题界面的设计比较人性化.

                (5).提供了丰富的插件.

.Vue实例

        1.创建Vue实例 ：

                var vm = new Vue({ //选项 })

        2.el唯一根标签 ：

                class或id选择器可以用来将页面结构与Vue实例对象vm中的el绑定.

        3.data初始数据 ：

                Vue会将data的属性转换为 getter、setter，从而让data的属性能够影响数据变化.

        4.methods定义方法 :

                通过Vue实例可以直接访问这些方法，在定义的方法中this指向Vue实例本身.

        5.computed计算属性 ：

                当有一些数据需要随着其他数据变动而变动时，就需要computed计算属性。

        6.watch状态监听 ：（用户所需自行定义的）

                可以通过单击事件，键盘事件等条件来触发，但不能自动监听当前Vue对象的状态变化.

        7.fiters过滤器

                (1).在插值表达式中使用过滤器

                        参数传递到toUpcase过滤器中执行，toUpcase将返回的最终结果展示到页面.

                        " | " 称为管道符，管道符之前代码执行的结果会传到后面作为参数进行处理.

                (2). 在v-bind 属性绑定中使用过滤器

                        在 data 后面可以加过滤器，语法为 “ data | filter ”.

.Vue数据绑定

        1.绑定样式

                可以通过绑定内联样式和绑定样式类这两种方式来实现

        2.内置指令

                (1).v-model ： 主要实现数据双向绑定

                (2).v-text ： 在DOM元素内部插入文本内容

                (3).v-html : 在DOM袁术内部插入HTML标签内容，v-html的内容可以是HTML结构

                (4).v-bind ：表示输入框的文本内容，所以v-bind是单向数据绑定，而不是双向数据绑定

                (5).v-on : v-on指令为按钮绑定了事件，可以简写成 @cilck 形式

                (6).v-for : 常用来循环数组

                (7).v-if 和 v-show ：

                v-if 用来控制元素 显示 或者 隐藏,属性为布尔值

                v-show 是操作元素的 display 属性.

                v-if 会对元素进行 删除 和 重新创建.

.Vue事件

        1.事件监听

                (1).在触发事件是执行 JavaScript 代码

                (2).使用按键修饰符监听按键

2.事件修饰符

                (1). .stop 阻止事件冒泡 （ 子 ——> 父 ）

                        所以同一时间类型会在元素内部和外部触发，有可能会造成事件的错误触发

                        需要使用 .stop 修饰符阻止事件冒泡行为.

                (2). .prevent 阻止默认事件行为

                        此时可以使用 .prevent 修饰符来阻止<a>标签的默认行为.

                (3). .capture 事件捕获 （ 父 ——> 子 ）

                        事件捕获的执行顺序是由外部的结构向内部结构执行，与事件冒泡顺序相反.

                (4). .self 自身触发

                        只有DOM元素本身会触发事件

                (5). .once 只触发一次

                        用于阻止事件多次触发，只触发一次