美文网首页
学习vue2.0笔记(第三章上)

学习vue2.0笔记(第三章上)

作者: 这很重要吗 | 来源:发表于2017-05-18 19:24 被阅读0次

模板渲染

Paste_Image.png

vue2.0种,必须使用v-bind将变量渲染到属性中,

列表渲染v-for

Paste_Image.png

也可以使用v-text方法

Paste_Image.png

加序号index,2.0需要先声明index,例如:为奇数项添加odd类

Paste_Image.png

V-for进行对象渲染

Paste_Image.png Paste_Image.png

引入组件:import后再注册 ,最后以标签的形式使用


Paste_Image.png

es6的简写,


Paste_Image.png
等同于

之前的版本


之前的版本

v-for渲染组件,意义:动态为组件传值(比如key)


定义一个方法,实现列表的更新

Paste_Image.png Paste_Image.png

以下方法会触发列表的更新



改变数组的长度,直接为数组中的某一项赋值,不会触发列表的更新


Paste_Image.png
将数组第二项改为pinnaple,点击按钮,仍然不更新

需要使用vue提供的全局set方法
首先要导入Vue


Paste_Image.png

总结


Paste_Image.png

v-bind动态绑定,同步更新,比如link,class属性的绑定

当class是一个对象时,值为true的class会展现出来

Paste_Image.png Paste_Image.png

当class是数组时,


也可以直接输入


Paste_Image.png

混用,数组和对象

Paste_Image.png Paste_Image.png

绑定style

Paste_Image.png

条件渲染v-ifv-show

Paste_Image.png Paste_Image.png
按钮取反
按钮
区别:v-show使用的是display:none;v-if`是从DOM中被删除 Paste_Image.png

v-else配合v-if使用


总结


n

相关文章

网友评论

      本文标题:学习vue2.0笔记(第三章上)

      本文链接:https://www.haomeiwen.com/subject/vtgsxxtx.html