目录
一、事件处理器
1.事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符
2.按键修饰符
二、表单赋值与取值
表单赋值与取值综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="ctb">
<h1>表单赋值与取值</h1>
<div>
<label>账号：</label>
<input type="text" v-model="uname" placeholder="请输入账号">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="upwd" placeholder="请输入密码">
</div>
<div>
<label>年龄：</label>
<input type="text" v-model.number="age" placeholder="请输入年龄">
</div>
<div>
<label>性别：</label>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="2">女
</div>
<div>
<label>爱好：</label>
<div style="display: inline;" v-for="h in hobbies">
<input type="checkbox" :value="h.id" v-model="hobby" />{{h.name}}
</div>
</div>
<div>
<label>地区</label>
<select v-model="area">
<option value="">-- 请选择 --</option>
<option v-for="c in city" :value="c.id">{{c.name}}</option>
</select>
</div>
<div>
<label>备注：</label>
<textarea v-model="remark" placeholder="请输入注明"></textarea>
</div>
<div>
<input type="checkbox" v-model="agreed">是否已阅读并同意协议
</div>
<div>
<button @click="submit" :disabled="disabled">提交</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#ctb",
data: {
// 设置表单
uname: null,
upwd: null,
age: 18,
sex: 1,
hobbies: [{
id: '1',
name: 'music'
},
{
id: '2',
name: 'basketball'
},
{
id: '3',
name: 'travel'
}
],
hobby: [],
remark: null,
city: [{
id: "1",
name: "长沙"
},
{
id: "2",
name: "永州"
},
{
id: "3",
name: "道州"
},
{
id: "4",
name: "勾八"
},
{
id: "5",
name: "衡阳"
},
{
id: "6",
name: "大理"
}
],
area: null,
agreed: false,
disabled: true
},
watch: {
agreed: function(val) {
if (val) {
this.disabled = false;
} else {
this.disabled = true;
}
}
},
/* 获取表单内容 */
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age: this.age,
sex: this.sex,
hobby: this.hobby,
city: this.area,
remark: this.remark
}
console.log(data);
}
}
});
</script>
</body>
</html>
三、自定义组件
1.组件介绍
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
2.局部组件
在Vue实例中定义和使用局部组件非常简单。我们可以在Vue实例的components选项中定义组件，并在模板中使用它。
<div id="app">
<my-button>点我</my-button>
</div>
<script>
// 在Vue实例中定义局部组件
new Vue({
el: '#app',
components: {
"my-button": {
template: "<button>自定义组件</button>"
}
}
})
</script>
3.全局组件
全局组件可以在整个应用程序中使用，无需在每个Vue实例中重新定义。我们还可以在Vue实例之外定义全局组件，并在需要的地方使用它。
<script type="text/javascript">
Vue.component('my-button', {
//定义组件中的变量
props:['pp'],
template:'<button v-on:click="btn">{{pp}}打我</button>',
data:function(){
return {
}
}
});
</script>4.组件通信
Vue自定义事件是为组件间通信设计 ，vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。
不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称，建议使用“短横线分隔命名”
组件传参【父传子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值</title>
<!-- 导入工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<my-button m='嘿嘿'>点我</my-button>
<h1>组件通信---父传子</h1>
<my-button m='不要'>点我</my-button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
components:{
'my-button':{
props:['m'],
template:'<button @click="clickMe">{{m}}点击了{{n}}次</button>',
data:function(){
return{
n:1
}
},
methods:{
clickMe(){
this.n++;
}
}
}
},
data(){
return{
msg:"hello meinv"
};
}
});
</script>
</body>
</html>
组件传参【子传父】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信---子传父</title>
<!-- 导入工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h1>组件通信---子传父</h1>
<my-button m='不要' @ctb='getParam'>点我</my-button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
components:{
'my-button':{
props:['m'],
template:'<button @click="clickMe">{{m}}点击了</button>',
methods:{
clickMe(){
let book='我是你的四月天';
let price=90;
this.$emit('ctb',book,price)
}
}
}
},
data(){
return{
msg:"hello meinv"
};
},
methods:{
getParam(a,b){
console.log(a,b);
}
}
});
</script>
</body>
</html>
