VUE速学（二）本地应用

通过Vue实现常见的网页效果，学习Vue指令（以v-开头的语法）

目录

一、内容绑定，事件绑定

1、v-text

2、v-html

3、v-on基础

3、计数器案例

二、显示切换，属性绑定

1、v-show

2、v-if

三、列表循环，表单元素绑定

1、v-for

2、v-on（补充）

3、v-model

---

一、内容绑定，事件绑定

1、v-text

• 设置标签的文本属性，会全部替代原有的标签内的文本内容
• 不想全部替代可使用插值表达式{{内容}}在标签内
• 可使用表达式

例子：

2、v-html

• 设置标签的innerHTML
• 输入为文本则作用与v-text相同
• 输入为HTML内容则解析HTML

例如

3、v-on基础

• 为元素绑定事件，事件名可不用写on
• 可简写为@
• 绑定的方法定义在methods属性
• 可在方法内部通过this关键字访问定义在data里的数据

例： 

 

3、计数器案例

二、显示切换，属性绑定

1、v-show

• 根据表达值的真假，显示元素（真true则表示，假fasle则不显示）
• 操纵的是css，即display

例

2、v-if

• 根据表达值的真假，显示元素（真true则表示，假fasle则不显示）
• 操纵的是dom，即delete
• 频繁使用用v-show(性能消耗较小)

例

3、v-bind

• 设置（绑定）元素的属性
• 语法：v-bind:属性名=表达式  （v-bind可省略）
• 若设置clss可用对象的方法进行设置更简便 {class名：方法名}

例：

三、列表循环，表单元素绑定

1、v-for

• 根据数据生成列表结构
• 经常结合数组使用
• 语法：v-for="(item,index) in 数据"

（这里不知道为什么我在使用过程中，（）里的第一个元素代表的是索引，第二个是数据内的元素，希望能有好心人可以解答）

例：

2、v-on（补充）

•  事件修饰符，事件绑定的方法写成函数的形式，可传递自定义参数（形参，实参）
• 事件后面加 .修饰符 可对事件进行限制
• 有多种事件修饰符（.enter为限制出发按键为回车）

例：

3、v-model

• 便捷获取和设置表单元素的值
• 双向数据绑定，更改两边的任一边，另一边同步（绑定的数据与表单元素的值）

例