首页 > 其他分享 >Vue入门到关门之Vue介绍与使用

Vue入门到关门之Vue介绍与使用

时间：2024-04-30 22:11:33浏览次数：21  
标签：Vue 入门 age 视图 name 关门 Model View

一、vue框架介绍

1、什么是Vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue框架的构造

  • Vue采用了M-V-VM（Model-View-ViewModel）的思想，它是一种基于前端开发的架构模式，也是一种事件驱动的编程方式。
  • 除了M-V-VM，还有其他一些常见的架构模式
    • 例如
      • MTV（Model-Template-View）
      • MVC（Model-View-Controller）
      • MVP（Model-View-Presenter）。
  • 然而
    • 在前端开发中，MVVM和组件化开发、单页面开发（SPA）结合使用的情况比较普遍。
  • 目前，Vue的最新版本是Vue4，但并没有公司在使用
    • 主流的公司项目基本上会采用Vue3
    • 而老项目仍然继续使用Vue2。

3、MVC和MVVM的区别

（1）MVC

MVC 是 Model View Controller 的缩写

  • Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

  • View：视图层，用户界面渲染逻辑，通常视图是依据模型数据创建的。

  • Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。

image

MVC的思想：Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

MVC的特点：实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC的优点：

  • 耦合度低，视图层和业务层分离

  • 重用度高

  • 生命周期成本低

  • 可维护性高

  • 部署快

MVC的缺点：

  • 不适合小型项目的开发

  • 视图与控制器间的过于紧密的连接，视图与控制器是相互分离，但却是联系紧密的部件，妨碍了他们的独立重用

  • 降低了视图对模型数据的访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

MVC的应用：主要用于中大型项目的分层开发。

MVC的例子： 举一个例子，页面有一个 id 为 container 的 span，点击按钮会让其内容加 1：

  • view：
<div>
  <span id="container">0</span>
  <button id="btn">+</button>
</div>
  • controller：
const button = document.getElementById('btn');
// 响应视图指令
button.addEventListener('click', () => {
  const container = document.getElementById('container');
  
  // 调用模型
  add(container);
}, false);
  • model：
function add (node) {
  // 业务逻辑处理
  const currentValue = parseInt(node.innerText);
  const newValue = currentValue + 1;
  
  // 更新视图
  node.innerText = current + 1;
}

这样就把数据更新分的比较明确了。

（2）MVVM

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

  • Modal：模型，指的是后端传递的数据。

  • View：视图，指的是所看到的页面。

  • ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑

image

它有两个方向：

  • 一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

  • 二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，就是数据的双向绑定。

MVVM的特点： 在MVVM的框架下，视图和模型是不能直接通信的，它们通过ViewModal来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM的优点：

MVVM模式的主要目的是分离视图（View）和模型（Model），有几大优点：

  • 低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

  • 可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

  • 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

  • 可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写

  • 双向数据绑定，它实现了View和Model的自动同步，当Model的属性改变时，不需要手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变

MVVM适用场景： 适合数据驱动的场景，数据操作比较多的场景

二、vue简单使用

1、第一个Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    本地引入-->
<!--    <script src="./vue/vue.js"></script>-->
<!--    CDN引入-->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="d1">
    <h1>{{s}}</h1>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#d1',
        data: {
            s: 'Hello World'
        }
    })
</script>
</html>

2、Vue的响应式原理

响应式原理：数据变了--->页面会变数据也会变

（1）理解代理对象

// 定义源对象obj1
let obj1 = {
    name:'张三',
    age:20
}
//定义代理对象obj2，代理源对象obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log(obj1);  // {name: "李四", age: 30}

（2）Vue的data和_data

// 定义源对象
let myData = {
    name: '张三',
    age: 20
}
let mx = new Vue({
    // 将源对象传递给Vue的data，背后做了两件事
    // 1、设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
    // 2、将_data里面代理的所有数据，再添加到当前Vue实例身上，也就是vm身上。（方便直接调用数据）
})
// 通过改变vue实例的属性可以改变源对象的属性值
mx.name = '王五'
mx.age = 40
console.log(myData);  // {name: "王五", age: 40}

（3）给对象添加属性的多种方式

  • 第一种方式：使用点 .
  • 第二种方式：使用中括号 [ ]
  • 第三种方式：使用Object.defineProperty方法
// 方式一
let obj3 = {}
obj3.name = '张三'
// 方式二
obj3['age'] = 20
//方式三
// 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
// 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
// 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
Object.defineProperty(obj3,'sex',{
    // 属性值
    value:'男',
    // 允许被枚举（默认不允许）
    enumerable:true,
    // 允许被删除（默认不允许）
    configurable:true
})
// 枚举出对象的所有属性（其实就遍历出对象的所有属性名）
// 如果sex属性没有设置允许被枚举，就不能被枚举
for(let key in obj3){
    console.log(key);
}
// 通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex   // 如果sex属性没有设置允许被删除，就不能被删除

三、模版语法

1、介绍

  • 模版语法也可以叫做插值表达式，插值表达式用户把vue中所定义的数据,显示在页面上.。插值表达式允许用户输入"JS代码片段"。

