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

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

文章目录

• 一、Vue简介
• 二、Vue语法
• • 1. 简单指令
    • 2. v-bind 动态绑定属性
    • 3. 计算属性computed
    • 4. 事件监听 v-on
    • 5. 条件判断v-if、v-else、v-else-if
    • 6. 显示v-show
    • 7. 遍历数据v-for
    • 8. 表单绑定v-model
• 三、其他补充知识
• • 1. ES6对象增强写法
    • 2. js高阶函数filter/map/reduce

一、Vue简介

vue全家桶：core+vue-router+vuex
vue特点：
1.解耦视图和数据
2.可复用的组件
3.前端路由技术
4.状态管理
5.虚拟DOM

vue安装方式：

原生js编程范式：命令式编程
vue：声明式编程

vue的MVVM：


vue传入的option：

vue生命周期：

生命周期解释：Vue实例中生命周期created和mounted的区别(具体细节分析)。

二、Vue语法

1. 简单指令

mustache：{{}}，里面可以跟变量和表达式，响应式改变
v-once：{{}}不能改变内容
<p v-once>{{message}}</p>
v-html：设置元素的innerHTML，可以解析html结构
<p v-html="message"></p>
v-text：设置标签内容，会替换全部内容，支持表达式，只能解析文本
<p v-text="message"></p>
v-pre：原封不动显示，不做解析,显示{{message}}
<p v-pre>{{message}}</p>
v-cloak：在vue解析之前 p标签中包含了v-cloak属性，解析完成之后就没有这个属性（少用）
<p v-cloak>{{message}}</p>

2. v-bind 动态绑定属性

缩写（：属性）

常用:class="{类名1：boolean，类名2：boolean}"
:style="{属性名1：变量（字符串），属性名2：变量（字符串）}"

3. 计算属性computed

    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"也可以实现互斥选择

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

性能

linux