一幅长文细学Vue（二）——Vue基础入门

ArimaMisaki

已于 2022-10-13 16:31:48 修改

阅读量631

点赞数

分类专栏：一幅长文细学Vue 文章标签： vue.js javascript 前端

于 2022-08-28 11:20:03 首次发布

本文链接：https://blog.csdn.net/chengyuhaomei520/article/details/126567787

版权

一幅长文细学Vue 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

2 Vue基础入门

摘要

在本文中，我们会快速地入门Vue。主要了解的是Vue各种指令语法。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码。

作者：来自ArimaMisaki创作

2.1 概述

2.1.1 Vue是什么

说明：Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

2.1.2 和React的对比

相同点：React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统。除此之外，他们

都有支持native的方案，React的RN，vue的Wee下
都支持SSR服务端渲染
都支持props进行父子组件间的通信

在性能方面上，React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

不同点：

数据绑定方面，vue实现了数据的双向数据绑定，react数据流动是单向的
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
state对象在react应用中不可变的,需要使用setState方法更新状态；在vue中，state对象不是必须的，数据由data属性在vue对象中管理（如果要操作直接this.xxx）
组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即all in js； Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html、css、js写在同一个以vue为后缀名的文件中。

2.1.3 MVC模式

说明：我们在开发客户端的时候常常采用MVC模式；MVC模式指的是采用分层设计，使用数据模型，页面视图，页面控制器来设计代码的架构。

尽管MVC 是开发客户端最经典的设计模式，但是 MVC 有让人无法忽视的严重问题。在通常的开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加，controller的处理逻辑会变得越来越复杂，controller也就慢慢的变得越来越胖，这就造成了Controller逻辑复杂，难以维护。为了更好地管理代码，更方便地扩展业务，为必要为controller瘦身，于是MVVM便呼之欲出。

2.1.4 MVVM模式

说明：MVVM（ Model View-Model Controller View）就是MVC设计模式的更先进进化，符合它进化的方向。每个人对MVVM了解不同和使用技术不同，最终实现的MVVM架构也不同。

MVVM是指数据模型M，视图模板V，视图模型VM。vue中的MVVM体现在其双向数据绑定上，如输入框输入数据的时候，对应的插值表达式也会发生改变。

Model层：通过ajax等api完成服务端到客户端model的同步
View层：动态视图模板，展示的是VM的数据和状态，不处理状态，做的只是数据绑定的声明、指令的声明、事件绑定的声明
VM层：把View需要的层数据暴露，对View层的数据绑定声明、指令声明、事件绑定声明负责，处理View层声明的业务逻辑。绑定属性监听，当VM数据变化，V会得到更新；当V中声明了数据的双向绑定，（通常表单元素），框架就会监听V表单值的变化，一旦变化了VM中的数据也会自动更新

虽然Vue给人感觉像是采用了MVVM模式，但在组件上Vue提供了$refs让Model可以直接操作View，所以我们说实际上Vue完全遵守MVVM设计模式。

2.2 基本操作

2.2.1 单文件组件

说明：在Vue项目中我们常常将一整个项目拆分成多个组件。举一个比较生动的例子，我们将要用积木制作一个超级玛丽，那我们需要将一个超级玛丽分为头、身子、脚等一系列组件。在后续的开发中，如果我们还想做一个不一样的超级玛丽，则我们可以找找以往的组件，看看有没有组件可以复用。

在Vue项目中，组件以.vue的文件形式存在。它也被成为单文件组件。其结构分为template、css、script。

2.2.2 API风格

说明：Vue的组件可以按照两种不同的风格进行书写：选项式API和组合式API。

选项式API：如果使用选项式API，我们可以用包含多个选项对象来描述组件的逻辑。选项有很多种，我们会在后续一一介绍。在初级学习阶段，我们大多书写选项式API。

组合式API：我们可以通过导入的API函数来描述组件逻辑。

2.2.3 声明式渲染

说明：Vue的核心功能是声明式渲染。通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。这正是MVVM的体现。

我们可以在data组件选项中来声明响应式状态，该选项应该是一个返回对象的函数。

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      counter: {
        count: 0
      }
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

2.2.4 属性绑定

说明：我们可以使用v-bind:指令来绑定一个属性值，由于v-bind经常被使用，所以其可以被简写为:。

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

2.2.5 事件监听

说明：我们可以使用v-on来监听DOM事件，其简写为@。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods:{
    increment(){
      this.count++
    }
  }
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button @click="increment">count is: {{ count }}</button>
</template>

2.2.6 表单绑定

说明：如果我们希望一个通过一个表单改变数据，那么我们可以使用v-on+v-bind完成这样的操作，但是Vue为我们提供了语法糖v-model，它通常用于双向绑定。

