Vue 基础

文章目录

• vue概述
• vue的基本使用
• vue模板语法
• 基础案例
• vue的常用特性

• 综合案例

一、vue概述

vue: 渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

官网：https://cn.vuejs.org/v2/guide/

优点：

⚫ 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
⚫ 灵活：在一个库和一套完整框架之间自如伸缩
⚫ 高效：20kB运行大小，超快虚拟 DOM

二、vue的基本使用

1.Vue.js之HelloWorld基本步骤

<div id="app">
    <div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'HelloWorld'
        }
    })
</script>

2.Vue.js之HelloWorld细节分析

        1. 实例参数分析

        ⚫ el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
        ⚫ data：模型数据（值是一个对象）

        2. 插值表达式用法

                ⚫ 将数据填充到HTML标签中
                ⚫ 插值表达式支持基本的计算操作

        3. Vue代码运行原理分析

                ⚫ 概述编译过程的概念（Vue语法→原生语法）

---

三、 Vue模板语法

        模板语法概述 

        前端渲染方式

                ⚫ 原生js拼接字符串
                ⚫ 使用前端模板引擎
                ⚫ 使用vue特有的模板语法

        原生js拼接字符串

               基本上就是将数据以字符串的方式拼接到HTML标签中。

               缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

        使用前端模板引擎

                优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
                缺点：没有专门提供事件机制。

        模板语法概览

                ⚫ 差值表达式
                ⚫ 指令
                ⚫ 事件绑定
                ⚫ 属性绑定
                ⚫ 样式绑定
                ⚫ 分支循环结构

指令 

1. 什么是指令？

        ⚫ 什么是自定义属性
        ⚫ 指令的本质就是自定义属性
        ⚫ 指令的格式：以v-开始（比如：v-cloak）

2. v-cloak指令用法

        ⚫ 插值表达式存在的问题：“闪动”
        ⚫ 如何解决该问题：使用v-cloak指令
        ⚫ 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

官网：https://cn.vuejs.org/v2/api/

3. 数据绑定指令

        ⚫ v-text 填充纯文本
                ① 相比插值表达式更加简洁
        ⚫ v-html 填充HTML片段
                ① 存在安全问题
                ② 本网站内部数据可以使用，来自第三方的数据不可以用
        ⚫ v-pre 填充原始信息
                ① 显示原始信息，跳过编译过程（分析编译过程）

4. 数据响应式

        ⚫ 如何理解响应式
                ① html5中的响应式（屏幕尺寸的变化导致样式的变化）
                ② 数据的响应式（数据的变化导致页面内容的变化）
        ⚫ 什么是数据绑定
                ① 数据绑定：将数据填充到标签中
        ⚫ v-once 只编译一次
                ① 显示内容之后不再具有响应式功能

双向数据绑定指令

1. 什么是双向数据绑定？
   1. 当数据发生变化的时候，视图也就发生变化；
   2. 当视图发生变化的时候，数据也会跟着同步变化
2. 双向绑定的使用场景
   1. v-model是一个指令，限制在 <input>、<select>、<textarea>、components（组件）中使用
   2. Vue中通过v-model指令实现双向绑定

事件绑定基本用法

1. vue中绑定事件
   1. 使用 v-on:事件名
   2. v-on 可以简写 @
2. 事件如何调用？
   1. 直接绑定函数名称调用
   2. <button v-on:click='handle1()'>点击1</button>
   3. 调用函数的形式
      1. <button v-on:click='handle1'>点击1</button>
3. vue中 事件对象 怎么使用
   1. 通过默认的事件参数
   2. 通过$event 使用

事件修饰符的用法

1. 阻止冒泡和 阻止默认行为
   1. .stop 阻止冒泡
   2. .prevent 取消默认事件

按键修饰符的用法

常见按键修饰符有哪些

.enter => enter键

.tab => tab键

.delete (捕获“删除”和“退格”按键) => 删除键

.esc => 取消键

.space => 空格键

.up => 上

.down => 下

.left => 左

.right => 右

自定义按键修饰符

1. 通过Vue.config.keyCodes自定义按键修饰符别名
2. Vue.config.keyCodes.f5 = 116;
3. 注意 116 对应键盘的keycode 值
4. f5可以自定义任何名字