Vue基础语法(样式绑定,事件处理,表单,Vue组件) |
您所在的位置：网站首页 › vue中标签怎么绑定事件 › Vue基础语法(样式绑定,事件处理,表单,Vue组件) |
Vue基础语法(样式绑定,事件处理,表单,Vue组件)
|
Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 vue的样式绑定 .a{ /* 颜色 */ color: #52CCBA; } .b{ /* 字体大小 */ font-size:50px; } .c{ /* 字体样式 */ font-family: 楷体; font-size: 36px; } 文本 {{qd}} 样式一 {{qd}} 样式二 {{qd}} 样式二 {{qd}} new Vue({ el:"#ht", data(){ return { qd:'本是青灯不归客', as:'a', bs:'b', cs:'c', } } }) 效果图：
Vue通过由点(.)表示的指令后缀来调用修饰符， .stop .prevent .capture .self .once 如何调用修饰符 ... ... vue的事件处理器 div{ padding: 30px; } 文本 {{qd}} 防止事件冒泡 事件只点击一次 {{ltqd}} 发送 点我 new Vue({ el:"#ht", data(){ return { qd:'本是青灯不归客', ltqd:null }; }, methods:{ a(){ alert('山有木兮木有之') }, b(){ alert('却因浊酒留风尘') }, c(){ alert('星光不问赶路人') }, d(){ alert('岁月不负有心人') }, send(){ this.ltqd=this.qd; this.ltqd=null; } }, });防止冒泡效果图： @click.stop="d"是防止冒泡循环的关键； 如果不调用这个修饰符，那么按照我上面的描述会循环弹窗四次(从内至外)； 加了这个方法弹了一次d方法中赋值的东西就自动结束。
事件点击一次也是因为调用了修饰符的原因，效果如下（仿聊天发送）：
Vue允许为v-on在监听键盘事件时添加按键修饰符： 例如：
全部的按键名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta
Vue表单 用v-model指令在表单控件元素上创建双向数据绑定 常用控件 文本框/密码框/文本域/隐藏域 单选复选框/多选复选框 单选按钮 下拉框 vue表单 div{ padding: 30px; }表单 姓名： 密码： 年龄： 性别： 男 女 爱好： {{h.name}} 类别： {{t.name}} 备注： 确认 new Vue({ el:"#ht", data(){ return { uname: null, upwd: null, age: 10, sex: 1, hobby: [{ id: 1, name: '汉服' }, { id: 2, name: '古琴' }, { id: 3, name: '刺绣' }], hobbies: [], types: [{ id: 1, name: '啦啦' }, { id: 2, name: '哈哈' }, { id: 3, name: '小小' }], type: null, mark: '学生备注', flag: false } }, computed: { show: function() { return !this.flag; } }, methods: { doSubmit: function() { console.log('doSubmit') var obj = { uname: this.uname, upwd: this.upwd, age:this.age+10, sex: this.sex, hobbies:this.hobbies, type: this.type, mark: this.mark, } console.log(obj); }, }, });效果图：
组件(Component)是Vue最强大的功能之一 组件可以扩展HTML元素，封装可重用的代码 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 父传子值（props）props是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop" vue表单 div{ padding: 30px; } 组件 父传值给子 new Vue({ el:'#ht', data(){ return{ }; },components: { 'my-button': { props: ['m'], data() { return { n: null }; }, template: '自定义按钮，被{{m}}点击了多少下{{n}}', methods: { doxxx() { this.n++; }, }, }, }, }); 效果图：
循环弹窗一遍为一次 弹窗说明他已经传值过去了 vue表单 div{ padding: 30px; } 组件 子传值给父 new Vue({ el:'#ht', data(){ return{ }; }, components: { 'my-button': { props: ['m'], data() { return { n: null }; }, template: '自定义按钮，被{{m}}点击了多少下{{n}}', methods: { doxxx() { this.n++; this.$emit('tree-click', this.n, 'haungting', '哈哈哈哈'); }, }, }, }, methods: { doht(a, b, c) { alert(b); //haungting alert(c); //哈哈哈哈 // 循环弹窗一遍为一次 }, }, });效果图：
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h57175.shtml |
【本文地址】
今日新闻 |
推荐新闻 |