Vue2_了解核心概念和一个示例工程

Vue2_了解核心概念和一个示例工程

写文的目的是为了梳理知识，正如某一位面试官所说：会写并不牛，懂原理才牛

下面开始：

vue 具有较好的可维护性和可测试性

vue 是一个渐进式框架

Vue 被设计为可以自底向上逐层应用，如下图所示

(请忽略我这灵魂画手😉)

ab651858da6e43f502c15213b3115e1

vue也可以进行页面分割，通过组件的方式

90bc75b2300a9ed31d155e5cb3ba179

Vue 实例挂载方式

下面上一个列表界面

通过 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 引入 Vue.js 库

其中 el 是 element 的缩写

并且 通过 el: '#app' 挂载 Vue 实例

这种方法常见用简单的 Vue 应用或者单页面展示

可以 直接操作DOM ：通过 el 直接挂载到 DOM 元素，可以直接在 el 中使用 Vue 实例的绑定数据和方法。

下面代码中数据是放在 data 对象中的

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品列表</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul v-if="products.length > 0">
      <li v-for="product in products" :key="product.id">
        <strong>{{ product.name }}</strong> - ¥{{ product.price }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        products: [] // 商品数据
      },
      mounted() {
        // 组件挂载后，调用获取商品数据的方法
        this.fetchProducts();
      },
      methods: {
        fetchProducts() {
          // 模拟从 API 获取商品数据
          fetch('https://api.myjson.com/bins/74l63') // 这里可以替换为真实的 API URL
            .then(response => response.json()) // 解析 JSON 数据
            .then(json => {
              // 更新 products 数据
              this.products = json.products;
            })
            .catch(error => {
              console.error('获取商品数据失败:', error);
            });
        }
      }
    });
  </script>
</body>
</html>

我们在项目中常用的方法是 通过 new Vue() 创建实例

new Vue({
  el: '#app',
  render: h => h(App) // 渲染根组件
})

主要区别总结：

特性 通过 new Vue() 和 render 通过 el: '#app' 挂载 Vue 实例
结构 组件化结构，适合中大型项目 非组件化，适合简单应用
模板 使用 .vue 文件和 render 函数 直接在 HTML 中写模板
应用复杂度 适应复杂的单页面应用 适合快速开发和简单展示
扩展性 易于维护和扩展，支持路由、状态管理 难以扩展，适合简单页面或小项目
组件化 支持完整的组件化，多个 Vue 组件 不支持组件化，整个应用为一个 Vue 实例

何时使用哪种方式？

  • 使用 new Vue() 和 render 的方式：当你开发一个需要组件化的较复杂 Vue 应用时，推荐使用这种方式。它可以帮助你将应用的不同部分拆分成可重用的组件，易于管理和维护。
  • 使用 el: '#app' 的方式：当你只需要展示一些简单的内容或者做一个小型的 Vue 应用时，这种方式更加快速、简洁，适合快速原型设计或者小型项目。

响应式

数据是响应式的

比如我们模拟了3个商品，可以直接弹出一个商品

使用命令 app.products.pop()，注意这里的 app 指的是 const app 那创建的 Vue 实例对象

image-20250119212003982

页面也是直接改变的

加入计算属性

image-20250119213454715

整体代码如下所示：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>商品列表</h1>
        <ul v-if="products.length > 0">
            <li v-for="product in products" :key="product.id">
                <strong>{{ product.name }}</strong> - ¥{{ product.price }}
            </li>
        </ul>
        <p v-else>加载中...</p>
        <h1>商品总数:{{totalProducts}}</h1>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                products: [] // 商品数据
            },
            mounted() {
                // 组件挂载后，调用获取商品数据的方法
                this.fetchProducts();
            },
            computed: {
                totalProducts() {
                    // 计算商品总数量
                    return this.products.reduce((sum, product) => sum + product.quantity, 0);
                }
            },
            methods: {
                fetchProducts() {
                    this.products = [
                        { id: 1, name: '商品1', price: 100, quantity: 1 },
                        { id: 2, name: '商品2', price: 200, quantity: 2 },
                        { id: 3, name: '商品3', price: 300, quantity: 3 }
                    ]
                }
            }
        });
    </script>
</body>

</html>

vue 的这个插件也可以看内容

image-20250119224706955

再次使用 app.products.pop()

列表同步更新，商品总数也同步更新

我们再加一些交互，通过button添加

        <ul v-if="products.length > 0">
            <li v-for="product in products" :key="product.id">
                <strong>{{ product.name }}</strong> - ¥{{ product.price }}
                <button @click="product.quantity+=1">Add</button>
            </li>
        </ul>
image-20250120104055234

再加一个 input 作为交互

image-20250120104331959 
        <ul v-if="products.length > 0">
            <li v-for="product in products" :key="product.id">
                <input type="number" v-model.number="product.quantity">
                <strong>{{ product.name }}</strong> - ¥{{ product.price }}
                <button @click="product.quantity+=1">Add</button>
            </li>
        </ul>

这里 v-model 用到了.number - 输入字符串转为有效的数字

可以确保绑定的值在双向绑定时总是数字类型，避免类型问题出错

END

本文做了简要的 Vue2 核心概念和示例工程介绍，包括两种 Vue 实例的挂载方式，并对比两者的区别；简单介绍了响应式，包括 data 对象内的数据，使用计算属性，使用 v-model 双向绑定，使用了 button 和 input 做了交互

posted @   goicandoit  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
· Vue2_引入及基本功能
· Vue2_Vue 实例
· 【vue核心】1.vue简介
· vue2笔记完整版
· 如何优雅的学习Vue之基础入门篇(一)
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