Vue2_了解核心概念和一个示例工程
写文的目的是为了梳理知识，正如某一位面试官所说：会写并不牛，懂原理才牛
下面开始：
vue 具有较好的可维护性和可测试性
vue 是一个渐进式框架
(请忽略我这灵魂画手😉)
vue也可以进行页面分割，通过组件的方式
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个商品，可以直接弹出一个商品
页面也是直接改变的
加入计算属性
整体代码如下所示：
<!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 的这个插件也可以看内容
再次使用 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>
再加一个 input 作为交互
<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 做了交互
