vue-1 目录 v-on v-for v-model等常见属性 事件修饰符

cli 目录

v-cloak v-text v-html

• v-cloak
  -

{{msg}} 页面渲染时，若js还没读完，则页面就会显示{{msg}} ，为解决可加入v-cloak标签，再没读完时，该元素不会显示

• v-text
  
  v-text 与v-cloak作业相似，区别在于：

• v-html
  相比v-text 能够解析html语言

v-bind 给属性绑定变量 缩写 ：

Warning！
#1 v-bind：==title == 给title属性绑定了， 还如 class value
#2 括号可以是合法的js表达式，如“mytitile + ‘123‘’’”

绑定类

举例：
定义类：

方法一

方法二

上面的三元表达式也可以等于下面的：

方法三：

绑定style

v-on 绑定时间 缩写 @

v-on:click=“func(“haha”)”

在method定义func()方法

事件修饰符

.stop 阻止冒泡事件

.prevent 阻止默认行为

此时可以阻止跳转。也可以用作表单的submit事件

.capture 从外到里的捕获事件

此时，可以输入从外到里的捕获事件

.self 只有自己，不包括子级

.once 只触发一次

与顺序无关，只触发一次prevent事件。

双向数据绑定指令 v-model

相比于v-bind ，后者只能单向读取，无法双向绑定

容易被忽略的点

font-weight 带-符号时，属性的对象key里面要加单引号

v-for 迭代数组 对象 数字

数组

数组对象

Warning！
选中5 – 荀子后，在添加6这一选项，会出现以下错误，

出错：

应该要绑定好key的唯一性，利用item.id，否则，CheckBox只会按照顺序选中

正确：

对象

迭代数字 从1开始

v-for="count in 10”

v-if 不渲染 v-show 隐藏