请选择 进入手机版 | 继续访问电脑版
 找回密码

上海老站长门户

点击联系客服
客服QQ: 客服微信:
查看: 102|回复: 50

Vue的设计概念

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-9-29 07:29:50 | 显示全部楼层 |阅读模式
目录

Mvvm型号

Vue  Mvvm实现原理

实现直接双向数据绑定的示例

Vue与模板引擎Thymeleaf引擎的比较

显示变数值(Vue)

显示变量值(Thymeleaf)

替换Html(Vue)

替换html(thymeleaf)

绑定属性(Vue)

绑定属性(Thymeleaf)

隐藏显示块(Vue)

隐藏显示块(Thymeleaf)

遍历列表数据-索引(Vue)

列表数据遍历-包括索引(Thymeleaf)
%96%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9%EF%BC%88vue%EF%BC%89-toc" style="margin-left:80px;">引入其他文件内容(vue)

引入其他文件内容(Thymeleaf)

Vue的页面定义基石-Options API

Vue中的代理运用

nginx反向代理

vue代理(正向代理)

Vue特性能力-filter





Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

Mvvm模型
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
  Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。


Vue中的Mvvm实现原理

Vue.js的实现方式,对数据(Model)进行劫持,当数据变动时,数据会出发劫持时绑定的方法,对视图进行更新。




这里有两个方向:

1、数据流向视图:数据变动时,能自动更新Dom节点的内容。此功能是通过数据劫持实现的,对数据(Model)进行劫持,当数据变动时,会调用劫持时绑定的方法,对视图进行更新。

2、视图流向数据:如输入框input内容发生变动时,input对应的数据也会发生变动。此功能是通过监听Dom事件实现的。当用户在输入框中输入文字(即inputkeyup事件发生时),vue会监听到这个事件,找到对应的数据模型变量,修改变量值。

vue中双向数据绑定的示例

  {{ message }}
  

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})


自己实现双向数据绑定的示例

    双向绑定demoo
   

   
   



这里要讲到一个关键函数

Object.defineProperty

  Object.defineProperty 需要三个参数(object , propName , descriptor)

  1 object 对象 => 给谁加
  2 propName 属性名 => 要加的属性的名字 【类型:String】
  3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型:Object】

descriptor 属性描述

get:一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set:一个给属性提供setter的方法,如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认值为undefined。


Vue与模板引Thymeleaf擎对比
显示变量值(Vue)
  {{ message }}

显示变量值(Thymeleaf)

替换Html(Vue)

替换Html(Thymeleaf)

绑定属性(Vue)
[img][/img]

绑定属性(Thymeleaf)
[img][/img]

隐藏显示区块(Vue)
  这是一个区块

隐藏显示区块(Thymeleaf)
  这是一个区块

遍历列表数据-带索引(Vue)

  
    {{ index }} - {{ item.message }}
  

遍历列表数据-带索引(Thymeleaf)

  
    {{ stat.index }} - {{ item.message }}
  

引入其他文件内容(vue)
在vue中,可复用的单元块被称为组件,定义组件

You clicked me {{ count }} times.

引入组件

  

引入其他文件内容(Thymeleaf)
被导入模块index.html:

   这是网页头

在其它页面导入index.html中的head模块:


由此可见在Html层面上来讲,vue和后台的模板引擎,整个设计方向是一样。都是使用特定属性标签,来描述如何把数据映射到视图上。

Vue的页面定义基石-Options API


Options API,即大家常说的选项API,即以vue为后缀的文件,通过定义methods,computed,watch,data等属性与方法,共同处理页面逻辑

可以看到Options代码编写方式,如果是组件状态,则写在data属性上,如果是方法,则写在methods属性上...

这种形式的页面定义类似一个配置文件,定义了页面的数据模型和行为


Vue中的代理运用
代理服务器:所谓代理服务器就是位于发起请求的客户端与原始服务器端之间的一台跳板服务器,是以正向代理可以隐藏客户端,反向代理可以隐藏原始服务器。

代理分为正向代理和反向代理,下面就以我们实际使用中的示例讲解下这两种代理方式的区别。


nginx反向代理


这样对于浏览器而言,浏览器只需要访问代理服务器,就可以达到同时访问两个网站的目的




