Vue简介-CSDN博客

本文链接：https://blog.csdn.net/qq_69907434/article/details/142320333

文章目录

1.Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动Vue的官方网站是: https://cn.vuejs.org/

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量：~33.46KB min+gzip，无依赖。
快速:精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装，无缝融入你的工作流。

如果你喜欢下面这些，那你一定会喜欢 Vue.js：

可扩展的数据绑定机制
原生对象即模型
简洁明了的 API
组件化 UI 构建
多个轻量库搭配使用

2.vue.js的入门

2.1 入门程序

2.1.1 入门程序_hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.global.js"></script>
</head>

<body>
    <!--Vue的入门程序:HelloWorld-->
    <div id="app">
        <h1>{{message}}</h1><!--使用{{}}来获取Vue中data的数据 -->
    	<button @click="change">按钮</button>
    </div>  
    <script>
        const { createApp } = Vue
        createApp({
            data() {  //data: 表示需要展示的数据
                return {  
                    message: 'Hello Vue!'
                }
            },
            methods:{
                change(){
                    this.message = 'Hello world';
                }
            }
        }).mount('#app') //指明数据展示在哪个view里面 挂载点
    </script>
</body>

</html>

显示的效果:
在这里插入图片描述
我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。上面的代码中的{{message}}将会被Vue的数据对象message属性值替换掉,而且当message的值改变时,文本中的值也会联动地发送变化

data属性

data属性是传入一个函数，并且该函数需要返回一个对象：

在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
所以我们在template或者app中通过 {{message}} 访问message，可以从对象中获取到数据；
所以我们修改message的值时，app中的 {{message}}也会发生改变；

methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法：

这些方法可以被绑定到模板中；
在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；

2.2 插值表达式

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。{{}}标签也接收表达式形式的值,表达式可由JavaScript表达式或过滤器构成.过滤器可以没有,可以多个.

表达式是各种数值,变量,运算符的综合体,也可以是JavaScript的一些函数,代码如下:
在这里插入图片描述
但是{{}}不能包含if/else等复杂的表达式,比如下列表达式是错误的

2.3MVVM模型

Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.

M: 模型(Model),对应data中的数据

V: 视图(View): 模板

VM:视图模型(ViewModel): Vue对象实例
在这里插入图片描述

3.vue的常见指令

Vue.js指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它扩展了HTML标签的功能.

Vue指令的作用是通过v-属性名,实现对DOM的响应式加载

3.1 v-bind

v-bind指令用于绑定属性可以简写成 :

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

绑定属性我们使用v-bind：

缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
修饰符：
.camel - 将 kebab-case attribute 名转换为 camelCase。
用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

3.2 class与style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

3.2.1 class绑定

使用语法:

:class=’xxx’

值的分类:

表达式是字符串:’classA’ 适用场景:样式的类名不确定,需要动态指定

表达式是对象: {classA:isA,classB:isB} 适用场景: 个数,类名确定,但是不确定使用

