element vue 纵向滑动条_Vue 部分

1、ES6+Vue :

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

bd1c21897fd3d230b991ab4cb924ae22.png

2、vue的特点

1) 遵循 MVVM 模式

2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

3、 与其它前端js框架的关联

1) 借鉴 angular 的模板和数据绑定技术

2) 借鉴 react 的组件化和虚拟 DOM 技术

4、 vue拓展插件

  • vue-cli: vue 脚手架

  • vue-resource(axios): ajax 请求

  • vue-router: 路由

  • vuex: 状态管理

  • vue-lazyload: 图片懒加载

  • vue-scroller: 页面滑动相关

  • mint-ui: 基于 vue 的 UI 组件库(移动端)

  • element-ui: 基于 vue 的 UI 组件库(PC 端)

2、Vue :

vue:入门代码:

dbbbe3aec32b9b19c7a7d7765bf968e4.png

3、vue的点击事件;

59687c2ea37767b22f91e4e2f6bd6dcd.png

b41bd97965fe4b10ce0cef800fa8e73b.png

4、vue 的生命周期and组件的生命周期

246ab8f521ae3790e34d73397bb5ebb5.pngfe42c5bc3847b07c602f0229adc0db5c.png

5、vue较为完整的实例对象。

e8dd6ac59655d89953545c997ccd4c6b.pngfb31165edc1a3737bdf607440bcf4523.png

6、vue的MVVM

8eb223cfc0fdf4e0acabb1e4b55bc015.png

MVVM分为三个部分:

分别是M(Model,模型层 ),

V(View,视图层),

VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)

1、 M:模型层,主要负责业务数据相关;

2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层; 

3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;

MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦。

(也就是说可以进行双向修改)

7、vue:语法部分

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

   所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。

    双大括号表达式

    语法: {{exp}}

    功能: 向页面输出数据 ,可以调用对象的方法

    指令一:强制数据绑定

    功能: 指定变化的属性值

    完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行

    简洁写法: :xxx='yyy'

    指令二:绑定事件监听

    1) 功能: 绑定指定事件名的回调函数

完整写法整洁写法
v-on:keyup='xxx'@keyup='xxx'
v-on:keyup.enter='xxx'@keyup.enter='xxx'
8、vue样式部分

1、v-text=""  与 v-html="" 的区别:

200e0864c6e7eb872f4194cb21b014f1.png

这是显示结果:

77d3afb030bacbf46288902b4de971bf.png

2、 v-if=""     v-else-if=""  v-else

7d313bd7cd914c8e8326c12644118d28.png

9、图片的显示与隐藏 v-show

4b08e1b44c8fcd04db8cfa18db541f9f.png

更新时间:2020-12-17   vue部分

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#集合通论

前言 写这篇文章的最初动力是来自于一次笔试经历。有一道笔试题大概是这样的:程序使用一个txt文件来存储操作记录。存储记录是多行字符串,每一行代表一次操作记录,格式如下:用户名操作事项名称操作时间。现在假设这个txt文件已经非…

Shell 脚本案例实战 [4]

for循环结构for 循环结构语句1.for循环结构:语法:for 变量名 in 变量取值列表do指令…done提示:在此结构中“in 变量取值列表”可省略,省略时相当于in “$”,使用for i 就相当于使用for i in “$”2.C语言型for循环结构…

深度优化LNMP之PHP

PHP缓存加速介绍1.操作码介绍及缓存原理当客户端请求一个php程序时,服务器的PHP引擎会解析该PHP程序,并将其编译为特定的操作码文件(Operate Code,opcode)该文件是执行PHP代码后的一种二进制表示形式。默认情况下,这个…

PHP服务Fcgi进程及PHP解析优化

1、PHP引擎缓存加速常见四种软件:1.eAccelerator2.Zendcache3.xcache4.apc5.zendopcache php5.5自带2、使用tmpfs作为缓存加速缓存的文件目录 [rootweb02 ~]# mount -t tmpfs tmpfs /dev/shm -o size256m[rootweb02 ~]# mount -t tmpfs /dev/shm/ /tmp/eaccelerator…

电路 晶振频率_都说晶振是电路的心脏,你真的了解它吗?

之所以说晶振是数字电路的心脏,就是因为所有的数字电路都需要一个稳定的工作时钟信号,最常见的就是用晶振来解决,可以说只要有数字电路的地方就可以见到晶振。常见种类我们常说的晶振,包含两种。一种需要加驱动电路才能产生频率信…

ios 数组中的字典排序_利用数组和字典,实现按指定规则的排序

大家好,今日我们继续讲解数组与字典解决方案,今日讲解第47讲:利用字典和数组,实现按指定规则的排序。随着字典讲解的深入,我们发现字典真的很神奇,在VBA代码中,给人以十分清爽的感觉,在这套数组与字典解决方案中,我会尽可能的把经…

MVC3学习:利用mvc3+ajax实现登录

