口味网

vuejs语法攻略

网站:口味网   来源:网络收集

Vue.js 语法整理 Vuejs2.0 文档攻略:http://larabase.com/collection/2/post/115 一、基础语法 new Vue({ el: "#app", data: { message:"Hello Vue!" } }) 1) el 表示在 html 中哪个部分起作用,类似节点选择器; 2) data 中定义了页面需要的数据,键值对; 现在来“驱动”视图,body 标签里面加入:

{{message}}
二、
{{message}}
1) v-是指令 2) v-on 是绑定,可以简写成@click 3 ) 传参数的方法 修饰器
1

...
...
三、双向绑定

{{message}}

1) v-model 是用在表单中的指令 2) 双向绑定:都是指的是类似 input 这样的,自带 change 的表单项目 3) p 标签中的 message 发生了变化,input 的 value 的变化改变了 message,从而使视图发生了 相应的变化。

四、循环

  1. {{todo.text}}
1) 带有 key,index,value 的完整版循环 修饰器方法 push() pop() shift() unshift() splice() sort() reverse() filter() concat() slice() //在结尾增加一条或多条数据 //删除最后一条数据 //删除第一条数据,并返回这条数据 //在开始增加一条或多条数据,并返回数组长度 //向/从数组中添加/删除项目,然后返回被删除的项目。

//对数组的元素进行排序。

//颠倒数组中元素的顺序。

//返回条件为真的数据 //连接两个或多个数组 //从已有的数组中返回选定的元素。

五、vm 对象 2

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 的生命周期 七、过滤器

{{float_number | toInt}}
new Vue({ el:'#app', data:{ float_number:3433.45 }, filters:{ toInt:function(value){ 3

return parseInt(value); } } }) 八、在{{}}中运行表达式

{{ ok ? 'yes' : 'no' }}
网友在搜

All Right Reserved 口味网

声明:本站内容源于网络,出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。文章内容仅供参考,请咨询相关专业人士。

如果无意之中侵犯了您的版权,或有意见、反馈或投诉等情况 网站地图 网站栏目