学习vue2.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-if， v-show

Paste_Image.png

Paste_Image.png

按钮取反

按钮

区别： v-show使用的是 display:none;v-if`是从DOM中被删除

Paste_Image.png

v-else配合v-if使用

总结

n