2、语法

  • 插值语法使用 {{}}-->必须是定义再data中的数据
  • 例如：{{ 变量名/对象.属性名 }}
  • {{}}中可以放：字符串，数字，对象，数组，函数执行，修改变量值，三目运算符。
  • {{}}中不可以放：
    • 不能定义变量
    • 不能渲染标签

3、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>字符串：{{name}}</h1>
    <h1>数字：{{age}}</h1>
    <h1>对象:{{userinfo}}-->取对象的值：{{userinfo.name}}</h1>
    <h1>数组：{{hobby}}--->数组取值：{{hobby[0]}}</h1>
    <h1>运算：{{11+11}}----》变量运算：{{age+userinfo.height}}</h1>
    <h1>三目运算符：{{11<10?'真':'假'}}--->变量形式：{{b?'为真':'为假'}}</h1>
    <h1>标签：{{a}}</h1>
    <h1>可以放函数执行</h1>
    <h1>var a =100---不行</h1>
    <h1>修改变量值：{{age=99}}</h1>
    <h1>修改变量值：{{++age}}--》++age和age++的区别是，前一个先计算，再赋值，后一个先赋值再计算</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'xiao',
            age: 19,
            userinfo: {name: '刘大板', height: 168},
            hobby: ['篮球', '足球', '乒乓球'],
            b: true,
            a: '<a href="http://www.baidu.com">点击有惊喜</a>'
        }
    })
</script>
</html>

标签：Vue,入门,age,视图,name,关门,Model,View
From： https://www.cnblogs.com/xiao01/p/18168767

相关文章

  • Vue入门到关门之指令系统
    一、引入在Vue.js中，指令（Directives）是一种特殊的标记，用于向Vue实例提供特殊的行为。指令以v-开头，例如v-if、v-for等。指令的本质就是语法糖，标志位。在编译阶段render函数里，会把指令编译成JavaScript代码。注意：指令都是放在标签上的二、指令1、文本指令（1）v-text......
  • 06-混入-自定义插件-插槽-本地存储-vuex组件通信-页面跳转
    混入mixin在Vue中，混入（mixin）是一种可以在多个组件中重复使用的对象。它允许您将组件中的一些选项提取出来，然后在多个组件中进行重复使用。混入可以包含组件中的任何选项，例如数据、计算属性、方法等。使用步骤在src文件夹下新建一个文件夹，比如mixin，然后再这个文件夹下面新建一......
  • 使用Vue3在浏览器端进行zip文件压缩
    在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。今天，我将分享一个使用Vue3和JSZip库在浏览器端实现zip文件压缩的示例。首先，我们需要安装JSZip库。如果你使用的是npm，可以通过以下命令进行安装：npminstalljszip......
  • SQL SERVER 从入门到精通 第5版 第三篇 高级应用 第12章 游标的使用 读书笔记
     第十二章游标的使用>.游标的概述游标是一种数据库对象，用于在SQL中处理(SELECT的)查询结果集。它允许逐行地访问查询结果集的数据，以进行一系列操作，如更新、删除或插入数据。游标通常用于存储过程或触发器中，用于对数据进行逐行处理。通过游标，可以实现对结果集的逐行处......
  • 深入理解正则表达式：从入门到精通
    title:深入理解正则表达式：从入门到精通date:2024/4/3018:37:21updated:2024/4/3018:37:21tags:正则Python文本分析日志挖掘数据清洗模式匹配工具推荐第一章：正则表达式入门介绍正则表达式的基本概念和语法正则表达式是一种用于描述字符串模式的表达式，由普通......
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace
    1.简介在我们日常执行自动化测试工作的过程中，经常会遇到一些偶发性的bug，但是因为bug是偶发性的，我们不一定每次执行都能复现，所以我们在测试执行的时候，追踪用例执行就变得非常重要了。playwright提供了一个PlaywrightTraceViewer工具来追踪测试执行，这是一个GUI工具，我们可以通过它......
  • 02.入门环境搭建
    1.Java三大版本JavaSE：标准版（桌面程序，控制台开发……）JavaME：嵌入式开发（收集，小家电……）JavaEE：E企业级开发（web端，服务器开发……）JDK：JavaDevelopmentKitJRE：JavaRuntimeEnvironmentJVM：JavaVirtualMachine2.Java开发环境搭建2.1.卸载JDK1.删除安装目录2.清除环境变......
  • 《Vue学习笔记》-01
    什么是Vue?一款用于构建用户界面的JavaScript框架。单文件组件SFC(Single-FileComponents)<scriptsetup>import{ref}from'vue';constcount=ref(0);</script><template><button@click="count++">Countis{{count}}</button>......
  • docker入门
    docker的安装安装Docker的步骤取决于您的操作系统。以下是在不同操作系统中安装Docker的简要步骤和示例代码：Ubuntusudoapt-getupdatesudoapt-getinstalldocker-cedocker-ce-clicontainerd.ioDebiansudoapt-getupdatesudoapt-getinstalldocker-cedocker-ce-cl......
  • 详解安卓架构入门
    准备首先进入安卓架构入门的代码仓库：AndroidArchitectureStarterTemplates:https://github.com/android/architecture-templates先看看介绍，简单分析一下：架构入门的模板UI界面非常简陋Navigation导航协程和FlowHilt依赖注入Hilt虚假数据进行UI测试提供了两个......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99