Vue2_引入及基本功能

合集 - Vue(2)
1.Vue2_引入及基本功能
2.Vue2_Vue 实例
收起

文档上说，Vue 是一套用于构建用户界面的渐进式框架。

Vue 被设计为可以自底向上逐层应用

引入

这怎么体现呢，因为可以直接通过script方式引入

官方的最简单hello world的例子也是通过 script 引入的

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

也可以直接创建 .html 文件，通过下面的方式引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

核心功能

image-20250122113534665

声明式渲染

Vue.js 的核心是一个系统

  • 通过简洁的模板语法

Vue.js 使用简洁的模板语法，而 React 则是使用 JSX

它的模板语法接近普通 HTML，但加入了数据绑定和指令

例如：使用 {{ }} 语法将数据绑定到页面中，使用 v-if 和 v-for 等指令来进行条件渲染和列表渲染

  • 声明式地

视图层框架通常分为声明式和命令式，像 jQuery 就是命令式框架，而 Vue 是声明式框架

不需要写代码来操作 DOM 元素（如 document.getElementById 或 innerHTML），只需要在模板中绑定数据（如 {{ message }}）

Vue 会根据数据变化自动更新 DOM

  • 将数据渲染进 DOM

数据渲染到 DOM 是指通过 Vue 的数据绑定功能，将 JS 数据（如：变量、对象或数组）与 HTML 页面上的元素进行关联

当数据发生变化时，Vue 会自动更新与之相关联的 DOM 部分

文本插值

image-20250121153206878

如上图代码所示，数据和 DOM 已经建立关联了，是响应式的了

注意，如果我们后面进行交互，比如修改 app.message，不再和 HTML 进行交互了

交互发生在新创建的 Vue 实例的内部，HTML 只是一个入口，我们的 Vue 实例其实是挂载在一个 DOM 元素上

这里是 #app

上面是文本插值，下面我们再来看看另一种方式

指令

通过这种方式来绑定元素 attribute（属性）：

    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
image-20250121160708399

这里的 v-bind attribute 也就是指令

指令带有前缀 v-

表示是 Vue 提供的特殊 attribute

它们会在 DOM 上应用特殊的响应式行为

上面指令的意思是：将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致

可以在控制台中用命令修改：

image-20250121161504048

绑定了 title 的 attribute 的 HTML 更新了

image-20250122103755519

条件与循环

v-if 和 v-for 是不建议在一个 HTML 元素中同时使用的，Vue2 和 Vue3的优先级也不同，会增加心智负担

v-if

控制切换一个元素是否显示可以使用 v-if

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

使用前

image-20250121164453662

使用后

image-20250121164515819

上面例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute

还可以绑定到 DOM 结构

此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果

过渡效果还挺有意思的

v-for

还有很多指令，例如：v-for指令可以绑定数组的数据来渲染一个项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

啪的一下就 push 进去了

image-20250121165658315

处理用户输入

v-on

为了让用户和我们的应用进行交互，我们需要添加一个事件监听器，使用的是 v-on 指令

通过该指令调用在 Vue 实例中定义的方法

上代码

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
image-20250122110015009 image-20250122105946698

在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM

所有的 DOM 操作都由 Vue 来处理，我们编码只需要专注于逻辑层即可，也就是编写声明式代码

v-model

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
image-20250122110146353 image-20250122105641815

组件化应用构建

组件系统是 Vue 的另一个重要概念

抽象的意思是把复杂的 UI 和逻辑简化成可管理、可操作的小块

它通过将复杂的应用分解为更小、更独立且通常可复用的部分（即组件），使得我们可以更高效地构建大型应用

几乎任意类型的应用界面都可以抽象为一个组件树：

img

在 Vue 里，一个组件本质上是 一个拥有预定义选项的 一个 Vue 实例

在 Vue 中注册组件很简单：

前面是组件名，后面放组件内容

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

可以用组件名的形式放入 HTML

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但这样如果放多个 <todo-item></todo-item> 内容都一样的

显得 low 了

应该做到父作用域将数据传到子组件

下面我们修改组件定义，使它能够接受一个 prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个"prop"，
  // 类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

可以使用 v-bind 指令将待办项传到循环输出的每个组件中

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，
	  稍后再作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

模板里面写了 todo 传入的内容，还给了 key 的内容

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
image-20250122225817677

出现了循环出来的三个组件

子单元通过 prop 接口与父单元进行了良好的解耦

父单元就是 #app-7，子单元是 todo-item

组件的应用模板可以长这个样子

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Vue 组件也类似于自定义组件

不过 Vue 组件相比于普通的 HTML 自定义元素有一些优势和特性

  • 跨组件数据流
    • 父组件通过 props 将数据传递给子组件
    • 子组件通过 $emit 触发事件，通知父组件某些状态发生变化
    • Vue 提供状态管理工具（如 Vuex、Pinia），可以实现复杂的跨组件共享数据
  • 自定义事件通信
    • 组件可以通过 $emit 方法发送自定义事件，父组件可以通过 v-on 或 @ 监听这些事件
  • 构建工具集成
    • 如：Webpack、Vite

小记

v-bind：绑定元素 attribute

v-on：添加一个事件监听器

END

本文介绍了，Vue 核心功能，或者说最基本的功能，包括声明式渲染、条件与循环、处理用户输入、组件化应用构建等，声明式渲染包括文本插值和指令两种方法；条件与循环主要是 v-if 和 v-for 这两个指令；处理用户输入涉及 v-on 和 v-model；组件化应用中指明一个组件本质上是一个拥有预定义选项的 Vue 实例

posted @   goicandoit  阅读(26)  评论(0)  编辑  收藏  举报
相关博文：
· Vue2_Vue 实例
· Vue2_了解核心概念和一个示例工程
· Vue 起步
· VUE2教程-基础-简介
· Vue2.0 浅学笔记
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