Vue进阶基础一

最新推荐文章于 2023-12-06 10:56:26 发布

LoveSongi

最新推荐文章于 2023-12-06 10:56:26 发布

阅读量518

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lovesongi/article/details/109865806

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue.js 计算属性

计算属性：当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。

mvvm和mvc区别？

主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM，操作使页面渲染性能降低，加载速度变慢，影响用户体验。
该图片引用于https://blog.youkuaiyun.com/czh500/article/details/107829893

该图片引用于https://blog.youkuaiyun.com/czh500/article/details/107829893

Vue和其它框架（jquery）的区别是什么？

区别：vue是数据驱动，通过数据来显示视图层而不是节点操作。

vue的优点是什么？

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

vue和vue-cli的区别与联系

概念：

vue：是一套框架，用于构建用户界面的渐进式框架。
vue-cli：而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。
区别：

区别：

vue是一整套框架，而vue-cli只是它其中的一个脚手架。

联系：

vue-cli 是vue的命令行工具 vue-cli是一个完整的vue项目核心构成。

export default 和 export 区别

1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要
4.
(1) 输出单个值，使用export default
(2) 输出多个值，使用export
(3) export default与普通的export不要同时使用

vue.cli中怎样使用自定义的组件？

第一步：在components目录新建你的组件文件（HelloWorld.vue），script一定要export default {}
第二步：在需要用的页面（组件）中导入：import HelloWorld from ‘./components/HelloWorld.vue’
第三步：注入到vue的子组件的components属性上面,components:{HelloWorld}
第四步：在template视图view中使用()

    <HelloWorld></HelloWorld>

v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

按需加载/懒加载是什么？

按需加载

按需解析HTML，就是页面一开始不解析HTML，根据需要来解析HTML。解析HTML都是需要一定时间，特别是HTML中包含有img标签、引用了背景图片时，如果一开始就解析，那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等，这些一开始是不需要解析，可以按需解析。

实现按需解析，首先用<script type=”text/x-template”>html</sccript> 这个标签来对忽略对HTML的解析。然后根据触发的动作，把script里面的HTML获取出来，填充到对应的节点中。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按需解析HTML</title>
</head>
<body>
<script type="text/x-template" id="suc_subscription">
    <!--假设这里的样式box-dytz 引用了一张背景图--->
    <div>
    <!--这里暂且用这张图片作为测试，实际中，大家可以替换为任何图片-->
    <img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" />
    </div>
</script>
<div id="success_dilog"></div>
<input type="button" value="点我展示HTML"  onclick="showHTML()"  />
<script>
    function showHTML(){
        document.getElementById('success_dilog').innerHTML =  document.getElementById('suc_subscription').innerHTML;
    }
</script>
</body>
</html>
<!-- 上述代码引用于：https://www.cnblogs.com/jiangtuzi/p/3795156.html-->

点击按钮前
在页面加载结束后，看到并没有图片加载的请求。
在这里插入图片描述
点击按钮后
点击按钮之后执行了加载图片的操作，此时才在网络中看到图片的请求

这样减少了加载页面最开始的请求，减轻服务器的负载。

懒加载

按需加载图片，就是让图片默认开始不加载，而且在接近可视区域范围时，再进行加载。

先来看下懒惰加载的实现原理。它的触发动作是：当滚动条拉动到某个位置时，即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤：

1）生成<img data-src=”url”>标签时，用data-src来保存图片地址（相当于加载转圈的图片）

2）记录的图片data-src都保存到数组里（保存真正的图片）；

3）对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

4）在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y 小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；
引用于：https://www.cnblogs.com/jiangtuzi/p/3795156.html

vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

//import About from "./views/About";
//懒加载(访问时才加载)
const About = () => import("./views/About")

或者

const About = r => require.ensure( [], () => r (require("./views/About")))

指令V-El的作用是什么？

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,