Vue的认识与介绍

最新推荐文章于 2023-08-31 07:47:52 发布

fcc627

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/fcc627/article/details/126085549

版权

今天来总结一些我对vue的认识与介绍，可能有时候我们可以不用对一个框架去有很深的认识，就可以去完成我们的工作，但是对于一个框架有基础的理解对我们开发和学习是很有帮助的，让我们很清楚的知道这个框架是做什么的，我们该用来做些什么。

一、渐进式框架Vue

什么是渐进式框架
vue官网说：Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
vue的渐进式表现为：

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

二、Vue中两个核心点

1、响应式数据绑定

当数据发生变化是，vue自动更新视图
Vue2.0的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（这也是为什么vue不支持ie8 以及更早的ie浏览器的原因）
Vue3.0原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知

2、组合的视图组件

ui页面映射为组件书
划分组件可维护、可重用、可测试

三、虚拟DOM

js的运行速度已经很快了，然而大量的DOM 操作就会变得很慢，但是前端本身就是要通过JS处理DOM 来更新视图数据的。这样在更新数据后会重新渲染页面，这样就造成在没有改变数据的地方也重新渲染了DOM节点。这样性能方面就会很受影响。
利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。
当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。vue就是利用了这一点。（vue 渲染组件的步骤图：）

在这里插入图片描述

四、MVVM模式

Vue提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。
具体了解请参考我的上一篇博客：Vue的架构模式

五、Vue的内置指令

1. v-text指令：

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{ {xx}}则不会

在这里插入图片描述

2. v-html指令：

1.作用：向指定节点中渲染包含html结构的内容
在这里插入图片描述

2.与插值语法的区别：

v-html会替换掉节点中所有的内容，{ {xx}}则不会
v-html可以识别html结构

3.严重注意：v-html有安全性问题！！！

在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
一定要在可信的内容上使用v-html，永不要在用户提交的内容上！

3. v-show

v-show指令根据表达式的真假，显示或隐藏HTML元素。
使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"

<!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>v-show指令</title>
</head>
<body>
    <div id="app">
        <h1 v-show="yes">Yes!</h1>
        <h1 v-show="no">NO!</h1>
        <h1 v-show="age >= 25">Age: {
  { age }}</h1>
        <h1 v-show="name.indexOf('Smith') >= 0">Name: {
  { name }}</h1>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
     
            data() {
     
                return {
     
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'Will Smith'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

渲染结果如下：
在这里插入图片描述

4. v-if

v-if指令根据表达式值得真假来生成或删除一个元素。

<!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>v-if指令</title>
</head>
<body>
    <div id="app">
        <h1 v-if="yes">Yes!</h1>
        <h1 v-if="no">NO!</h1>
        <h1 v-if="age >= 25">Age: {
  { age }}</h1>
        <h1 v-if="name.indexOf('Smith') >= 0">Name: {
  { name }}</h1>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
     
            data() {
     
                return {
     
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'Will Smith'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

在这里插入图片描述
如果v-if需要控制多个元素的创建与删除，可以用<template>元素包裹这些元素，然后在<template>元素上使用v-if指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

fcc627

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue的认识与介绍

当数据发生变化是，vue自动更新视图Vue2.0的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（这也是为什么vue不支持ie8 以及更早的ie浏览器的原因）Vue3.0原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知Vue提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。具体了解请参考我的上一篇博
复制链接

扫一扫