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

本文是在阅读梁灏老师的《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'; "

使用 :style时,vue.js会自动给特殊的css属性名增加前缀,比如transform

 

未完待续 --- the  loading .

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: 作为一个AI语言模型,我很高兴能够回答您的问题。关于入门Vue需要了解的知识点,以下是一些基本的知识点: 1. HTML、CSS和JavaScript基础知识 2. Vue.js框架的基本概念和特点 3. Vue组件的概念和使用 4. Vue指令的概念和使用 5. Vue模板语法和表达式 6. Vue路由和路由参数的使用 7. Vue状态管理的基础知识和使用 8. Vue生命周期钩子函数的使用 9. Vue开发调试工具的使用 以上是入门Vue需要掌握的基本知识点。当然,还有很多其他的知识点需要不断学习和掌握,祝您在学习Vue的过程中取得成功! ### 回答2: 入门Vue需要知道以下知识点: 1. HTML和CSS基础:Vue是一个用于构建用户界面的JavaScript框架,了解HTML和CSS将有助于理解Vue的基本概念和使用方式。 2. JavaScript基础:Vue是基于JavaScript的框架,对JavaScript的基本语法和概念要有一定的了解,包括变量、函数、循环、条件判断等。 3. Vue的基本概念:了解Vue的核心概念,如组件、指令、生命周期、数据绑定等。掌握Vue的基本语法和使用方式,如Vue实例、模板语法、计算属性等。 4. Vue的组件化开发:学习组件化开发的思想和方式,将应用拆分成多个组件,每个组件负责一部分功能,通过组件之间的通信来构建整个应用。 5. Vue的路由管理:学习使用Vue Router来管理页面的路由,实现单页应用(SPA)的效果,了解路由的基本概念和使用方式。 6. Vue的状态管理:了解Vuex来管理应用的状态,实现数据的共享和响应式更新,学习使用store、state、mutations、getters等概念。 7. Vue的异步请求:学习使用Vue提供的插件或库来进行异步请求,如axios、vue-resource等,掌握发送请求、处理响应的基本方式。 8. Vue的打包和部署:了解如何使用构建工具(如webpack)来打包Vue应用,将代码部署到生产环境,学习如何处理资源文件、优化代码等。 9. Vue的周边生态:了解Vue的周边生态系统,掌握常用的插件和库,如Vue Router、Vuex、Element UI等,学习如何使用它们来扩展Vue的功能。 10. 实际项目开发经验:通过练习和实际项目开发,不断积累经验和问题解决能力,深入理解Vue使用和应用场景,提升自己的技能水平。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

97pra

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值