Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响
什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数基础知识,具体详情如下所示:(一)单向绑定 ①el应该表示绑定的意思,绑定id=app这个标签也可以改为以下这样: el: '.app', 一样有效。 但如果是多个的话,只对第一个有效:
Hello Vue.js!
{{ message }}
②data里的message变量,表示{{message}的值(二)双向绑定 效果是: ①input输入框里有初始值,值是data里的message属性的值; ②修改输入框的值可以影响外面的值; (三)函数返回值效果: ①输出值也是message的返回值; ②缺点:失去双向绑定! (四)渲染列表v-for里的list,类似for in里面的i, 个人认为, ①可以把list in todos,理解为for list in todos ②然后把下一行的list.text理解为 todos[list].text 然后这个v-for标签在哪里,就是以他为单位进行多次复制。 (五)处理用户输入效果: ①对输入框的值,点击一次add按钮,则值+1; ②如果不能加,则像正常表达式加错了那样返回结果,例如NaN; ③data里的message的值,是初始值; ④methods里是函数集合,他们之间用逗号分隔; ⑤获取值的时候,要加上this,例如this.message获取的是message的值。 (六)多功能效果: ①初始输入框内值为1; ②在输入框内按回车键,则会将输入框的内容转为数字,并添加到一个列表里,该列表里转换后的数字和一个删除按钮,并且输入框内的值,变为转为数字后的值加一。 如图: ③他的添加,利用的是双向绑定,将输入的值push到data里面的values这个数组之种,然后利用渲染列表的效果,输出多行值。 ④在button标签里,函数的参数名给了一个参数,是该行索引,参数名是$index ⑤标签里,触发的函数的函数名,可以加括号,也可以不加括号,实测似乎是没有影响的。 (七)标签和API总结(1)① {{ 变量名 }}表示绑定的变量,调用时需要用this.变量名 ② v-model=”变量”双向绑定使用,如果input里不加任何type就是文本,如果加type就是type,例如: {{DATE}}
就会将日期类型的输入框的值,和li标签显示的内容绑定在一起。 ③ v-on:click=”函数名”点击时触发该函数,可加()也可以不加,$index作为参数表示索引,索引值从0开始。 ④ v-for双向绑定的在数组内容更新后,会实时更新,v-model也是; 类似for in语句,被多次使用的是 ⑤ v-on:事件即触发的事件,有click(点击),keypress(按键按下) 事件后面可以跟更具体的,例如keypress.enter是回车,keypress.space是空格等 更多的需要之查看 ⑥ new vue通过new一个vue的实例,然后传一个对象作为参数给这个实例; 其中: el 表示绑定的模板(只会匹配到绑定的第一个) data 表示数据,可以直接被取用,例如用在v-model或者是{{变量名}}中 methods 表示方法 ⑦ 函数内部调用变量通过this.变量名,例如: 这里的this.val就是上面的data.val,也是html里的{{val}},也是v-model=”val”,但不是 里面的val.val,至于原因,个人认为是这里的val处于v-for的作用域内,因此val in values 里的val其在作用域链中的优先级更高 以上所述是小编给大家介绍的Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |