Vue前端框架基础+Element的使用

2023-07-27 生活百科

前置内容：

AJAX基础+Axios快速入门+JSON使用

目录

vue" rel="external nofollow noreferrer">1、VUE
- 1.1 概述
- 1.2 快速入门
- vue指令" rel="external nofollow noreferrer">1.3 Vue指令
  - 1.3.1 v-bind & v-model 指令
  - 1.3.2 v-on 指令
  - 1.3.3 条件判断指令
  - 1.3.4 v-for 指令
- 1.4 生命周期
- 1.5 案例
  - 1.5.1 需求
  - 1.5.2 查询所有功能
    - 1.5.2.1 实现方式
    - 1.5.2.2 编码
  - 1.5.3 添加功能
    - 1.5.3.1 实现方式
    - 1.5.3.2 编码
2、Element
- 2.1 快速入门
- 2.2 Element 布局
  - 2.2.1 Layout 局部
  - 2.2.2 Container 布局容器
- 2.3 案例
  - 2.3.1 基本页面准备
  - 2.3.2 完整代码展示

1、VUE1.1 概述

VUE：一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
VUE简化原生JavaScript中的DOM操作示例
- JavaScript的DOM操作示例
  // 获取表单数据let brandName = document.getElementById("brandName").value;let companyName = document.getElementById("companyName").value;//设置数据formData.brandName = brandName;formData.companyName = companyName;
- 使用VUE
  
  基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
  - 反观 MVC 模式以对比 MVVM
    - MVC
      
      View（视图）<== Controller（控制器） <==> Model（模型）
      只能实现模型到视图的单向展示，模型和视图无绑定，当模型变化时，必须手动写Dom进行展示
      - C：Controller ，控制器，即 JS 代码部分
      - M：Model ，数据模型， JavaScriptObjects ，如下示例代码块brand
      - V：View ，视图，页面标签，如下示例代码块的tableData
        for (let i = 0; i < brands.length; i++) {let brand = brands[i];// 对表格数据进行拼接tableData += "<tr align=\"center\">\n" +"<td>" + (i + 1) + "</td>\n" +"<td>" + brand.brandName + "</td>\n" +"<td>" + brand.companyName + "</td>\n" +"<td>" + brand.ordered + "</td>\n" +"<td>" + brand.destination + "</td>\n" +"<td>" + brand.status + "</td>\n" +"\n" +"<td><a href=https://www.huyubaike.com/"#\">修改</a> <a href=https://www.huyubaike.com/"#\">删除</a></td>\n" +"</tr>"}// 设置表格对象document.getElementById("brandTable").innerHTML = tableData;
    - MVVM
      
      文章插图
      - M：Model ，数据模型， JavaScriptObjects
      - V：View ，视图，页面标签
      - VM：ViewModel ，包括 Dom Listeners 和 Dtat Bindings ，由VUE提供，实现数据的双向绑定，视图和模型任意一者发生改变，另一者随之改变
    - 双向绑定效果展示
      <div id="app"> <input name="username" v-model="username">{{username}}</div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script> // 脚本new Vue({el:"#app",data(){return {username:""}}});</script>
      上一页
      1
      2
      3
      4
      5
      6
      下一页
      经验总结扩展阅读

上一篇：为什么说丙火女老公是癸水男相互调剂生活美好

下一篇：2023年农历七月初四可以搬家吗