Vue简介

最新推荐文章于 2023-06-15 14:48:44 发布

喜欢木木

最新推荐文章于 2023-06-15 14:48:44 发布

阅读量1.2k

点赞数 2

分类专栏： JavaWeb基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fj123321666/article/details/129743826

版权

JavaWeb基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue简介

1.什么是Vue

Vue官网:

Vue.js (vuejs.org)

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2.快速入门

我们可以通过cdn来引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

我们来创建第一个Vue界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<div id="app">
    {{message}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    });
</script>
</body>
</html>

在这里插入图片描述

注意：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
app容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

3.数据绑定

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：

双向绑定一般都应用在表单类元素上（如：、、等）

v-model:value可以简写为v-model，因为v-model默认收集的就是value值

4.MVVM模型

在这里插入图片描述

MVVM模型：
- M：模型（Model），data中的数据
- V：视图（View），模板代码
- VM：视图模型（ViewModel），Vue实例

5.Vue中的数据代理

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据

基本原理：
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

6.事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <button v-on:click="sayHi">点我</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "桑榆嘻嘻嘻"
    },
    methods: {
      sayHi :function () {
        alert(this.message);
      }
    }
  });
</script>
</body>
</html>

在这里插入图片描述

使用v-on:xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

Vue中的事件修饰符：

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

7.条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h1 v-if="type === 'A'">A</h1>
  <h1 v-else-if="type === 'B'">B</h1>
  <h1 v-else>NO</h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      type: "A"
    }
  });
</script>
</body>
</html>

v-if：

写法：
1. v-if="表达式"
2. v-else-if="表达式"
3. v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

8.列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
  <li v-for="item in items">
    {{item.message}}
  </li>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      items: [
        {message:"桑榆1"},
        {message:"桑榆2"},
        {message:"桑榆3"}
      ]
    }
  });
</script>
</body>
</html>

v-for指令：

用于展示列表数据
语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

喜欢木木

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue简介

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
复制链接

扫一扫