element组件知识点总结

element组件知识点总结1：单选框与多选框的change事件，html代码
<div id="app">
<div class="demo box">
<h6>例⼦13</h6>
<template>
<el-checkbox v-model="checked" @change="ceshi2" label="备选项">备选项</el-checkbox>
</template>
</div>
<div class="demo box">
<h6>例⼦14</h6>
<template>
<el-radio-group v-model="radio2" @change="ceshi">
<el-radio :label="1">备选项</el-radio>
<el-radio :label="2">备选项</el-radio>
</el-radio-group>
</template>
</div>
</div>
对应的js代码
methods:{
ceshi(value){
console.log(value);
},
ceshi2(event){
console.log(event.target.checked);
}
}
2：vue监听键盘事件
<div class="demo">
<input type="text" name="" v-on:keyup='submit'>
</div>
js
methods:{
submit:function(event){
alert(event.target.value);
}
},
3：组件
<div id="app">
<div class="demo">
<h6>例⼦13</h6>
<div>
<input v-model="parentMsg">
<br>
<!--child作为⼀个组件被js中的template替换-->
<child v-bind:my-message="parentMsg"></child>
<!--⽗组件通过props: ['myMessage']把⽗组件的值传递给⼦组件-->
<!--，⽽js中template⽤来⽣成⼦组件-->
</div>
<div>{{parentMsg}}</div>
</div>
</div>
对应的js
var vueInit = function() {
ponent('child',{
props: ['myMessage'],
template: '<span style="color:red">{{myMessage}}你好</span>',
/*data:function(){
return {
parentMsg: 'Message from parent'
}
}*/
});
new Vue({
el: '#app',
data:{
parentMsg: 'Message from parent'
}
})
}
注册组件component时，data是⽤来渲染组件中的参数，⽤来渲染myMessage；⽽组件构造器中的data是⽤来渲染页⾯⽗节点参数，⽤来渲染页⾯中的{{parentMsg}}；
4：⽗⼦组件关系
ponent('child', {
// 声明 props,告诉后⾯的template中的message是prop⽗⼦传递的参数
props: ['message'],
// message是来⾃于⽗组件
template: '<span>{{ message }}</span>'
})
对应的html
<child message="hello!"></child>
标签<child>作为⽗组件，定义message（已经在js中定义为prop，⽤来传递参数）；。