用到的工具或技术:vs2010,EF code first,JQuery ajax,mvc3。 第一步:准备数据库。 利用EF code first,先写实体类,然后根据实体类自动创建数据库;或者先创建数据库,再写实体类,都可以。如果实体…

vue获取tr内td里面所有内容_vue 项目学习

首先页面的整体内容结构以及package.json 里面的内容package.jsonrouter.js 路由功能import Vue from vue import Router from vue-router import Login from /login;Vue.use(Router) let router new Router({routes: [{path: /,redirect: {name: Login},},{path: /Login,na…

ubuntu中解压rar文件遇到乱码的解决方法

如上图所示,在用ubuntu的时候经常会遇见rar压缩文件打开出现乱码,解压的时候也会出现无效的编码等错误。 解决方法是用 sudo apt-get remove rar 卸载rar 然后用 sudo apt-get instal unrar 安装unrar 然后就可以解决这个问题了。 个人理解rar是用来压缩…

kmeans中的k的含义_硬质合金中P、M、K、N、S、H六大字母含义详解

数控技术在线订单 | 技术 | 干货 | 社群关注可加入机械行业群!关注P类:硬质合金中,P类产品的切削范围是指碳钢,铸钢,包括0.25-0.25%C淬火和调质,易切钢包含退火与淬火调质,低碳合金钢含金元素少于5%的范围&…

gitlab集成ldap用户后,禁用原来的账户体系进行拉取代码

gitlab在集成ldao用户后,经过测试,用户可以还可以通过原来的账号体系进行项目代码的拉取,需要把原来的账号体系的拉取功能关闭,使用ldap的账号体系进行工作开展。 方法如下: 在管理员-设置-通用-登录限制里把 Allow…

ffmpeg 分辨率 压缩_用GPU加速FFmpeg中的超分辨率功能

1. 简要回顾首先简单复述一下FFmpeg中对深度学习的支持情况,如上图所示,FFmpeg在libavfilter中支持基于深度学习的filter,目前已经支持sr, derain和dnn_processing等filter,其中,dnn_processing是一个通用的filter&…

mysql存储过程输入参数拆分_一文看懂mysql数据库存储过程、函数、视图、触发器、表...

概述抽空总结一下mysql的一些概念性内容,涉及存储过程、函数、视图、触发器等。一、查看存储过程、函数、视图、触发器、表1、存储过程select * from mysql.proc where typePROCEDURE;show procedure status; show create procedure proc_name; //存储过程定义2、函…

oracle vm发现无效设置_Oracle数据库编译失效对象相关命令总结大全,值得收藏

概述在日常数据库维护过程中,我们会发现数据库中一些对象(包Package、存储过程Procedure、函数Function、视图View、同义词.....)会失效,呈现无效状态(INVALID)。有时候需要定期检查数据库中存在哪些失效对象,对于存在异常的对象需要重新编译&#xff0c…

WCF-001:WCF的发布

随着“云”时代的到来,“云”已经无处不在了。什么是“云”,无非就是利用互联网强大的功能建立多个服务器,然后再利用互联网的传输数据的特点将数据从某个服务器中读取出来或者将你的数据上传上去。当然这个服务器不是一定就是传统意义的服务…

在线编辑_水墨-在线 Markdown 编辑器

水墨-在线 Markdown 编辑器基于 Spring-boot、FreeMarker、layui、Vditor 构建的一款在线 所见即所得的 Markdown 编辑器。水墨-在线 Markdown 编辑器。本人使用 Vditor 编辑器时日已久,眼看着其功能日益强大,特此基于 Vditor 构建一款 Web 编辑器&#…

退出出库复核是什么意思_细思极恐!为什么是黄晓明退出而不是李菲儿?因为女方是芒果艺人...

本文转载自:娱评人吴清功序言:《乘风破浪的姐姐》第二季即将接档《姐姐的爱乐之程》,于每周五晚上十点档播出。2021年1月5日,《乘风破浪的姐姐2》第一次公演举行,选手李菲儿和发起人黄晓明有亲密互动,李菲儿…

ie6 ie7下使用clear不能将浮动的元素换行问题

在主流浏览器中使用clear方法可以轻松完成浮动元素的换行。 例如&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.o…

传值类型_Java内存管理:Stackoverflow问答-Java是传值还是传引用(十一)

勿在流沙筑高台&#xff0c;出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园&#xff0c;面向编程&#xff0c;春暖花开&#xff01;本文导图&#xff1a;一、由一个提问引发的思考在Stack Overflow 看到这样一个问题&#xff1a;Is Java “pass-by-refere…

java位运算(转)

位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 例如&#xff1a;3 <<2(3为int型) 1&#xff09;把3转换为二进制数字0000 0000 0000 0000 0000 0000 0000 0011&#xff0c; 2&#xff09;把该数字高位(左侧)的两个零移出&#xff0c;其他的数字都朝左平移2位…