66 lines
2.1 KiB
Plaintext
66 lines
2.1 KiB
Plaintext
VUE: 简写 V
|
|
24天 29分钟
|
|
+mv vm是双向绑定
|
|
vm = vue
|
|
双花括号只适用写在标签中间
|
|
V-if V-else 只能同级出现 做判断用
|
|
V-if 多分支的复杂情况进行判断,并把不符合条件的html删除
|
|
V-show 适合简单情况,并把不符合条件的HTML隐藏
|
|
V-on 事件类型=“事件处理函数” 简写用@ ,例如： @click=“text
|
|
|
|
常用 : V-for , V-on , V-bind , v-model 次常用： V-if ,v-else , v-else-if 次次常用 V-show
|
|
|
|
生命周期：
|
|
created 不操作页面在这里发请求
|
|
mounted 操作页面在这里发请求
|
|
常用
|
|
updated
|
|
destroyed
|
|
前面都要加 before
|
|
每个生命周期都可以有自己的 data
|
|
|
|
|
|
html上用 :ref 在js上用 refS 前面必须加$ 例: (this.$refS)
|
|
问： 为什么VUE组件内部data 要写function而不写对象, ::::::要形成独立个体,内部组件重复使用互不干扰。
|
|
|
|
|
|
|
|
组件 component
|
|
全局组件定义: Vue.component ( ' 起名: 例如:lb_header,不能起原生html的名字,例: div body', {
|
|
template: ` 存放html代码 `
|
|
} );
|
|
使用： 在html上 <lb-header> </lb-header> 自动运行html代码
|
|
Vue.component data 里不可以写对象，必须写方法， 把new vue里的data放在这里
|
|
如果data只用对象, 第一次使用已经把值修改了，会影响第二次调用 用方法第二次会重新定义，可以保证组件重复使用内部不会相互干扰
|
|
例:
|
|
data () {
|
|
调用function {
|
|
index: 0
|
|
}
|
|
}
|
|
传
|
|
父组件 ——> 子组件
|
|
基本数据类型用 props
|
|
传html 用 props 插槽
|
|
|
|
props: 可以在Vue.component里 可以是数组或对象
|
|
paops: [' 随便取名定义变量， 如text'], 相当于在data里定义了一个变量 text <lb-header V-bind text="值 变量"> </lb-header> 把变量绑定到标签的属性上要加V-bind
|
|
用得少
|
|
|
|
paops: {
|
|
text名字: {
|
|
default: '默认参数',
|
|
//默认值
|
|
type: 例: string,
|
|
//类型
|
|
required: true
|
|
//必填
|
|
}
|
|
},
|
|
listArr: {
|
|
default: () => { return []}, 用方法返回空数组 只有一行代码简写 () => []
|
|
type: '例: string'
|
|
required: true
|
|
|
|
}
|
|
}, |