Vue基础知识总结

Bboy_guan

已于 2022-03-03 14:31:00 修改

阅读量491

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-03-02 00:49:18 首次发布

本文链接：https://blog.csdn.net/weixin_43392185/article/details/123218830

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、什么是Vue

VUE是2014年2月正式发布的
- 2015年10月27日发布了正式版本1.00
- 2016年4月27日，发布2.0版本
VUE是渐进式的JavaScript框架，渐进式就是由浅入深
- 从声明式渲染
  - 到组件系统
    - 到客户端路由
      - 到集中式状态管理
        到项目构建
Vue基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真是的操作DOM，所以叫做虚拟DOM
官网：介绍 — Vue.js

官方：

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

Vue可以自底向上逐层应用

Vue的核心课只关注视图层。

Vue与现代化的工具类以及各种支持类结合使用时候，Vue也完全能够为复杂的单页应用提供驱动

2、Vue的HelloWorld

首先可以在浏览器地址把vue.js文件下载下来

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.jszz

粘贴到浏览器，然后ctrl+s保存在本地，在页面中引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js依赖-->
    <script src="./js//vue.js"></script>
</head>
<body>

<!--  Vue.js核心是一个允许采用简介的模板语法来声明式地将数据渲染进DOM的系统 -->
<div id="app">
    {{message}} <!-- {{param}} 模板语法/插值表达式  将data属性对象写的数据填充到HTML标签中，插值表达式支持基本你的计算操作-->
</div>


<script>
    // 实例化一个Vue对象
    const app = new Vue({
        el: '#app', // el绑定容器，元素挂载的位置（值可以是CSS选择器或者是DOM元素）
        data: { // data 模型数据（值是一个对象）
            message: 'Hello World'
        }
    });
</script>
    
</body>
</html>

编译原理：Vue语法 ->Vue框架 -> 原生js代码

3、模板语法

Vue.js使用了基于HTML的模板语法
允许开发者声明式地将DOM绑定至底层Vue实例的数据
底层实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少

Mustach语法{{}} 双大括号

绑定文本：{{data}}

4、Vue的指令

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

官方：

这个指令保持在元素上知道关联实例结束编译，和CSS规则如[v-cloak]{display: none}一起用时候，这个指令可以应参为编译的Mustache标签直到实例准备完毕

v-cloak指令

在使用Mustach语法过程的时候，如果我们网速较慢的情况下，通常我们响应页面的数据会显示{{msg}}，然后在将数据响应出来，这就是插值表达式存在的闪动问题
v-cloak可以很好的解决这个问题，只需要在指定的标签声明v-cloak属性，就可以解决闪动问题

<div id="app" >
    <h2 v-cloak>{{message}}</h2>
</div>

v-once指令

当使用v-once的时候，显示完内容后，数据就不会响应式
建议对低开销的静态组件使用

源代码，当我们在控制台修改app对象的message属性的时候，值不会改变，

我们回车的时候，页面的数据不会响应变化

数据绑定指令：v-text

填充纯文本
在标签属性上使用
相比Mustach语法更加简介
语法：<标签 v-text="str|data的属性">

数据绑定指令：v-html

存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用
填充文本，可以显示html标签

官方：

在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。只可信内容上使用v-html,用不在用户提交的内容上使用该指令

数据绑定指令：v-pre

显示原始信息，跳过编译过程

官方：

跳过这个元素和它的子元素的编译过程。

可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

4、数据响应式 v-model指令的使用

数据的响应式是数据的变化会导致页面内容的变化，页面内容的变化也会导致数据的变化
数据绑定：将数据填充到标签中
用法：<标签 v-model='param' />

一开始数据是这样的

当我们在输入框修改内容的时候，会发现下面输出的数据会随着改变

MVVM设计思想

M：model 模型
v：view 视图
vm ：view model 视图模型
model和view不能直接直接交互，两者必须通过ViewModel视图模型处理
活动情况：当用户输入内容的时候，通过DOM Listeners DOM监听，v-model底层用到了事件
模型到视图使用了数据绑定：Data Bindings

事件绑定指令 v-on

v-on指令用法：
<指令 v-on:事件名称 = "逻辑">
监听当前实例上的自定义事件

也可以调用方法，这时候Vue对象里面传递参数要增加methods属性，里面可以定义方法

事件函数参数的传递

当我们传入了方法后，希望传递参数，获取一些信息，那么我们可以传递参数
普通参数和事件对象传递
<标签 v-on:事件名 = "方法名(参数1，$event)"/>
其中$event为事件对象
默认不写传递的第一个参数就是事件对象$event

事件修饰符的用法

我们在使用事件的时候，会出现事件冒泡，a标签的默认跳转行为等，我们可以使用事件修饰符
语法v-on:事件.修饰符
当我们阻止事件冒泡可以使用.stop修饰符
阻止默认的行为可以使用.prevent修饰符

例如，阻止按钮事件冒泡

当我们点击按钮，事件向上冒泡了

我们不想冒泡，这时候可以使用.stop修饰符

当我们使用了.stop修饰符，就只调用了按钮的方法

当我们想阻止a标签跳转行为，自己处理跳转，可以使用.prevent修饰符

当我们点击按钮的时候，就会调用定义的方法，不会跳转

事件按键修饰符

当我们用户输入完内容的时候，我们需要判断输入的内容是否合法，我们可以使用按键修饰符
语法：v-on:事件.按键修饰符
常用有两个：.enter回车键修饰符，.delete删除键修饰符

delete删除键修饰符也是类似的

常见的修饰符还有

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

自定义按键修饰符

当系统提供的按键修饰符不够用的时候，还可以自定义按键修饰符
可以使用全局对象config.keyCodes自定义按键修饰符
Vue.config.keyCodes.按键名称 = 按键的标识
如果想获得按键标识，可以通过事件对象event.keyCode来获取唯一标识符

开始自定义按键修饰符，我们给按下a的时候，提示HelloWorld

属性绑定指令v-bind

当我们要给指定属性绑定动态的值的时候，我们可以使用v-bind指令来动态绑定值
v-bind的缩写是冒号（:）

当点击按钮的时候，会跳转到百度页面

通过这个我们可以分析v-model底层原理

v-model底层用了两个，一个是属性绑定，一个是事件绑定

属性绑定样式

Bboy_guan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础知识总结

vue笔记
复制链接

扫一扫

专栏目录