Vue.js实战 · 从初识到计算属性

2021年11月24日 阅读数:4
这篇文章主要向大家介绍Vue.js实战 · 从初识到计算属性,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

什么是Vue.js

  • 简单小巧的核心
    Vue.js压缩后很小,只有17KB
  • 渐进式技术栈
    能够一步一步地、阶段性地来使用Vue.js,只使用本身现阶段须要的,没必要一开始就使用它全部的东西

MVVM(Model-View-ViewModel)模式

  • 由MVC模式衍生而来
    javascript

  • 视图层变化时,自动更新到视图模型,反之亦然,二者之间经过双向数据绑定创建联系html

使用Vue.js

  • 传统的前端开发模式
    jQuery+RequireJS/SeaJS+artTemplate/doT+Gulp/Grunt
  • Vue.js的开发模式
    1.引入Vue.js
    自动识别最新的稳定版的Vue.js
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    或者指定某个具体的版本的Vue.js
    <script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
    还能够将代码下载下来,经过本身本地的路径来引用
    2.建立Vue实例

🔴el用于指定页面中的一个DOM元素挂载Vue实例。挂载后,能够经过'$'来访问该元素(注:Vue的实例属性和方法以'$'开头)前端

🔵data用于声明须要双向绑定的数据。能够经过Vue实例自己来访问;除了显示地声明数据之外,还能够指向一个变量vue

生命周期

  • Vue实例建立时会经历一系列初始化过程,这其中会调用相应的生命周期钩子(相似于jQuery中的ready()),利用这些钩子咱们能够选择时机执行咱们的业务逻辑,经常使用的钩子有:
    (1)created 实例建立完后调用
    (2)mounted el挂载到实例上后调用
    (3)beforeDestroy 实例销毁以前调用
    这些钩子与eldata类型,做为选项写入Vue实例内,钩子的this指向调用它的Vue实例

插值、表达式

  • 使用'{{}}'来表达文本插值,会自动将双向绑定的数据实时显示出来

例🔷显示当前时间java


v-html输出HTML,不解析缓存


v-pre显示{{}}标签,不进行替换app


  • 在'{{}}'中,除了使用简单的绑定属性值外,还可使用javascript的表达式;不能使用自定义的全局变量,只能使用Vue白名单内的全局变量

过滤器

  • 经过在'{{}}'插值尾部添加一个管道符('|'),自定义一个过滤的规则,并在Vue实例中设置filters选项来进行过滤
    例🔷对时间进行格式化处理

setInterval()iphone

  • 过滤器能够多个串联,也能够接收参数
    {{message|filterA|filterB}}
    {{message|filterA('arg1','arg2')}}

注:过滤器经常使用于处理简单的文本转换,若是涉及复杂的数据变换,应当使用计算属性mvvm

指令与事件

  • 指令以'v'为前缀,当其表达式的值改变时,相应地将某些行为应用到DOM上
  • v-if

  • v-bind
    动态更新HTML元素上的属性

  • v-on
    用来绑定事件监听器

  • v-on监听原生的DOM事件,如clickdblclickkeyupmousemove
    表达式能够是方法名(方法写在Vue实例的methods属性里),也能够直接使用内联语句(相似内联样式)的形式

  • 能够像访问数据那样来经过实例来调用方法,例如:

语法糖

  • 语法糖是在不影响功能的状况下,添加某种方法以实现相同的效果,方便程序的开发(可简单当作是简写
  • v-bind简写为':'
  • v-on简写为'@'

计算属性

  • 当'{{}}'内的表达式过长或逻辑复杂时,难以维护,这是就须要使用计算属性
  • 计算属性以函数的形式写在Vue实例的computed属性内

例如:函数

使用计算属性改写为下:
  • 计算属性还能够依赖多个Vue实例的数据

  • 每个计算属性都包含一个getter和一个setter,不特殊声明时默认使用getter读取计算属性,手动修改一个计算属性的值时会触发setter函数,执行一些自定义的操做

手动修改fullName时,setter函数会被调用,视图同时会被更新

  • 除了处理文本插值外,计算属性还经常使用于动态地设置元素的样式名称class和内联样式style,使用组件时,也经常使用于动态传递props
  • 计算属性能够依赖于其余的计算属性;并且不只能够依赖当前Vue实例的数据,还能够依赖其余实例的数据

  • 使用计算属性仍是methods
    使用方法(在Vue实例内设置methods选项)有时也能达到与使用计算属性(在实例内设置computed选项)相同的效果,但计算属性是基于它的依赖缓存的,只要依赖的数据发生变化,计算属性就会被更新;而若是依赖不是响应式的,计算属性也不会更新,这时应使用methods,只要从新进行渲染,就可实现更新


下一篇: 复习随记2