模版语法:
1、插值表达式
2、v-text
3、v-html
4、v-on
5、v-bind
注:指令后面都是j s表达式,表达式后可跟字符串
例:v-text=“name + 'lee' ";
计算属性
1、计算属性(computed):顾名思义就是通过计算得来的;
特点:
内置缓存、 缓存机制
当计算属性的两个变量未发生改变就不会重新计算,会一直用上次计算的结果;(提高性能)
简而言之依赖属性未发生改变就不会重新计算,如果依赖发生改变,计算属性会重新计算一次;(并且语法简洁性能高)
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指令可以提高静态资源的性能,也会把资源放到内存中;