vue基础中的注意事项，以及一些学习心得

Posted 2021-03-15 liuyilong

vue中你不知道的东西、以及注意事项

• v-html

• 使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值，且使用v-html的时候不要将他设置为给用户提供内容的地方，因为v-html很容易被XSS攻击

• v-bind

  • 使用v-bind绑定属性值为布尔值的属性时，如果数据为truthy，则该布尔值属性都不会被渲染出来
  • 如果数据值为其他任意存在的值，就意味着值为true

• v-if

  • 使用v-if绑定的标签，当其指令值为truthy的时候该标签是直接被删除掉了

  • 而当其指令值为其他任意存在的值时，就意味着值为true

  • 如果您现在有一个需求是让多个标签都使用v-if，则可以使用template标签，使用该标签包裹需要被一起隐藏或显示的标签，在该标签上绑定v-if即可

  • <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

• v-show

  • 和v-if的区别在于v-show是将标签设置为 display:none;的

• 动态参数

  • 定义：在v-bind中，被绑定的属性被称之为参数，如 id、class、href、src...

  • 用法：使用方括号括起来的js表达式作为指令的动态参数

  • 注意事项：在使用动态参数的时候，需要避免使用大写的字符来命名，因为浏览器会把命名强制转换为小写，其次，动态参数有一些语法约束，如空格和引号放在动态参数中是无效的

  • <div id="app">
        <!-- 2.6.0版本新增:动态参数 -->
        <img v-bind:[attribute]="url">  <!-- 这里的attribute写成大写也能有效果，因为浏览器会把该变量名强制转换为小写 -->
        <br>
        <!-- <img :['s'+ 'rc']="url" alt=""> -->  <!-- 这种写法在编译时会报错，因为不允许使用引号 -->
        <img :[compsrc]="url" alt="">
     </div>
    <script>
        const vm = new Vue({
          el: '#app',
          data: {
            attribute: 'src',
            url: './images/logo-footer.png'
          },
          computed: {   //  通过使用计算属性巧妙避开在动态参数中使用引号和空格
            compsrc() {
              return 's' + 'rc'
            }
          },
        })
     </script>

• vue中复用性的问题

  • 因为vue会尽可能高效的渲染元素，通常会复用已有的元素。

  • 大家可能以前出现过这样的问题，

  • <!-- 有时候我们可能想实现这样的效果：我点击按钮的时候改变登录方式，即如下的账号和用户名两种 -->
    <template v-if='isShow'>
        <label for='number'>账号:</label>
        <input type="text" id="number">
    </template>
    <template v-else>
        <label for="username">用户名:</label>
        <input type="text" id="username">
    </template>
    <button @click='btnClick'>切换isShow</button>
    <!-- 但是这样使用之后我们会出现这样一个问题:当我们在其中一个登录方式输入了东西之后，我们突然想切换另一个登录方式，那么我点击切换之后，按道理来说我们输入框中的信息应该被重置掉，因为我们不是使用的同一个input文本框。但是事实总是相反的，原因就在于vue会复用已存在的元素，所以其实根本就没有创建一个新的input文本框 -->

  • 解决方案：在input标签中加入一个 key 属性，给该属性命名(字符串or数字)，加以区分即可。但是这不会导致label标签不复用，因为label标签没有key属性。

• v-for的注意事项：

  • 在v-for的语法中其实可以把in代替为of作为分隔符；

  • 数组更新检测：

    • 变异方法(变异方法就是改变了原数组的方法，即：push,pop,shift,unshift,splice,sort,reverse)，Vue可以监听到数组的变化，并在遍历的时候动态遍历
    • 替换方法(替换方法就是生成了新数组的方法，即：filter,concat,slice等等)，当使用替换方法时，可以用新数组替换原来的数组
    • 注意事项：当你利用索引直接添加一个数组项时、当你修改数组长度时，Vue不是响应性的
    • 解决方法： vm.lists.splice(index,num,newValue) or Vue.set(vm.lists,index,newValue)
    • 对象的变更检测也是如此，不能通过对象名.新属性名去手动添加新属性，但是也可以使用Vue.set(vm.lists,index,newValue) 的方法进行添加。

  • 在 <template> 上使用 v-for

    • <ul>
        <template v-for="item in items">
          <li>{{ item.msg }}</li>
          <li class="divider" role="presentation"></li>
        </template>
      </ul>

  • v-for与v-if一同使用的问题

    • 当这两个指令处于同一个节点，v-for的优先级比v-if的高
    • 官方不推荐我们用使用这两个指令，除非你是为了部分项渲染节点时，这种优先级机制就发挥了重要作用

• 在组件中使用v-for的注意事项

  • 在有些html元素中，对于哪些元素可以出现在其内部是有严格限制的，例如：p元素中如果有div元素，那么div会被提升到跟p元素外部，所以在进行组件化开发的时候，在使用这些约束条件的元素会有一些问题。

  • <table>
      <blog-post-row></blog-post-row>
    </table>
    <!-- 这个自定义组件会被提升到tabel之外，最终渲染的样式肯定就出错了 -->

  • 解决方法：使用Vue中提供的 is 属性

  • <table>
      <tr is="blog-post-row"></tr>
    </table>

• 事件处理

  • 事件修饰符
    • 1. once ：绑定的事件只执行一次；可以被使用在组件事件中
      2. prevent ：阻止默认事件的发生，如超链接的跳转、点击事件的点击
      3. stop ：阻止冒泡行为的方法（由内到外）
      4. capture ：让事件进行捕获（由外到内）
      5. self ：只有当事件该本身元素触发时才发生
      6. passive ：滚动事件的默认行为（滚动行为）将会立即触发
    • 注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

• 表单输入值绑定

  • 修饰符
    • 1. .lazy ：将 input事件监听（同步更新）转换为 change事件监听（当失去焦点时更新）
      2. .number ：自动将用户的输入值转为数字类型
      3. .trim ：自动过滤用户输入的首尾空白字符