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循环结构…

python后台截屏_Python实现屏幕截图

之前使用Python构建了一个图片转文字小工具,但是使用的是使用系统自带的截图工具然后监听目录变化来实现的。接下来我想直接使用Python来构建一个截图工具,这样就可以结合转换工具使用。构建图形界面本文使用Python自带的GUI库Tkinter来构建图形界面。Tk…

ORACLE 进入sqlplus的协议适配器错误

ORACLE 进入sqlplus的输入用户名密码的时候提示: ORA-12560: TNS: 协议适配器错误 解决方案是在 我的电脑,属性--高级--环境变量---系统变量--新建,变量名oracle_sid,变量值XXXX,XXXX就是你的databaseSID 在网络上查找了一下,似乎…

深度优化LNMP之PHP

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

pythonenumerate函数_enumerate,enumerate函数的使用方法

这需要使用到度enumitem宏包,这是一个非常有用的宏包,你可以去阅读一下它的文档。它对于自定义编号环境有问很大的帮助。\documentclass[UTF8]{ctexrep}\usepackage{enumitem}\begin{document}Thisisatextfortestingtheindentofenumerateenviornment.Ple…

链接文件

ln [-sf] 原文件 目标文件 如果ln不加任何参数就进行链接,那么就是硬链接,-s是符号链接 -f 如果目标文件存在,就主动将目标文件直接删除后在建立转载于:https://www.cnblogs.com/seasonsstory/p/3152816.html

8g ubuntu 树莓派4b_树莓派4B安装 Ubuntu 20.04 LTS

硬件:Raspberry Pi 4B(4g或8g版本)系统:Ubuntu 20.04 LTS官网:https://ubuntu.com/download/iot/raspberry-piPC:win10相关工具:sd card formatter 5.0.1win32diskManager 1.0下载系统镜像使用sd card formatter格式化…

data矩阵poj 2778 DNA Sequence

最近研究data矩阵,稍微总结一下,以后继续补充: ac自动机处理字符串,dp计算谜底,用矩阵来减速 每日一道理 巴尔扎克说过“不幸,是天才的进升阶梯,信徒的洗礼之水,弱者的无底深渊”。风…

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…

JS中typeof与instanceof的区别

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的:typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。 它返回值是一个字符串,该字符…

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

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

my-innodb-heavy-4G.cnf 配置文件参数介绍

温馨提示:本文参考 徐布斯 标准好青年本文章参数使用egrep从mysql配置的目录过滤出来进行分析,参考的两位可能不是my-innodb-heavy-4G.cnf的配置文件参数my-innodb-heavy-4G.cnf[client]#客户端配置 port 3306 #客户端端口号 socket …

手动创建数据库

手动创建数据库步骤:1、准备工作(创建相关目录、设置ORACLE_SID)2、生成参数文件3、启动实例3、脚本创建数据库4、脚本创建数据字典5、打开数据库 一: 准备工作 1、创建相关目录wyncrac为要创建的数据名,所以创建同名目录用来集中存储相关文件[oraclelocalhost wyncrac]$ lltot…

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…

lnmp环境搭建完全手册(四)——lnmp搭建(源码安装)

首先来介绍一下Nginx.Nginx是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器。Nginx不仅可以作为web服务器,也可以作为负载均衡器,之前也有文章介绍,大家可以看一下. MySQL是一款开源免费的数据软件,MySQL是一个小型关系型数据库管理系统…

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

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

锐界机器人_2019款锐界智能家居远程控制使用介绍

2019款经过场地的绕圈测试,传祺GA6的制动系统依旧保持良好的响应速度,而且制动力输出没有虚位,从踩上制动踏板初段就能得到明显的制动力反馈。车头重量给前脸极大的压力,不过在极限过弯的情况下,悬架依旧提供了足够的支…