vue基础命令

q251h
98 阅读3分钟

文本指令

  1. 插值语法
    • 书写形式：{{表达式}}
    • 缺点：会出现{{}}闪现的问题
    • 解决方法：使用v-cloak指令 
      <style>
  [v-cloak] { display: none; }

</style>
<h1 v-cloak>{{ msg }}</h1>
  2. v-text
    • 用于渲染文本类的声明式变量
  3. v-html
    • 用于渲染HTML字符串，解析得到DOM结构
    • v-html默认已经实现了“XSS防注入攻击”
  4. v-once
    • 用于渲染文本类的声明式变量，配合其它的文本类指令一起使用
    • 但只解析一次，也就是说当声明式变量发生变化时，视图不更新
    • <h1 v-text='foo' v-once></h1>
  5. v-pre
    • 凡是被v-pre所包裹的视图结构，不发生指令解析，阻止视图渲染

动态属性

  1. 指令：v-bind
    • title、class、style、src、value
    • 单向绑定：数据影响视图，视图更新不影响响应式数据
    • 父组件往子组件传递的prop数据，更改数据使用自定义事件
  2. 指令简写：“：”
    • v-bind:属性='表达式' 或者 :属性='表达式'
  3. 动态class语法
    • <div :class='表达式' />
    • <div :class='[表达式1, ...]' />
    • <div :class='{类名: 布尔值, ...}' /> 不常用
  4. 动态style语法 +<div :style='{css属性:css属性值}' />
  5. 注意：在同一个标签上，动态属性和静态属性，不要同时使用，这会导致代码难维护。

事件绑定

  1. 指令：v-on
    • 用于给标签绑定事件
    • 比如绑定click、keyup、input、mouseenter、touchstart等
  2. 简写：@
    • v-on:事件名.事件修饰符='methods方法'
    • @事件名.事件修饰符='methods方法'
  3. 常用的事件修饰符
    • .enter： 按回车触发事件
    • .shift
    • .alt
    • .space： 空格
    • .stop： 阻止事件的冒泡行为
    • .prevent 禁止事件的默认行为

表单绑定

  1. 指令：v-model
    • v-model.表单修饰符='声明式变量'
  2. 作用
    • 用于表单取值，特点是双向绑定
    • 文本类的表单：下拉框、单选按钮组、复选框
  3. 常用修饰符
    • .trim去除首尾字符
    • .number把表单的值变成Number类型
    • .lazy当表单失焦时再进行双向绑定（用于性能优化）
  4. 语法糖
    • 对文本框来讲，v-model = v-bind:value + v-on:input(对.lazy的话，事件就是@blur事件)
        <input type="text" v-model.trim.number='username' />
    <input type="text" :value='username' @input='username=$event.target.value' />

    <textarea rows="3" cols="80" v-model.lazy='desc'></textarea>
    <textarea rows="3" cols="80" :value='desc' @blur='desc=$event.target.value'></textarea>

    <input type="color" v-model='color' />
    <input type="color" :value='color' @input='color=$event.target.value' /><br>
    • 对下拉框来讲，v-model = v-bind:value + v-on:change
         <select v-model.number='level'>
      <option value="1">硕士</option>
      <option value="2">本科</option>
      <option value="3">大专</option>
      <option value="4">高中</option>
    </select>

    <select :value='level' @change='level=Number($event.target.value)'>
      <option value="1">硕士</option>
      <option value="2">本科</option>
      <option value="3">大专</option>
      <option value="4">高中</option>
    </select>
    • 对单选按钮组、复选框来讲，v-model = v-bind:checked + v-on:change
    <input type="radio" value='man' v-model='gender' />男
<input type="radio" value='woman' v-model='gender' />女
<input type="radio" value='unknow' v-model='gender' />保密

<input type="radio" value='man' :checked='gender==="man"' @change='gender=$event.target.value' />男
<input type="radio" value='woman' :checked='gender==="woman"' @change='gender=$event.target.value' />女
<input type="radio" value='unknow' :checked='gender==="unknow"' @change='gender=$event.target.value' />保密