我们看下实际场景下的nginx的配置

server {
    listen         4503;
    server_name  vue.izkml.com;
    access_log  "pipe:rollback logs/gov-manage-new-vue/access_log interval=1d baknum=7 maxsize=2G" main;
   
        # 接口代理
    location /api {
            #去除 /api前缀
        rewrite  ^.+api/?(.*)$ /$1 break;
        # 转发到 117.71.53.199:50020端口上
        proxy_pass  http://117.71.53.199:50020;
        proxy_buffering off;
    }
   
    # 页面文件代理
    location / {
        # 直接去本地文件读取文件路径
        root     html/gov-task-supervison;
        index    index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }
}
其中可以看到,主要分为接口代理和页面代理两部分
1. 如果是/api前缀的请求,则去除/api前缀,转发到后台网关端口上
2. 其他情况下,请求的为页面内容,在html/gov-task-supervison文件夹中读取文件内容


vue代理(正向代理)






devServer: { // 支持webPack-dev-server的所有选项
    port: 8888, // 端口号
    host: '0.0.0.0',
    https: false,
    open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        // 转发地址
        target: 'http://117.71.53.199:50020',  //测试环境
        changeOrigin: true,
        ws: true,
        // 去除/api前缀
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
这里主要看的是proxy字段,其中定义了规则

1. 如果是/api前缀的请求,则去除/api前缀,转发到后台网关端口上
2. 其他情况下,请求的为页面内容,直接读取本地项目路径下面的页面内容 **(隐式包含)**


Vue特性能力-filter
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化

应用场景: 前端常量翻译

    {{scope.row.status | CodeMaster('TASK_STATUS')}}

Vue.filter('CodeMaster', function (value, type) {
  return Vue.prototype.$codeMaster.getCodeValue(type, value);
})
在上面的代码中,我们在模板html中,添加了filter的调用,并传入了一个参数。
在vue进行html生成的过程中,会调用相应的filter,根据自定义的规则,完成文本格式化操作。




回复

使用道具 举报

1

主题

637

帖子

185

积分

注册会员

Rank: 2

积分
185
发表于 2021-9-29 07:44:35 | 显示全部楼层
相当不错,感谢无私分享精神!
回复

使用道具 举报

1

主题

649

帖子

230

积分

中级会员

Rank: 3Rank: 3

积分
230
发表于 2021-9-29 08:23:48 | 显示全部楼层
我抢、我抢、我抢沙发~
回复

使用道具 举报

1

主题

654

帖子

114

积分

注册会员

Rank: 2

积分
114
发表于 2021-9-29 09:02:12 | 显示全部楼层
学习了,谢谢分享、、、
回复

使用道具 举报

1

主题

642

帖子

93

积分

注册会员

Rank: 2

积分
93
发表于 2021-9-29 09:26:13 | 显示全部楼层
前排支持下分享
回复

使用道具 举报

1

主题

661

帖子

173

积分

注册会员

Rank: 2

积分
173
发表于 2021-9-29 10:28:26 | 显示全部楼层
我是来刷分的,嘿嘿
回复

使用道具 举报

1

主题

658

帖子

119

积分

注册会员

Rank: 2

积分
119
发表于 2021-9-29 11:03:47 | 显示全部楼层
难得一见的好帖
回复

使用道具 举报

1

主题

665

帖子

154

积分

注册会员

Rank: 2

积分
154
发表于 2021-9-29 11:48:21 | 显示全部楼层
路过,支持一下啦
回复

使用道具 举报

1

主题

671

帖子

187

积分

注册会员

Rank: 2

积分
187
发表于 2021-9-29 12:34:56 | 显示全部楼层
路过,支持一下啦
回复

使用道具 举报

1

主题

629

帖子

145

积分

注册会员

Rank: 2

积分
145
发表于 2021-9-29 13:01:01 | 显示全部楼层
没看完~~~~~~ 先顶,好同志
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ| 无图版|手机版|小黑屋| 上海@IT精英团

Copyright © 2001-2015 Comsenz Inc.   All Rights Reserved.

Powered by Discuz! X3.4

快速回复 返回顶部 返回列表