关于vue你需要知道的一些知识点

最新推荐文章于 2022-02-28 20:00:20 发布

97pra

最新推荐文章于 2022-02-28 20:00:20 发布

阅读量326

点赞数 1

分类专栏： Vue.js JavaScript相关

本文链接：https://blog.csdn.net/zxc123789tm/article/details/106759451

版权

JavaScript相关同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

Vue.js

3 篇文章 0 订阅

订阅专栏

本文是在阅读梁灏老师的《vue.js实战》过程中，随手记录的一些知识点和内容

这次发出来，

希望能够对看到文章的你，有所帮助

vue版本：2.x。因为是几年前的书了，所以可能会缺少一些在著书后增加的新特性

1. vue SSR是什么？

vue SSR是 vue服务端渲染的缩写，是为了解决因前后端分离，页面在加载时内容无法被搜索引擎抓取，不利于SEO的问题而出现的方案。

vue SSR方案选择如下：

1. vue.js 通用应用框架----NUXT

使用NUXT可能会遇到的问题：

① 即一套代码遇到两个执行环境=> 在vue的生命周期钩子函数中，beforeCreate 和 created 会在服务器端渲染(即 SSR 过程中被调用，即是说，在这两个钩子函数中的代码以及除了vue生命周期钩子函数的全局代码，都可能会在服务端和客户端两套环境下执行)。

问题的可能表现场景，如果在这些可能在两套环境下都被执行的代码中加入具有副作用的代码，或者方问特定平台的代码，API，将会出现各种问题。比如服务端没有window，document对象，如果有对这些对象的引用和操作，将在服务端引起报错，执行过程将会中断。

初步总结：最容易犯的错误就是不判断环境就使用document，window等对象。

解决办法：① 在beforeCreate，created生命周期以及全局的执行环境中调用特定的api之前，需要判断执行环境。

② 使用adapter模式，写一套adapter兼容不同环境的api。

2. 服务端数据的预获取

官方方案中使用vuex在服务端预获取数据，在服务端添加vue钩子函数，获取数据后，将数据保存在vuex的 store结构中，同时渲染页面。

在数据预获取阶段注册的钩子函数中，最好只进行，数据的获取和保存，不进行其他任何涉及this的操作，因为此时的this是指向服务端的this，是所有用户共享的this。

vue 在vue SSR 方案下，应使用惰性注册方案，如果不使用惰性注册方案，而是在一开始，vuex初始化实例的时候就把所有的模块统一注册，将会出现多个页面公用许多模块的问题。

总结一下就是，在服务端预获取数据的钩子函数中，不要进行额外的操作，任何对于数据的额外操作都要在vuex的体系下进行。

2. 这块部分是一些零碎的记忆内容

vue实例创建过程中，必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂在vue实例，可以是html element, 也可以是css选择器。
vue的实例属性和方法都以 $ 符开头
v-model 的用法示例：

<input v-model='name'  />

data: {
    name: '张三',
}

通过v-model将input的value值和data.name关联，任意修改其中之一，都会对另外一方做出相同的改变

所有生命周期钩子的this都指向调用它的vue实例
vue中插入变量值使用的是Mustache语法即 {{}} , 双大括号
v-html 可以输出html内容：

<div id='app'> 
   <span  v-html='link'> </span>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           link: '<a href="#">这是一个链接</a>',
        }
    })
</script>

// 使用v-html 会使得<span>内多出一个可点击的a标签

// 注意： 
    如果将用户产生的内容用v-html输出，可能导致xss攻击，最好在服务端对用户提交的内容做全面校验，一般可将尖括号"<>"转义

如果想显示{{}}标签，而不是根据mustache语法进行内容替换，使用v-pre指令即可跳过这个元素和它的子元素编译过程，如： <span v-pre> {{这里的内容不会被编译}} </span>.
vue的 {{}}中，只支持单个表达式，不支持语句和流控制，且在{{}}中不能使用用户自定义的全局变量，只能使用vue白名单内的全局变量，例如Math和Date。 {{ var book = 'wtf'; }} 错误。 {{if (ok) return msg}} 错误（不能使用流控制，条件判断要改写成三元运算）。
指令--- 即写在dom标签内以v-开头的各种功能命令，指令的主要职责就是当其表达式的值改变时，相应地将其对应的某些行为应用到dom上。 v-on绑定的对象，除了方法名，也可以是一个内联语句。
计算属性computed中的方法名和data中的变量名不要相同，因为在dom值替换和一些同类场景中，调用方法时完全一致的。
所有的计算属性都以函数形式写在vue实例内的computed选项内，最终返回计算后的结果。
在methods里写同名方法，同样可以实现计算效果，那methods和computed有什么不同吗？原因就是计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会重新取值，而methods中的方法，只要数据变化，就会被重新调用一次。
总结一下，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存，即使用computed或者methods取决于被返回的数据是否经常需要更新，若需要，就是methods，不需要就是 computed。

语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，多为简化方法。

如：

v-bind ==> : // v-bind:class='nice' => :class='nice'

v-on ==> @: // v-on:click='abc' => @:click='abc'

语法糖可以简化代码的书写，提高代码可读性。

能用语法糖，就一定要用语法糖（其实也不一定，但是这句话大部分情况都是没问题的）

过滤器

vue.js支持在{{}}插值的尾部添加一个管道符“|”，对数据进行过滤。

一般格式：{{ data | filter }}

经常用于格式化文本，比如字母全部大写，货币每三位使用逗号分隔等。

filter里的过滤规则是自定义的，通过给vue实例添加属性filters来设置，大致格式如下所示
<div id='app'> {{ vabs | allVac2SmallTamp }} </div>

var app = new Vue({
           el: '#app',
           data: {
              vabs: 'AcBdddEFLSc',
           },
           filters: {
              allVac2SmallTamp() {xxxxxxxxx},
           }
    })
提示：

过滤器可以串联使用： {{ data | filterA | filterB }} // 具体什么效果，怎么个串联过程，需要自行摸索
过滤器也可以接受参数： {{ data | filter('args1', 'args2') }} // 这里的参数args1和args2将分别传给过滤器的第二和第三个参数，因为第一个是data数据本身

动态绑定class的几种方式

① 对象语法：

code: :class="{'active' : isActive }"

解释：判断条件为A，被依赖值为B，A为true，B的值会被赋给class。

1.2 对象中同样可以传入多属性，动态控制多个class

code: :class = '{"active": isActive, "error": isError}'

1.3 同样可以直接写入计算属性

② 数组语法：

2.1 :class = '[actives, errorCls ]'

data : {

actives: 'aaa',

errorCls: 'bbb'

}

2.2 三元 + 数组语法

:class = "[isActive ? cat : '', errors ]"

data : {

isActive: true,

cat: 'abc',

errors: 'alb'

}

2.3 还可以在数组语法中嵌套对象语法

:class = "[{'active': isActive}, err]"

data : {

isActive: true,

err: 'error'

}

③ 在组件中使用

只适用于单层结构组件， <组件 :class="{'active': isActive }">, 'active' 值会落到组件里元素类名上 (单层 | 外层)

多元素标签结构的话，需要用props传递

内联样式邦栋需要知道的点：

1. 采用驼峰命名，或短横分隔命名。

2. 不用单独写样式名，只要值对应属性名格式无异，会自动转化如下：

:style = "styles"

data: {

styles: {

color: 'red',

fontSize: 14 + 'px'

}

}

最终解析的结果是： style = "color: 'red'; font-size: '14px'; "