Web front-end interview high-frequency test site - the basic use of Vue (one article to master the most basic knowledge points of Vue)

Series Article Directory

content	Reference link
Basic use of Vue	The basic use of Vue (one article to master the most basic knowledge points of Vue)
Vue communication and advanced features	Communication between Vue components and advanced features (communication between various components, custom v-model, nextTick, slots)
Vue advanced features	Advanced features of Vue (dynamic components, asynchronous loading, keep-alive, mixin, Vuex, Vue-Router)
Vue Principle 1	Vue principle (understanding MVVM model, in-depth / monitoring data changes, monitoring array changes, in-depth understanding of virtual DOM)
Vue Principle 2	Vue principle (diff algorithm, template compilation, component rendering and updating, JS implementation routing)
Vue Interview Questions	Web front-end interview high-frequency test site - Vue interview questions

---

---

First, the basic use of vue

1. Interpolation, Expressions, Directives, Dynamic Properties

• interpolation, expression
• Directives, dynamic properties
• v-html: there is a risk of xss, it will overwrite child components

<template>
  <div>
    <p>文本插值 {
    
    {
    
    message}}</p>
    <p>JS 表达式 {
    
    {
    
    flag ? 'yes' : 'no'}}</p>
    <p :id="dynamicId">动态属性 id</p>
    <hr/>
    <p v-html="rawHtml">
        <span>有 xss 风险</span>
        <span>使用 v-html 之后，将会覆盖子元素</span>
    </p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
            message: 'hello vue',
            flag: true,
            rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
            dynamicId: `id-${
      
      Date.now()}`
        }
    }
};
</script>

2. computed computed properties

• Computed has a cache, and if the data remains unchanged, it will not be recalculated

<template>
  <div>
    <p>num {
    
    {
    
     num }}</p>
    <p>double1 {
    
    {
    
     double1 }}</p>
    <input v-model="double2" />
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          num: 20
        }
    },
    computed: {
    
    
        double1() {
    
    
            return this.num * 2
        },
        double2: {
    
    
            get() {
    
    
                return this.num * 3
            },  
            set(val) {
    
    
                this.num = val / 2
            }
        }
    }
};
</script>

Enter 4 in the input box:

3, watch monitoring

• Value type, you can get oldVal and val normally
• How to watch deeply (listen to reference types)
• watch listens to the reference type and cannot get oldVal, because the pointer is the same, it has already pointed to the new val at this time

<template>
  <div>
    <input v-model="name"/>
    <input v-model="info.city">
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          name: '杂货铺',
          info: {
    
    
            city: '北京'
          }
        }
    },
    watch: {
    
    
        name(oldVal, val) {
    
    
            console.log('watch name', oldVal, val); // 值类型，可正常拿到 oldVal 和 val
        },
        info: {
    
    
            handler(oldVal, val) {
    
    
                console.log('watch info', oldVal, val); // 引用类型，拿不到  oldVal。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
};
</script>

Before listening:

After listening:

4, class and style

• Use dynamic properties
• Use camel case
• Object writing ( :classbind objects, define true/false in the data function)
• Array writing method (both keys and values ​​are written in the data function, :classand the keys are used directly)
• style: define the style directly in the data function, :styleand use the style directly in

<template>
  <div>
    <p :class="{black: isBlack, orange: isOrange}">使用 class</p>
    <p :class="[black, orange]">使用 class</p>
    <p :style="styleData">使用 style</p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          isBlack: true,
          isOrange: true,

          black: 'black',
          orange: 'orange',

          styleData: {
    
    
            fontSize: '40px', // 转换为驼峰式
            color: 'red',
            backgroundColor: "#ccc"
          }
        }
    }
};
</script>

<style>
  .black {
    
    
    border: 1px solid black;
  }
  .orange {
    
    
    color: orange;
  }
</style>

5. Conditional rendering

• The usage of v-if v-else, you can use variables, you can also use === expressions
• The difference between v-if and v-show

(1) Means: v-if is to dynamically add or delete DOM elements to the DOM tree; v-show is to control display and hide by setting the display style attribute of DOM elements;
(2) Compilation process: v-if is lazy, The label will only be rendered if the condition is true; if the initial condition is not true, v-if will not render the label. v-show will render the label regardless of whether the initial condition is true or not;
(3) performance consumption: v-if has higher switching consumption; v-show has higher initial rendering consumption;
(4) usage scenario: v-if Suitable for operating conditions unlikely to change; v-show suitable for frequent switching.

• Usage scenarios for v-if and v-show (updatedinfrequentlychoose whenv-if,renewfrequentlychoose whenv-show)

<template>
  <div>
    <p v-if="type === 'a'">A</p>
    <p v-else-if="type === b">B</p>
    <p v-else>other</p>
    <p v-if="showInfo">show info</p>

    <p v-show="type === 'a'">A by v-show</p>
    <p v-show="type === 'b'">B by v-show</p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          type: 'a',
          showInfo: true
        }
    }
};
</script>

