vuejs语法攻略.docVIP

Vue.js语法整理 基础语法 new Vue({ el: #app, data: { message:Hello Vue! } }) 1） el表示在html中哪个部分起作用，类似节点选择器； 2） data中定义了页面需要的数据，键值对； 现在来“驱动”视图，body 标签里面加入： div id=app {{message}} /div 事件 div id=app {{message}} button v-on:click=changeMessage改变message/button /div 1） v-是指令 2） v-on是绑定事件，可以简写成@click 3 ) 传参数的事件方法 事件修饰器 !-- 阻止点击事件的冒泡行为 -- a v-on:click.stop=doThis/a !-- 阻止默认的表单提交 -- form v-on:submit.prevent=onSubmit/form !-- 事件修饰器可以连用 -- a v-on:click.stop.prevent=doThat !-- 只需要修饰器，而无需处理方法 -- form v-on:submit.prevent/form !-- 使用 capture 模式-- div v-on:click.capture=doThis.../div !-- 仅当event.target是自身的时候才执行 -- !-- 比如，这样写了之后点击子元素就不会执行后续逻辑 -- div v-on:click.self=doThat.../div 双向绑定 div id=app p{{message}}/p input v-model=message /div 1） v-model 是用在表单中的指令 2） 双向绑定：都是指的是类似input这样的，自带change事件的表单项目 3） p标签中的message发生了变化，input的value的变化改变了message，从而使视图发生了相应的变化。 循环 ol li v-for=todo in todos {{todo.text}} /li /ol 带有key，index，value的完整版循环 修饰器方法 push() //在结尾增加一条或多条数据 pop() //删除最后一条数据 shift() //删除第一条数据，并返回这条数据 unshift() //在开始增加一条或多条数据，并返回数组长度 splice() //向/从数组中添加/删除项目，然后返回被删除的项目。 sort() //对数组的元素进行排序。 reverse() //颠倒数组中元素的顺序。 filter() //返回条件为真的数据 concat() //连接两个或多个数组 slice() //从已有的数组中返回选定的元素。 vm对象 var vm = new Vue({ el:#app, data:{ message:Hello Vue! } }) console.log(vm.messages) console.log(vm.$data.message) console.log(vm.$data) console.log(vm.$el) vue1.0与2.0的生命周期 过滤器 div id=app {{float_number | toInt}} /div new Vue({ el:#app, data:{ float_number:3433.45 }, filters:{ toInt:function(value){ return parseInt(value); } } }) 在{{}}中运行表达式 div id=app {{ ok ? yes : no }} /div script src=vue.min.js/script script new Vue({ el:#app,