vue模版语法及计算属性和侦听器

模版语法:

1、插值表达式

2、v-text

3、v-html

4、v-on

5、v-bind

注:指令后面都是j s表达式,表达式后可跟字符串

例:v-text=“name + 'lee' ";

计算属性

1、计算属性(computed):顾名思义就是通过计算得来的;

 特点:

扫描二维码关注公众号,回复: 11033686 查看本文章

内置缓存、 缓存机制

当计算属性的两个变量未发生改变就不会重新计算,会一直用上次计算的结果;(提高性能)

简而言之依赖属性未发生改变就不会重新计算,如果依赖发生改变,计算属性会重新计算一次;(并且语法简洁性能高)

2、方法(methods)形式也可以实现计算属性,单没缓存机制,性能低

3、帧听器(watch)也有缓存机制,但语法复杂;

计算属性的两个方法:

set:设置值时调用;

get: 获取值时调用;

vue中的样式绑定

1、class对象绑定     :class{}

2、class和数组绑定; :class[]

:style ="styleObj" style对象绑定, style绑定数组;

“?”是如果if的意思;

vue条件渲染:

v-if : 节点移除或重新渲染;(性能低。节点删除或增加)

v-show:是存在的只是样式为display:none;(性能高)

v-if和v-else必须一起使用;

“key"值就相当于id,在页面上是唯一的;

vue中的列表渲染:

v-for:数组循环;

index做key值费性能,带key值可以提高性能;

改变数据引用也可以改变数据;

对象也可以做循环,遍历对象直接加值不可用,但是可以直接改遍对象引用可以;

vue中的set方法:

可在对象中增加数据用set方法;

set是全局方法,也可以是实例方法;

数组中的set方法:

该变数组页面也是也跟着变的方法有三种:

1、直接改数组引用;

2、数组变异方法(pop\push)

3、set方法;

改变对象数据也你那也跟着变的方法有两种:

1、改变对象引用

2、set方法

vue组件:

1、is属性(多用于table)解决模版标签上的bug(解诀h5标签上bug);

2、data属性。在vue实例里面定义 data可以是一个对象,但是在子组件里定义data必须是一个函数;

3、ref属性 vue中如何操作dom,就是通过引用ref;

在vue中由于单向数据流:

父组件可以向子组件传参数,通过属性,但子组件不可以修改父组件拆开的参数;

父组件通过属性向子组件传值;

子组件通过事件触发向父组件传值;

组件参数校验与非props特点:

1、组件参数校验就是子组件对父组件传来的值约束

   约束的内容有:

 type:数据类型;

 required :必传;

default: 默认值

validator: 自定义校验器

2、props特性:

  非props特性: 

    属性会展示在dom 节点上;

    父传子组件不接收,子组件不能使用父传过来的数据;

props特性:

   父组件传子组件接收,然后在组件里使用父组件传来的数据;

属性不易展示在dom标签上;

组件绑定原生事件:

只需在绑定事件后加 .native就可以了

非父子组件传值:

1、vuex框架来解决;

2、bus/总线/发布订阅模式/观察者模式;

vue中的使用插槽(slot)

子组件从外部插入内容;

作用域插槽必用用template开头结尾;

动态组件与v-once指令;

v-once指令可以提高静态资源的性能,也会把资源放到内存中;

发布了54 篇原创文章 · 获赞 4 · 访问量 6943

猜你喜欢

转载自blog.csdn.net/Geezer_007/article/details/105672959