0829-vue

爱健身的程序员sa

已于 2022-08-31 08:05:17 修改

阅读量107

点赞数

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

于 2022-08-30 21:36:08 首次发布

本文链接：https://blog.csdn.net/sassssiii/article/details/126611176

版权

vue基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue介绍

Vue.js是一套构建用户界面的渐进式框架，自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
渐进式

渐进式：一步一步，不是说你必须一次把所有的东西都用上。
自底向上设计：是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能，实际上是一种自底向上构造程序的过程。

声明式渲染和组件系统是Vue的核心库所包含内容，而路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

声明式渲染

Vue.js 是一个允许模板语法来声明式的将数据渲染进 DOM 的系统，这个就不再这里一一举例了在下面的vue基础使用处会有例子。

组件化

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树
这里通过组件生成了一棵DOM树

mvvm模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVP 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

vue使用MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染
- M（model）：普通的javascript数据对象
- V（view）：前端展示页面
- VM（ViewModel）：用于双向绑定数据与页面，简单来说就是vue的实例

mvvm模式优点：

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

Vue的简单基础使用

引入vue.js文件
创建一个根容器
在script标签中new出vue实例
使用可以在标签中使用模板语法

<!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="./vue.js"></script>
</head>

<body>
    <!-- 第二步创建 根容器app -->
    <div id="app">
        <div>{{title}}</div>
    </div>
    <script>
        // 实例化vue
        var vm = new Vue({
            el: "#app",
            data: {
                title: "什么"
            }
        })
    </script>
</body>

</html>

el:元素挂载的地方，值可以是css选择器或者DOM元素
data:模型数据，值是一个对象

为什么要使用虚拟DOM

用传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处：页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制，从而提高性能。

vue中实现数据绑定的原理

这里的内容缺失，需要再去查看，这个自己在实践一下

模板语法

模板语法插值表达式 mustcache模板名称[小胡子语法]
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量。会将绑定的数据实时的显示出来。

以下都是模板语法中支持的内容

<div>{{data中绑定的变量}}</div>

在模板语法中进行计算
<div>{{1+1}}</div>

调用函数或方法
<div>{{sum()}}</div>

调用js内置方法 substr是取0到3的字符
<div>{{'电饭煲是'.substr(0,3)}}</div>

三目运算符
<div>{{age<20 ? '未成年':'成年'}}</div>

注意

表达式中不能定义变量或函数，也不可以写if条件或循环
虽然里面可以进行计算，不建议在里面写运算，可以写在computed里面
可以调用js内置方法，不太推荐
函数可以写在data中，但是不太建议，因为data中的数据都会被劫持，但是函数是没有必要被劫持的
{{}}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10; 分支语句循环语句

指令

指令(Directives)就是vue给html标签提供的一些自定义属性，这样属性都是带有 v- 前缀的特殊属性。指令特性的值预期是单个JS表达式(v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。vue中的指令可以操作真实的dom的

v-html和v-text，以及v-cloak

v-html

解析字符串中的html标签，解析输出,一般用于在后台添加的富文本内容，在前台显示所用,可以解决屏幕中的语法闪现

简单点说就是v-html可以将html标签语法界面展示出来，有一点不好可能会遭受xxs攻击

<body>
     <div id="app">
        <div v-html="msg"></div>
     </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

v-text

转义输出，为了解决早期没有使用工程化时，直接script引入vue，进行使用时有花括号闪现问题
一般用不到，在单文件vue中，不会有这样的闪现问题，所以用不到

<body>
     <div id="app">
        <div v-text="msg"></div>
     </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

v-cloak

他是vue中提供专门用于解决闪现问题的指令
v-html或v-text它们能够解决闪现，但是有的时候，一些项目在前期没有用它，这时候如果全部去修改，工程量有点大，可以用此指令

<div v-cloak>{{title}}</div>

v-pre

此指令一个性能优化的指令，使用它，可以提升性能。
跳过这个元素和它的子元素的编译过程，跳过大量没有指令的节点会加快编译。

<div v-pre>这里的代码不会，进行编译，直接运行</div>

v-once

对于数据，只绑定一次，性能优化，只渲染元素和组件一次，之后元素和组件将失去响应式功能

如果data中的title值发生改变，此处的值不会在发生改变
<div v-once> v-once --- {{title}}</div>

v-if和v-show，以及v-else 还有 v-else-if

先来说一下两个人的作用是相同的，都是可以对元素进行隐藏和显示，不同点就是v-if进行隐藏的方法，和v-show的隐藏方法不太相同，v-if是将元素进行删除也就是remove()，v-show是通过css样式给元素添加一个display：none进行隐藏，v-else和v-else-if的使用就和普通的条件判断语句一样使用

以下代码段都是根据newVue实例中的data里面的数据进行动态显示的

  v-if:如果条件不成立，则不创建或删除已创建元素，初始化它的性能更高一些，如果频繁切换则性能低一些,权限显示相关，建议用v-if
  v-show:如果条件不成立，通过样式来隐藏，初始化它的性能低一些，如果频繁切换则性能更好一些
  <div v-if="age<12">v-if 未成年</div>
  <div v-show="age<12">v-show 未成年</div>

多条件下

<div v-if="age<10">儿童</div>
    <div v-else-if="age<20">少年</div>
    <div v-else>老年</div>

爱健身的程序员sa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录