vue.js基础学习(2)
vm=new vue({
date:{name:"aa",
user:{“name”:"lsm"}});
获取属性值
1:vm.name
2:vm.$data.name
3:获取vue关联的实例 vm.$el
vm.$el.style.color="red"
4:获取自定义属性
vm.$options.name
5:获取所有添加了ref属性的元素
vm.$refs <h2 ref="hello"></h2> vm.$el.hello.style.color="red"
6:$set $delete 对象属性的添加和删除
method:{
add(){
this.$set(this.user,"age",22)
}
del(){
this.$delete(this.user,"age")
}
}
7:全局组件
创建方法1:var Component =vue.extend({
template:'<h1>hello</h1>'
})
vue.component(“hello”,Component)
创建方法2: vue.component(“wrold”{
template:'<h1>wrold</h1>'
})
引用:<hello></hello>
8:局部组件
1.自动挂载
components:{
"my-adress":{
template:'<h1>wrold</h1>'},
"my-name":{
template:'<h1>{{name}}</h1>',
data(){
return {"name":"lsm"}}}
}
2.手动挂载
"my-name":{
template:'#myname',
data(){
return {"name":"lsm"}}}
}
<template id="myname"><template>
9.$nextTick 用于延时,待页面渲染以后再获取dom元素的值
10:组件之间的传值
1):父传子 父使用指定变量传参(如a="2"b="6"),子组件使用对应的参数(props:["a","b"])接收,参数名对应,如果需要限制类型,
写法为
props:{
a:string,
b:string,
name:{
type:string,
required:false
},
age:
{type:number, 数据类型
default:10, 默认值
validator:function(){return value<0} 参数校验
}
2):子传父 $emit发射
this.$emit("name",parm1,parm2) 写在子组件中
<my-child message1="dddd" message2="ffff"@name=“getSubData“></my-child>
也可以在生命周期mounted中使用vm.$on("name",name=>{this.name=name}) $on用于监听指定事件
触发getSubData为父组件的方法用于获取广播过来的参数
3):非父子关系组件之间使用$emit发射的方式