表达式是数组:[‘classA’,’classB’] 适用场景:类名不确定,个数也不确定

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

  <div id="app">
    <!-- 1.基本绑定class -->
    <h2 :class="classes">Hello World</h2>

    <!-- 2.动态class可以写成三目运算 -->
    <button :class=" isActive ? 'active': '' " @click="btnClick">我是按钮</button>

    <!-- 2.1.对象语法的基本使用(掌握) -->
    <button :class="{ active: isActive }" @click="btnClick">我是按钮</button>

    <!-- 2.2.对象语法的多个键值对 -->
    <button :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.3.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.4.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="getDynamicClasses()" @click="btnClick">我是按钮</button>

    <!-- 3.动态class可以写数组语法(了解) -->
    <h2 :class="['abc', 'cba']">Hello Array</h2>
    <h2 :class="['abc', className]">Hello Array</h2>
    <h2 :class="['abc', className, isActive? 'active': '']">Hello Array</h2>
    <h2 :class="['abc', className, { active: isActive }]">Hello Array</h2>
  </div>
  
  <script src="./js/vue.global.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          classes: "abc cba nba",
          isActive: false,
          className: "why"
        }
      },

      methods: {
        btnClick: function() {
          this.isActive = !this.isActive
        },

        getDynamicClasses: function() {
          return { active: this.isActive, why: true, kobe: false }
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

3.2.2 style绑定

尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：

:style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

在这里插入图片描述

注意:

推荐把样式属性名要把-改成小驼峰的写法, 比如有一个样式属性名为font-size,那在:style中就要写成fontSize. 但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：
<div :style="{ 'font-size': fSize + 'px' }"></div>
样式表达式与样式表达式之间使用逗号分割

3.3 v-text

v-text指令: 更新元素的 textContent,注意v-text对于内容是包含HTML标签的,不会进行HTML解析,只是作为普通字符串.
在这里插入图片描述

3.4 v-html

v-html: 数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令
在这里插入图片描述

3.5 v-if

v-if 指令条件渲染,可以根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除
在这里插入图片描述
如果想切换多个元素,则可以使用元素当作包装元素,在元素上使用v-if, 就可以进行多个元素的切换

v-else 指令: 表示 v-if 的“else 块”：

v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次
在这里插入图片描述

注意:
v-else,v-else-if必须紧跟在v-if或者v-else-if元素的后面

3.6 v-show

v-show指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.
在这里插入图片描述

v-if与v-show的比较:

首先，在用法上的区别：

v-show是不支持template；
v-show不可以和v-else一起使用；

其次，本质的区别：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

开发中如何进行选择呢？

如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
如果不会频繁的发生切换，那么使用v-if；

3.7 v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，也就是循环指令.其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
  return {
    names:["lily","lucy","hanmeimei","lilei"]
  }
}

<ul>
    <li v-for="item in names">
        {{item}}
    </li>
</ul>

效果:
在这里插入图片描述
如果想获取数组中的下标, ()的顺序是: 数组的元素, 数组的下标

遍历的是一个json对象: ()的顺序是: json对象的属性值,对象的属性名,下标

data() {
  return {
    names:["lily","lucy","hanmeimei","lilei"],
    json:{a:"dog",b:"cat",c:"peg"}   
  }
}

<ul>
    <!--注意:顺序: 第一个位置是value, 第二个是key,第三个是 index-->
    <li v-for="(value,key,index) in json">
        {{value}} ==>{{key}} ==>{{index}} 
    </li>
</ul>

运行效果:
在这里插入图片描述
对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<div v-for="item of items"></div>

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

v-for中通过key管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key
<div v-for="item in items" :key="item.id">

</div>
推荐:在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key

3.8 v-model

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

比如用户在登录、注册时需要提交账号密码；
比如用户在检索、创建、更新信息时，需要提交一些数据；

这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./js/vue.global.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		const {createApp} = Vue
        createApp({
            data(){
                return {
                   msg:'helloworld'
                }
            }
        }).mount("#box")
	};
	</script>
</head>
<body>
	<!--v-model指令-->
	<div id="box">
		<input type="text" v-model='msg'>
		<hr/>
		{{msg}}
	</div>
</body>
</html>

效果:
在这里插入图片描述

注意：使用v-model指令的标签也必须位于Vue控制的标签内部。

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

绑定textarea

<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

v-model绑定checkbox：单个勾选框和多个勾选框

单个勾选框：

v-model即为布尔值。

此时input的value属性并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。

v-model绑定radio，用于选择其中一项；

<select> 会绑定 value property 并侦听 change 事件：

v-model绑定select 单选和多选两种情况

单选：只能选中一个值

v-model绑定的是一个值；当我们选中option中的一个时，会将它对应的value赋值到fruit中；

多选：可以选中多个值

v-model绑定的是一个数组；

当选中多个值时，就会将选中的option对应的value添加到数组fruit中

v-model 会忽略任何表单元素上初始的 value、checked 或 selected 属性。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

修饰符

.lazy - 取代 input 监听 change 事件

在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

如果不加.lazy时,你修改了文本框的值,对应{{msg}}会同步的变化,但是如果添加了.lazy修饰符时,你在修改文本框的值时,{{msg}}的值不会同步的变化,而是当该文本框失去焦点时,才去改变{{msg}}的值.

.number - 输入字符串转为数字

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

我们先来看一下v-model绑定后的值是什么类型的：

如果我们希望转换为数字类型，那么可以使用 .number 修饰符：

注意:

.number修饰符并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型

.trim - 输入首尾空格过滤

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：