<span v-for='item in favList'>
  <input type="checkbox" :value='item.value' v-model='favs' />
  <span v-text='item.label'></span>
</span>

<span v-for='item in favList'>
  <input type="checkbox" :value="item.value" :checked='favs.includes(item.value)' @change='favChange' />
  <span v-text='item.label'></span>
</span>

  const app = new Vue({
      el: '#app',
      data: {
        username: '',
        level: 1,
        gender: 'man',
        favList: [
          { id: 1, value: 'basketball', label: '篮球' },
          { id: 2, value: 'football', label: '足球' },
          { id: 3, value: 'sing', label: '唱歌' },
          { id: 4, value: 'dance', label: '跳舞' },
          { id: 5, value: 'rap', label: '说唱' }
        ],
        favs: [],
      },
    methods: {
        favChange (ev) {
          const { checked, value } = ev.target
          if (checked) {
            this.favs.push(value)
          } else {
            this.favs = this.favs.filter(ele=>ele!==value)
          }
        }
     }
})

列表渲染

  1. 指令：v-for
  2. 遍历渲染一个数组
    • <div v-for='(item, index) in array' />
    • item是数组索引对应的元素
    • index是每次遍历时对应的索引下标
  3. 遍历渲染一个对象
    • <div v-for='(value, key, index) in object' />
    • index是遍历对象的索引
    • key是该索引对应的键值对的 键
    • value是该索引对应键值对的 值
  4. 还可以遍历Number
    • <div v-for='(i, index) in 10' />
    • index是遍历对应的索引 0,1,2,3..
    • i是1-number的取值 1,2,3...

条件渲染

  1. v-show
  2. v-if,v-else-if,v-else
  3. 二者异同点
    • 同：接收一个布尔值，结果都是实现dom元素的显示与隐藏
    • 异：结果实现原理
      1. v-show是该变元素的display样式
      2. v-if是直接对元素进行添加或移出
    • 如果一个节点可能频繁显示与隐藏，建议用v-show；反之v-if系列
    • 不建议同时使用v-if和v-for。如果非得一起使用，vue2中v-for的优先级更高，vue3反之。

插槽

  1. 指令：v-slot
  2. 简写：#
  3. 作用
    • 组件之间通信
    • 子组件通过<slot x y>传递数据给父组件
    • 在父组件中使用 v-slot='scoped' 或 #scoped 来接收

计算属性

  1. computed
  2. 作用
    1. 指令中的表达式比较复杂时，用计算属性把复杂表达式从视图中抽离出来，提升代码可维护性
    2. 计算属性还具有缓存作用，是一种性能优化技巧。
  3. 特点
    1. 有且仅有当计算属性作用域内的声明式变量发生变化时，这个计算属性才会重新计算。
    2. 一般对那些带有__ob__变量（声明式变量）进行计算：data中变量
    3. 计算属性默认只有getter功能，要想实现对计算属性的修改，我们得把计算属性拆成get/set的写法

监听器

  1. watch
  2. 作用
    • 用于监听__ob__变量的变化，然后去做另外一件事
    • data声明式变量、computed计算属性、route路由信息、route路由信息、store状态管理
  3. 注意
    • 听器监听的是“变化”，也就是说，当被监听的变量没有变化时，监听器函数不执行
    • atch在监听引用数据类型的声明式变量时，只监听第一层？（出于性能优化的考虑）
      watch: {
    // 如果希望监听引用数据类型的深层次变化，使用deep:true进行深度监听。
    // 这种深度监听，相当于给引用数据类型的每一层都添加了set/get钩子，是一种性能损耗。
    info: {
      handler () {
        console.log('info变化了')
      },
      deep: true
    },

    // 推荐：当我们监听引用数据类型的声明式变量时，最佳写法是这样的。
    'info.user.child.age' () {
      console.log('---info中的age变了')
    },

    // 监听器方法是一个methods方法
    // 当child变化时，执行一个名字叫childChangeHandler的methods方法
    'info.user.child': 'childChangeHandler'
  },
avatar
文章
阅读
粉丝