江苏龙网

  1. 主页 > 生活百科 > >

超详细 web前端开发：vue内部指令( 二 )

vue


漂亮的列表class 是可变的
.red { background-color:red;}.big { font-size:50px;}<div :class="{'red':true,'big':true}">又大又红</div>效果是字体大背景色是红色的div
关于对象内的thisvue已经把以前this是window或者事件对象的问题搞定了
methods和data本身是在同一个对象中的,所以在该对象中可以通过this.随意取
this.xxx 取data中的值, this.xxxMethod调methods中的函数
渲染组件-父使用子组件1: 创建子组件(对象)
var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }
2: 在父组件中声明,根属性components:{ 组件名:组件对象 }
3: 在父组件要用的地方使用 <组件名></组件名>
在不同框架中,有的不支持大写字母，用的时候
组件名 MyHeader
使用 my-header
总结: 有父，生子，声明，使用
父子组件传值(父传子)1:父用子的时候通过属性传递
2:子要声明props:[‘属性名’] 来接收
3:收到就是自己的了，随便你用
在template中 直接用
在js中 this.属性名 用
总结:父传,子声明,就是子的了
小补充: 常量传递直接用，变量传递加冒号
总结父传子父用子 先有子,声明子,使用子
父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)
注册全局组件应用场景: 多出使用的公共性功能组件，就可以注册成全局组件,减少冗余代码
全局API Vue.component('组件名',组件对象);
附加功能:过滤器&监视改动filter
将数据进行添油加醋的操作
过滤器分为两种
1:组件内的过滤器(组件内有效)
2:全局过滤器(所有组件共享)
先注册,后使用
组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据
使用方式是 {{ 原有数据 | 过滤器名 }}
需求
页面input框输入字符串, 另一边显示其反转的内容
过滤器fn:
声明function(data,argv1,argv2...){}
使用{{ 数据 | 过滤器名(参数1,参数2) }}
watch 监视单个
cumputed 监视多个
key使用子组件循环输出一堆数据
不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出 。
建议v-for就写，提升性能，避免vue运算,key就是记录元素与dom间的位置关系
<son v-for="(item,index) in persons" :key="index" ></son>slotslot就是子组件里给DOM留下的坑
<子组件>DOM</子组件>
slot动态的DOM、props是动态的数据
组件生命周期需要频繁的创建和销毁组件
比如页面中部分内容显示与隐藏，但是用的是v-if
组件缓存
内置组件中
被其包裹的组件，在v-if=false的时候，不会销毁，而是停用
v-if=“true” 不会创建,而是激活
避免频繁创建组件对象的性能损耗
成对比较
created 和 beforeCreate
A 可以操作数据 B 数据没有初始化
mounted 和 beforeMount
A 可以操作DOM B 还未生成DOM
updated 和 beforeUpdate
A 可以获取最终数据 B 可以二次修改
频繁销毁创建的组件使用内置组件包裹
activated(){//激活的 keep-alive v-if="true"console.log('activated')},deactivated(){//停用的 keep-alive v-if="false"console.log('deactivated')},beforeDestroy(){ //销毁前 v-if="false"console.log('beforeDestroy')},destroyed(){//销毁后 v-if="false"console.log('destroyed')},获取DOM元素救命稻草, document.querySelector
1: 在template中标识元素 ref=“xxxx”
2: 在要获取的时候, this.$refs.xxxx 获取元素
创建组件,装载DOM,用户点击按钮
ref在DOM上获取的是原生DOM对象
ref在组件上获取的是组件对象
$el 是拿其DOM
这个对象就相当于我们平时玩的this,也可以直接调用函数
最后喜欢的同学点个关注、收藏、转发哦！

【超详细 web前端开发：vue内部指令】


推荐阅读


上一篇：山东微友武夷山慢游之旅在茶博园启动

下一篇：古丈县,120户茶农签订良种茶苗定购合同