Vue学习1：基础知识（简介、指令语法、补充知识）_vue mustache method computed(1)

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    computed: {
      //常用写法 实际上只是get（一个属性）
      // fullname: function() {
      // return this.firstname + ' ' + this.lastname;
      // }

      //真正的规范写法 但是一般不写set方法 只读属性
      fullname: {
        set: function(newValue) {
		  const names = newValue.split(' ');
          this.firstname = names[0];
          this.lastname = names[1];
        },
        get: function() {
          return this.firstname + ' ' + this.lastname;
        }
      }

computed计算属性的好处：多次调用get属性，里面的函数只调用一次，之后调用会直接使用缓存，只有在更新了之后，才会重新调用函数，选择使用computed而不是mustache或者method能对性能有较大改善。

4. 事件监听 v-on

v-on基本使用

  <button v-on:click="increment">+</button>
  <!-- 语法糖-->
  <button @click="increment">+</button>

添加参数
注意参数要传入基本数据类型，例如字符串要加单引号 不然会被当做变量

v-on修饰符

<div id="app">
  <!-- 1.阻止事件冒泡 .stop-->
  <div @click="divclick">
    <button @click.stop="btnclick">按钮</button>
  </div>

  <!-- 2.prevent 阻止默认事件-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!-- 3.监听某个键盘事件 enter回车按钮-->
  <input type="text" @keyup.enter="keyup">

  <!-- 4.once 只触发一次回调-->
  <button @click.once="onceclick">只响应一次</button>
</div>

5. 条件判断v-if、v-else、v-else-if

小问题：
存在虚拟dom的机制，在数据改变时，会复用已经存在的元素（用户输入内容也保存下来了），并修改变化的部分，再显示出来
不想复用的话，可以使用key属性，当key值不同时，不会复用（其实也就是更好的复用）

6. 显示v-show

注意v-show和v-if的区别：

<!-- v-if：当条件为false时，该dom元素不存在-->
  <h2 v-if="isShowed" id="aaa">{{message}}</h2>
<!-- v-show：当条件为false时，添加行内样式display：none，实际存在于dom树中-->
  <h2 v-show="isShowed" id="bbb">{{message}}</h2>

选择：当显示与隐藏切换很频繁时，使用v-show，当只有一次切换时，使用v-if

7. 遍历数据v-for

遍历数组和对象

<!-- 遍历数组-->
    <li v-for="item in names">{{item}}</li>
    <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
  </ul>
  <ul>
<!-- 遍历对象-->
    <li v-for="item in person">{{item}}</li>
    <li v-for="(value, key, index) in person">{{key}}.{{value}}.{{index}}</li>
  </ul>

使用v-for是添加key属性：更好的复用
当有key时，先匹配对应的对应的key值，在创建新的并插入
因此key的值要一一对应，譬如：<li v-for="item in letter" :key="item">{{item}}</li>（没有重复元素的前提下，这是一一对应的）

数组中的响应式方法：
因为Vue是响应式的，所以当数据变化时，Vue会自动检测数据变化，视图会发生对应的更新
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

删除元素/插入元素/替换元素：
删除：splice(开始的位置, 删除的个数) splice(开始的位置) 后面的全部删除
替换：splice(开始的位置, 删除的个数, 追加元素1, 追加元素2...) Vue.set(要修改的对象, 索引值, 修改的值)
插入：splice(开始的位置, 0, 追加元素1, 追加元素2)

注意 通过索引值来修改数据，不是响应式的

8. 表单绑定v-model

基本使用：
mustache语法/v-bind是单向的，就是数据发生变化，会显示在页面上，但是反过来不行
v-model是双向绑定的，数据和UI对应变化，应用于input 和 textarea
<input type="text" v-model="message"> 相当于 <input tyoe="text" :value="message" @input="message=$event.target.value">
v-model其实是一个语法糖，包含两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件

v-model：radio
数据中的sex和value绑定了，此时，可以不用添加name="sex"也可以实现互斥选择

    <div id="app">
        <label for="male">
            <input type="radio" id="male" name="sex" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female" name="sex" value="女" v-model="sex">女
        </label>
        <h2>{{sex}}</h2>
    </div>

v-model：checkbox
把选中的和hobbies联系起来

    <div id="app">
        <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
        <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" id="agree" value="游泳" v-model="hobbies">游泳
        <h2>{{hobbies}}</h2>
    </div>

v-model：select

mySelect：“”, mySelects：[]

值绑定：
通过v-bind动态绑定value的值（originHobbies可能是网络获取的数据）

<label v-for="item in originHobbies" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} 
</label>

修饰符：
v-model.lazy：不及时双向绑定，而是当失去焦点或者回车时才更新数据
v-model.number：输入框获得的都是字符串类型，使用此修饰符可以转成数字类型，方便后续处理
v-model.trim：过滤内容两边的空格

三、其他补充知识

1. ES6对象增强写法

angular：google 实际是用typescript
typescript：Microsoft 增加了类型检测
flow：Facebook
react：Facebook 用JavaScript

2. js高阶函数filter/map/reduce

命令式编程：一步一步给指令执行
声明式编程：先把数据定义好，然后直接拿来使用， vue/react

面向对象编程：第一公民是对象
函数式编程：第一公民是函数

filter：
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
回调函数返回一个布尔值，若为true，则加入新数组中，false则过滤掉

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-FFroNFCQ-1715836836096)]

[外链图片转存中…(img-OjWGxOtG-1715836836097)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】