语法糖：简化语法，让你觉得语法不再枯燥无味。

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

2.2.7 条件渲染

说明：我们可以使用v-if，v-else-if，v-else来进行条件渲染，其中v-if和v-else-if对应的值只有为真的情况下才会渲染。

<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome
    }
  }
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

2.2.8 列表渲染

说明：当我们想要渲染多个li标签时，我们可以将标签中的内容置于数组中，并使用v-for指令。

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

2.2.9 生命周期初探

说明：目前为止，我们并没有实际动手去操作DOM，但是有时候我们也有要手动操作DOM的情况。Vue为我们提供了模板引用，具体的做法是在标签中使用ref属性，之后我们可以在script标签中使用this.$refs.p来访问操作该标签对应的DOM。

我们可以通过mounted()函数来操作DOM，它常被称为生命周期钩子，因为它允许我们注册一个在组件特定生命周期调用的回调函数。

<script>
export default {
  mounted(){
    this.$refs.p.textContent = 'I like you'
  }
}
</script>

<template>
  <p ref="p">hello</p>
</template>

2.2 指令汇总

插值表达式：从data中渲染文本，可在里面使用js表达式
v-text：从data中渲染文本
v-html：从data中渲染标签及其内容
v-bind：从data中渲染属性，可简写为:
v-on事件：从methods中获取事件，可简写为@事件，如@click
v-model：用于双向绑定，只能用于表单元素。当需要维护组件内外数据的同步时，也可以使用该指令
v-if：条件渲染指令。v-if会动态创建或移除DOM元素，具有切换开销
v-else：配合v-if使用
v-else-if：配置v-if使用
v-show：条件渲染指令。v-show会动态地显示与隐藏，本质是display:none，具有渲染开销
v-for：列表循环指令。从data中的列表中循环获取数据，语法是元素 in 列表名或==(元素名,索引) in 列表名==

2.3 事件对象

说明：

在原生DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。同理在v-on指令所绑定的事件处理函数中，同样可以接收到事件对象event。
事件对象event必须写在参数列表的第一个，如果不想写在第一个，请在传参时事件变量前加上$。

<body>
    <div id = "app">
        <b>count的值为：{{count}}</b>
        <button v-on:click="addCount">+1</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count:0,
            },
            methods:{
                addCount(e){
                    const nowBgColor = e.target.style.backgroundColor;
                    e.target.style.backgroundColor = nowBgColor === 'red'?'':'red';
                    this.count+1;
                }
            }
        })
    </script>
</body>

2.4 事件修饰符

事件修饰符	说明
.prevent	阻止默认行为（阻止a链接的跳转，阻止表单的提交）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身时触发事件处理函数

2.5 按键修饰符

事件修饰符	说明
@keyup.enter	按enter键后会发生对应事件
@keyup.esc	按esc键后会发生对应事件

<body>
    <div id="app">
        <input type="text" @keyup.enter = "submit" @keyup.esc = "clearInput">
    </div>

    <script src = "./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                submit(e){
                    console.log('按下了enter键，最新的值是：'+e.target.value);
                },
                clearInput(e){
                    e.target.value = '';
                },
            }
        })
    </script>
</body>

2.6 v-model修饰符

说明：

使用.trim可以使得文本框输入的空格传到后台时被忽略
使用.number可以保重转换后仍为数值
使用.lazy可以让文本框失去焦点后再更新而非实时更新

<body>
    <div id="app">
        <!-- 使用.trim可以是的文本框输入的空格传到后台时被忽略 -->
        姓名：<input type="text" v-model.trim = "username">
        <hr>
        <!-- 使用.number可以保重转换后仍为数值 -->
        年龄：<input type="text" v-model.number="age">
        <hr>
        <!-- 使用.lazy可以让文本框失去焦点后再更新而非实时更新 -->
        地址：<input type="text" v-model.lazy = "address">
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'ArimaMisaki',
                age:13,
                address:'北京市',
            }
        })
    </script>
</body>

2.7 使用key来维护列表状态

引入：在我们使用v-for指令时，常常会因为添加或删除数组的元素，导致维护的li标签顺序与想象中不符。

说明：在标签中添加key属性，值为列表中的某个值。相当于数据库中的主键。通常列表指定值最好是id。key能够维护表单的状态。

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>

        <ul>
            <li v-for = "{user,index} in userlist" :key = "user.id">
                <input type="checkbox">
                姓名:{{user.name}}
            </li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                userlist: [
                    { id: 1, name: 'zs' },
                    { id: 2, name: 'ls' }
                ],
                name: '',  
            }
        })
    </script>
</body>