02-VUE介绍和指令

一、VUE简介

1、什么是VUE

是一个用于构建用户界面 的渐进式框架

构建用户界面：用vue往html页面中填充数据，非常的方便

框架：框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！

优点：大大提升开发效率（70%）；

缺点：需要理解记忆规则；

2、vue的特性

数据驱动视图：数据变化会驱动视图自动更新好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定；

双向数据绑定：在网页中，form表单负责采集数据，ajax负责提交数据 js数据的变化，会被自动渲染到页面上页面上，表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中；

响应式：数据变化，视图自动更新。

3、MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。

MVVM指的是Model、View和ViewModel，它吧每个HTML页面都拆分成这三个部分

在MVVM概念中： Model表示当前页面渲染时所依赖的数据源 View表示当前页面所渲染的DOM结构ViewModel表示vue实例，它是MVVM的核心

4、vue的版本

Vue.js 至今已发展超过10年，目前稳定并存着两个主要版本：Vue 2 和 Vue 3。

Vue2:维护模式、发布于2016年，虚拟DOM、服务端渲染，在2.7版本中支持组合式API，TypeScript支持类型定义需手动维护，支持IE浏览器，维护截止日期2023年12月31日；

Vue 3: 当前主要版本，持续活跃,发布于2020年，组合式API、Teleport、Fragment、基于Proxy的响应式系统，原生支持组合式API，源码级支持，类型推断更好，更小、更快，支持tree-shaking，不支持IE；

二、VUE基本使用

1、基本使用步骤

导入vue.js的script脚本文件

在页面中声明一个将要被vue所控制的DOM区域

创建vm实例对象（vue实例对象）

css 复制代码

<body>
    <!--希望 Vue 能够控制下面的这个div， 帮我们在把数据填充到 div 内部-->
    <div id="app">{{ username }}</div>

    <!-- 1、导入vue的库文件， 在window全局就有了vue 这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        // 创建vue的实例对象
        const vm = new Vue({
            // el: '#app'，这个属性是必须的， 用来指定当前这个vue实例对象，要控制哪个dom元素
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                username: 'Vue.js'
            }
        })
    </script>
</body>

2、VUE的调试工具

https://chrome.zzzmh.cn/index

3、VUE的指令与过滤器

**指令的概念 **

指令（Directives）是vue为开发者提供的模版语法，用于辅助开发者渲染页面的基本结构，vue中的指令按照不同的用途可以分为如下6大类

内容渲染指令

用来辅助开发者渲染DOM元素的文本内容。(v-text、{{}}、v-html )

v-text指令缺点：会覆盖元素内部原有的内容！

{{ }} 插值表达式：在实际开发中用的最多，知识内容的占位符，不会覆盖原有的内容！

v-html 指令得的作用：可以吧带有标签的字符串，渲染成真正的HTML内容！

属性绑定指令

作用：动态的设置html的标签属性 -> src url title ...

语法：v-bind:属性名="表达式"

注意：简写形式: :属性名="表达式"

css 复制代码

<div :title="'box' + index"> 这是一个div</div>

事件绑定指令

vue提供了v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：v-on: 事件名 = "内联语句"、v-on: 事件名 = "methods中的函数名"

简写: @事件名

双向绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据 input输入框，type为radio、checkbox、 textarea

作用: 给表单元素使用，双向数据绑定-> 可以快速获取或设置表单元素内容

数据变化 -> 视图自动更新

视图变化 -> 数据自动更新

语法: v-model = '变量'
v-model指令的修饰符为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：

.number:自动将用户的输入值转为数值类型

.trim:自动过滤用户输入的首位空白字符

.lazy:在change时而非input时更新

css 复制代码

<!-- 自动将输入转为数值类型 -->
<input v-model.number="age" />

<!-- 自动去除输入首尾空格 -->
<input v-model.trim="msg" />

<!-- 在change事件时更新数据（非input事件） -->
<input v-model.lazy="msg" />

条件渲染指令

v-show

作用：控制元素显示隐藏

语法：v-show="表达式" 表达式值 true显示， false隐藏

原理：切换display:none控制显示隐藏

场景：频繁切换显示隐藏的场景
v-if 作用：控制元素显示隐藏（条件渲染）

语法：v-if="表达式" 表达式值 true显示， false隐藏

原理：基于条件判断，是否创建或移出元素节点

场景：要么显示，要么隐藏，不要频繁切换的场景
v-else、v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if="表达式"

注意：需要紧挨着v-if一起使用

列表渲染指令:

v-for

作用：基于数据循环，多次渲染整个元素 -> 数组、对象、数字...

语法：v-for = "(item, index) in 数组" ， item每一项， index下标，省略 index: v-for = "item in 数组"
注意点：

key的值只能是字符串或数字类型， key值必须具有唯一性

在vue提供的模版渲染语法中，除了支持绑定简单的数据值之外，还支持javaScript表达式的运算；

事件修饰符

在事件处理函数中调用event.preventDefault()

或event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，

来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下： .prevent

阻止默认行为（例如：阻止a连接跳转，阻止表单的提交等） .stop 阻止事件冒泡 .capture 以捕获模式触发当前的事件处理函数

.once 绑定的事件只触发1次 .self 只有在event.target是当前元素自身时触发事件处理函数

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

css 复制代码

<!-- 只有在key是enter时调用vm.submit()-->
<input @keyup.enter="submit">

<!-- 只有在key是esc时调用 vm.clearInput()-->
<input @keyup.esc="clearInput">