vue基础语法-术语，实例选项，系统指令，过滤器

发布日期：2021-05-15 00:08:05 浏览次数：19 分类：精选文章

本文共 1834 字，大约阅读时间需要 6 分钟。

基础-vue 特点和开发指南

Vue.js 是一个灵活且高效的前端框架，适合构建单页应用（SPA）。以下将是它的主要特点及开发指南。

Vue 的特点

数据驱动开发

Vue 的核心理念是通过数据驱动来操作视图，这使得开发者仅需关注数据的变化，而无需直接操作 DOM。Vue 代替了传统的 DOM 操作，实现了视图与数据的高度解耦。

MVVM 模型

Vue 采用 MVVM（模型视图控制器）架构：

模型 (Model)：负责数据存储，通过双向绑定与视图自动同步。

视图 (View)：负责呈现 UI，通过指令语法与数据关联。

控制器 (Controller)：负责逻辑处理，反应用户交互的事件并更新数据。

组件化支持

Vue 允许开发者使用组件化思想，实现代码的复用和模块化管理，提升开发效率。

响应式数据

Vue 的数据对象是响应式的，属性变化会自动更新相关 DOM，开发者无需手动操作 DOM，简化了开发流程。

适合单页应用开发

Vue 的设计理念非常适合构建 SPA，减少了传统多页面应用开发的复杂性。

灵活的安装方式

Vue 可以通过多种方式安装：

在线 CDN：直接引入 Vue.js 文件。

本地文件引入：下载并本地安装 Node 包。

** npm 安装**：通过 npm 包管理工具安装。

广泛应用

Vue 已成为前端开发的主流框架，其语法和模式被其他框架广泛借鉴，例如 React 和 Angular。

Vue 开发入门

1. Hello World示例

// HTML
   
// JSnew Vue({  el: '#app',  data: {    // 初始数据    // ...  }})

el 选项：指定 Vue 实例管理的 DOM 视图（通常为.getElementById() 所返回的元素）。

1. data 选项：定义响应式数据对象。
2. 1. methods 选项：定义可调用方法。
  2. 1. 计算属性：通过 computed 选项实现复杂逻辑。

2. 数据绑定

使用 v-model 绑定表单元素

用户名：{{ username }}

v-model 实现双向绑定（数据 ↔ DOM），常用于文本输入、选择框、复选框等表单元素。

绑定列表项的唯一性


     
        {{ item.name }}

使用 :key="item.id" 为列表项分配唯一标识符，提升性能和用户体验。

3. 指令 (Directives)

常用指令

v-text：更新标签内容，与 {{ }} 类似。

v-html：渲染 HTML 内容，适用于动态生成 HTML 标签。

v-for：为数组或对象渲染列表。
```
       
          {{ item.name }}  
     
```

v-if 和 v-show：控制 DOM 元素的可见性。
```
条件显示内容
条件显示内容
```

v-on：绑定 DOM 事件。

v-bind：绑定 DOM 属性。
```
内容
```

4. 过滤器 (Filters)

使用过滤器格式化数据

{{ message | capitalize }}

全局过滤器：

Vue.filter('toUpper', function(value) {  return value.toUpperCase();});

局部过滤器：

computed: {  dateFormatted() {    return this.datetime.toLocaleDateString();  }}

现案例：简单的购物车

1. 描述

创建一个购物车，用户可以添加商品并显示总价。

2. 实现步骤

数据结构

data = {  items: [], // 购物车商品列表  total: 0 // 总价}

添加商品

方法:

onInputChanged(value) {  this.items = this.items.filter(item => item.id !== value);  this.total += value;}

购物车显示


    
       {{ item.name }}, {{ item.price }}

计算属性:

formattedTotal() {  return this.total.toLocaleString();}

最终优化后的效果

经过优化，文章结构更清晰，语言更自然，适合搜索引擎优化。

上一篇：vue基础语法--json-server工具，接口规则及测试,交互，组件

下一篇：vue--基于vue写的增删改查

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！