Second, the basic use of Vue 2

1. Loop (list) rendering

• How to iterate over objects - you can also use v-for
• The importance of the key, the key cannot be scribbled (to ensure its uniqueness)
• v-for and v-if cannot be used together

Example: v-for iterates over an array (item, index) and an object (val, key, index)

<template>
  <div>
    <p>遍历数组</p>
    <ul>
      <li v-for="(item, index) in listArr" :key="item.id">
        {
    
    {
    
    index}} - {
    
    {
    
    item.id}} - {
    
    {
    
    item.title}}
      </li>
    </ul>

    <p>遍历对象</p>
    <ul>
      <li v-for="(val, key, index) in listObj" :key="key">
        {
    
    {
    
    index}} - {
    
    {
    
    key}} - {
    
    {
    
    val.title}}
       </li>
    </ul>

  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          listArr: [
            {
    
    id: 'a', title: '标题1'},
            {
    
    id: 'b', title: '标题2'},
            {
    
    id: 'c', title: '标题3'},
          ],
          listObj: {
    
    
            a: {
    
     title: '标题1' },
            b: {
    
     title: '标题2' },
            c: {
    
     title: '标题3' },
          }
        }
    }
};
</script>

Example: v-if and v-for are used at the same time, an error will be reported

2. Events

• event parameter, custom parameter
• event modifier, key modifier
• [Observation] Where is the event bound to? - event is native, the event is bound to the current element

Example: event and its parameters

<template>
  <div>
    <p>{
    
    {
    
     num }}</p>
    <button @click="increment1">+1</button>
    <button @click="increment2(2, $event)">+2</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      num: 0,
    };
  },
  methods: {
    
    
    increment1(event) {
    
    
      console.log("event##", event, event.__proto__.constructor); // 是原生的 event 对象
      console.log(event.target); // 触发事件的元素
      console.log(event.currentTarget); // 监听事件绑定的元素
      this.num++;
    },
    increment2(val, event) {
    
    
      console.log(event.target);
      this.num = this.num + val;
    },
  },
};
</script>

3. Event modifiers

// 阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式
// 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
// 只当在 event.target 是当前元素自身时触发处理函数
// 即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>

4. Key modifiers

• Hold down the modifier and click to trigger the effect
• The exact modifier allows control over events triggered by exact combinations of system modifiers

<template>
  <div>
    <button @click.ctrl="onClick">A</button>
    <button @click.ctrl.exact="onCtrlClick">A</button>
    <button @click.exact="onNullClick">A</button>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    onClick() {
    
    
      console.log('按住Ctrl，点击按钮触发 or 同时按住Ctrl+Alt/Shift 点击按钮也能触发');
    },
    onCtrlClick() {
    
    
      console.log('只有按住Ctrl，点击按钮才能触发');
    },
    onNullClick() {
    
    
      console.log('没有任何系统修饰符被按下的时候才触发');
    }
  },
};
</script>

5. Forms

• Use two-way data binding: v-model
• Common form items textarea checkbox radio select
• Modifier lazy (similar to anti-shake effect) number (only numbers are allowed) trim (remove spaces)

<template>
  <div>
    <p>输入框：{
    
    {
    
    name}} - {
    
    {
    
    lazyName}} - {
    
    {
    
    age}}</p>
    <input type="text" v-model.trim="name">
    <input type="text" v-model.lazy="lazyName">
    <input type="text" v-model.number="age">

    <p>多行文本：{
    
    {
    
    desc}}</p>
    <textarea type="text" v-model="desc"></textarea>
    <!-- 注意，<textarea>{
    
    {
    
    desc}}</textarea> 是不允许的！ -->

    <p>复选框：{
    
    {
    
    checked}}</p>
    <input type="checkbox" v-model="checked">

    <p>多选复选框：{
    
    {
    
    mchecked}}</p>
    <input type="checkbox" id="jack" value="jack" v-model="mchecked">
    <label for="jack">Jack</label>
    <input type="checkbox" id="mike" value="mike" v-model="mchecked">
    <label for="mike">Mike</label>
    <input type="checkbox" id="john" value="john" v-model="mchecked">
    <label for="john">John</label>

    <p>单选框：{
    
    {
    
    gender}}</p>
    <input type="radio" id="male" value="male" v-model="gender" />
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender" />
    <label for="female">女</label>

    <p>下拉列表选择：{
    
    {
    
    selected}}</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <p>下拉列表选择（多选）{
    
    {
    
    selectedList}}</p>
    <select v-model="selectedList" multiple>
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      name: '杂货铺',
      lazyName: '杂货铺老板',
      age: 20,
      desc: '自我介绍',

      checked: true,
      mchecked: true,
      checkedNames: [],

      gender: 'male',

      selected: '',
      selectedList: []
    };
  }
};
</script>

form effect

不积跬步无以至千里 不积小流无以成江海

Click to follow and don't get lost, continue to update...