笔记

mvvm

• vm:
  就是监听页面dom元素的Vue工具

插值表达式

• 插值表达式:
  在插值表达式中可以使用简单的javascript语句,或者用普通的字符串与Vue的属性名拼接渲染文本

v-text的使用方法

• v-text 指令，会把 元素内部的内容，都替换掉,但是不能识别带html标签的文本

v-text与插值表达式的区别

1. v-text 指令，只能被使用在 元素的 属性节点上； 而 {{}} 只能用在 元素的 内容区域
2. 插值表达式，只是一个占位符，不会清空元素中其它的内容；但是 v-text 会覆盖掉元素之前的内容
3. 插值表达式在网速慢的情况下，会出现 闪烁的问题；但是 v-text 不存在闪烁的问题

v-html

• 渲染页面中带html标签的文本
• 注意: 只能在可信的内容上使用,不能所有的地方都用,不然会受到xss攻击

v-bind

• v-bind可以用来绑定标签的动态属性
• 使用方式: v-bind:属性名="data里面的属性名"
• v-bind可以用空格简写为 :属性名="data里面的属性名"

v-for

• 渲染数组

  1. v-for="item in arr" ,arr这里指的是数组对象
  2. v-for="(item, index) in arr" ,arr这里指的是数组对象

• 渲染对象

  1. v-for="item in obj" ,obj这里指的是对象
  2. v-for="(value, key, index) in obj" ,obj这里指的是对象, key代表对象的键

• v-for的使用注意

1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
2. 使用数组下标的方式去改变数组的时候，也不会触发视图更新

• 解决方法

1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
2. Array.prototype.splice()

: key的使用方法

• v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复

v-model

• 作用: 视图层和model层数据绑定,数据同步,实时更新
• v-model指令用来双向数据绑定：就是model和view中的值进行同步变化
• 注意: v-model只能在input/textarea/selet中使用

v-on

• v-on指令用来监听dom事件

• 使用方法：

  1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
  2. 简写：@任意的事件类型="执行的函数" （推荐）
  3. 通过执行函数添加参数
  4. 通过执行函数中添加event参数传递事件对象，注意只能是event,并且不能加引号
  5. 事件修饰符可以给事件添加特殊功能 .stop阻止冒泡 .prevent阻止跳转
  6. 可以给和按键相关的事件添加按键修饰符 常用的有 .ente

• 注意: 在methods中想要去获取data中的属性的话，需要加上this，this表示vue实例

v-if和v-show

• v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示，false隐藏

• 区别：

  1. v-if通过控制dom来控制元素的显示和隐藏
  2. v-show通过控制样式display:none来控制元素的显示与隐藏

• 使用场景区别:

  1. 涉及到大量dom操作的时候，我们需要使用v-show
  2. 涉及到异步数据渲染的时候就要使用v-if