Vue基础语法（二） |
您所在的位置：网站首页 › vue事件对象的使用 › Vue基础语法（二） |
Vue基础语法（二）
|
一、样式绑定
1.class绑定
使用方式： v-bind:class="expression"expression的类型：字符串、数组、对象 2.style绑定使用方式： v-bind:style="expression"expression的类型：字符串、数组、对象 代码： .cl{ color: gold; font-size:30px; } .cl1{ font-weight: bold; } { {ts}} 我又变色了 我又又变色了 //每一个vue实例都是从new构造函数开始 var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), cls:'cl', clsArrs:['cl','cl1'], clsObj:{ color:'red', fontSize:'20px', fontWeight:'bold' } }, methods:{ } });效果： 事件监听可以使用v-on 指令 1.事件修饰符Vue通过由点(.)表示的指令后缀来调用修饰符 .stop .prevent .capture .self .once 单击事件（.once ）通过once修饰符控制事件只能点击一次： { {ts}} { {msg}} 消息： 发送 消息： 发送 //每一个vue实例都是从new构造函数开始 var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), msg:'', }, methods:{ send:function(){ console.log(this.msg); }, } });效果： 点击第一个发送按钮，可以一直点
点第二个发送按钮，就只输出了一次
提交事件不再重载页面： 消息： doSubmit:function(){ console.log('doSubmit...'); },效果： 不加前点提交：
加了之后点提交：
2.按键修饰符 Vue允许为v-on在监听键盘事件时添加按键修饰符 给回车键加个事件： 消息： doKeyup:function(){ console.log('按了...'); }效果： 按回车键
全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 注1：什么是事件冒泡? 见“事件冒泡模型.png” 3. vue表单用v-model指令在表单控件元素上创建双向数据绑定 常用控件： 文本框/密码框/文本域/隐藏域 单选复选框/多选复选框 单选按钮 下拉框 综合案例vue表单提交综合案例： { {ts}} 账号： 密码： 性别：男; 女 爱好： { {h.name}} 籍贯： --请选择-- { {a.name}} 备注： 已阅读 注册 //每一个vue实例都是从new构造函数开始 var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), username:'', password:'', sex:'1', hobby:[ {id:1,name:'奖励自己'}, {id:2,name:'奖励自己'}, {id:3,name:'奖励自己'}, {id:4,name:'奖励自己'}, ], hobbies:[], area:[ {id:1,name:'长沙'}, {id:2,name:'株洲'}, {id:3,name:'娄底'}, {id:4,name:'湘潭'}, ], areaname:'', remark:'', flag:false, }, methods:{ doRegister:function(){ let params={ username:this.username, password:this.password, sex:this.sex, hobby:this.hobbies, area:this.areaname, remark:this.remark, }; console.log(params); } }, computed:{ } });效果：  4. 自定义指令
除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令 全局指令//全局指令 Vue.directive("focus",{ }); 代码： .cl{ color: red; } { {ts}} 自定义指令(全局和局部) // 全局指令 Vue.directive('hhh',{ bind:function(el,binding){ console.log('[全局指令的bind]'); }, inserted:function(el,binding){ console.log('[全局指令] inserted'); } }) var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), name:'zs' }, methods:{ }, directives:{ }, });效果：
new Vue({ el:"#d1", //局部指令 directives:{ focus:{} } }); 代码： .cl{ color: red; } { {ts}} 自定义指令(全局和局部) 李四 // 全局指令 Vue.directive('hhh',{ bind:function(el,binding){ console.log('[全局指令的bind]'); }, inserted:function(el,binding){ console.log('[全局指令] inserted'); } }) var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), name:'zs' }, methods:{ }, directives:{ // 局部指令，所对应的钩子函数bind/inserted/ /unbind fos:{ bind:function(el,binding){ console.log(el); console.log(binding); console.log('bind'); }, inserted:function(el,binding){ console.log('inserted'); } } }, });效果：
指令定义函数提供了几个钩子函数用来帮助实现功能(可选) bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作 。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用 。 unbind: 只调用一次， 指令与元素解绑时调用 。钩子函数的参数 el: 指令所绑定的元素，可以用来直接操作 DOM 。 binding: 一个对象，包含以下属性： name: 指令名，不包括 v- 前缀。 value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。 oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。 arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。 modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。 vnode: Vue 编译生成的虚拟节点。 oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。 5. vue组件 组件简介 组件(Component)是Vue最强大的功能之一 组件可以扩展HTML元素，封装可重用的代码 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 全局和局部组件全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。 局部组件: new Vue({el:'#d1',components:{...}}) 注册后，我们可以使用以下方式来调用组件： < tagName> propsprops是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop" 注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。 当我们定义这个 组件时，你可能会发现它的data并不是像这样直接提供一个对象 data: { count: 0 }取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝： data: function () { return { count: 0 } }定义组件名的方式有两种： 短横线分隔命名(建议使用) Vue.component('my-component-name', { /* ... */ })首字母大写命名 Vue.component('MyComponentName', { /* ... */ }) {ts}} 组件 Component(全局和局部) //组件传值 // 1 子到父 采用事件方式,this.$emit('事件名，参数....') // 2 父到子 //全局组件 Vue.component('yy-button',{ //定义HTML代码，每一个template中，有且只有一个根节点 template:'全局组件被点击{ {count}}次', // 采用驼峰命名 props:['firstName'], data:function(){ return { count:0 } }, methods:{ doClick:function(){ this.count=this.count+1; console.log(this.count); console.log(this.firstName); }, } }); var vm=new Vue({ el:'#zhq', data:{ ts:new Date().getTime(), obj:{ fname:'zeng', lname:'hai', zname:'qiu' } }, methods:{ doTest:function(v){ console.log("父组件接收到count="+v); } }, components:{ 'kfc-button':{ //定义HTML代码，每一个template中，有且只有一个根节点 template:'局部组件被点击{ {count}}次', data:function(){ return{ count:0 } }, methods:{ doClick:function(){ this.count=this.count+1; console.log(this.count); }, doThreeClick:function(){ this.count=this.count+1; if(this.count%3==0){ console.log("子组件count="+this.count); this.$emit('three-click',this.count); } } } } } });效果：
|
【本文地址】
今日新闻 |
推荐新闻 |