Vue
神之凝视
这个作者很懒,什么都没留下…
展开
-
uni-app基础知识【rich-text、progress】
一.rich-text富文本【很少使用】注意:app-nvue 平台 nodes 属性只支持使用 Array 类型。支付宝小程序 nodes 属性只支持使用 Array 类型。如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用 html-parser 转换。支持默认事件,包括:click、touchstart、touchmove、touchcancel、touchend、longpress。nodes 属性推荐使用 Array 类型,由原创 2020-06-10 20:40:16 · 1643 阅读 · 0 评论 -
uni-app基础知识【icon、text】
一.icon图标备注:由于icon组件各端表现存在差异,可以通过使用字体图标的方式来弥补各端差异。二.icon图标案例<view class="lab">图标</view><view> <icon class="icon" type="success"></icon> <icon class="icon" type="warn"></icon> <icon class="icon" type="do原创 2020-06-09 20:56:48 · 1527 阅读 · 0 评论 -
uni-app之video视频组件
一.平台差异说明二.属性说明备注:video默认宽度 300px、高度 225px,可通过 css 设置宽高。三.案例实战1.video界面<view class="page"> <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.ali原创 2020-06-04 17:31:26 · 34082 阅读 · 18 评论 -
微信小程序修改主页名称【默认WeChat】
一.初始状态二.修改相关配置修改app.json的一下内容:三.效果原创 2020-06-04 17:07:38 · 854 阅读 · 0 评论 -
uni-app视图容器【cover-view、cover-image】
一.cover-view简介覆盖在原生组件上的文本视图。小程序框架为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件,为了能正常覆盖原生组件,设计了cover-view。支持的事件:click二.cover-image简介覆盖在原生组件上的图片视图。可覆盖的原生组件:video、map支持的事件:click不支持的 CSSposition: fixedopacityoverflowpaddinglinebr原创 2020-06-03 17:05:58 · 15636 阅读 · 1 评论 -
uni-app视图容器之movable-view
一.简介movable-view:可移动的视图容器,在页面中可以拖拽滑动。movable-area:movable-view 的可移动区域,movable-view 的父级,必须设置width和height属性,不设置默认为10px。二.属性说明1.movable-area属性说明:2.movable-view属性说明:除了基本事件外,movable-view提供了两个特殊事件:htouchmove:初次手指触摸后移动为横向的移动,如果catch此事件,则意味着touchmove事件也被原创 2020-05-31 12:20:22 · 7494 阅读 · 0 评论 -
uni-app使用滑动视图容器实现图片轮播【swiper】
一.简介swiper:滑块视图容器,就是我们常用的轮播图。swiper-item:仅可放置在 组件中,宽高自动设置为100%,唯一属性item-id,String类型,表示该 swiper-item 的标识符。属性说明:特点:change事件返回 detail 中包含一个 source 字段,表示导致变更的原因,值:autoplay 自动播放导致swiper变化touch 用户划动引起swiper变化其他原因将用空字符串表示二.代码实现1.界面<swiper class=原创 2020-05-28 20:29:42 · 4451 阅读 · 0 评论 -
uni-app之视图容器【view、scroll-view】
一.简介视图容器就是将页面分割为独立的、不同的部分。视图容器共包含:view、scroll-view、swiper、movable-view、cover-view 、cover-image。二.view视图容器,相当于html中的div。属性说明如下:备注:如果使用 组件编译时会被转换为 。1.view基础视图<view class="text"> Hello World</view>执行效果:2.scroll-view可滚动视图区域,可控制横向滚动和原创 2020-05-27 20:07:44 · 1368 阅读 · 0 评论 -
Vue开发微信小程序
一.安装Vue及Vue-cli脚手架参考:Windows安装Vue二.安装HBuilder X【方便快速上手】1.下载2.解压【无需安装】3.点击执行【根据需要创建桌面快捷方式即可】4.创建项目5.选择小程序创建成功如下:三.注册微信公众平台账号获取微信小程序开发工具和AppID:四.下载小程序开发工具五.安装六.导入微信小程序项目七.查看导入的项目八.实际效果点击“预览”会生成二维码扫描二维码可以查看小程序效果:...原创 2020-05-12 11:29:25 · 13591 阅读 · 0 评论 -
Vue使用脚手架创建新项目
1.指向项目目录2.根据模版创建新项目在当前目录下输入“vue init webpack-simple 项目名称(使用英文)”。创建成功:3.项目结构介绍介绍如下:4.安装工程依赖模块定位到myTest的工程目录下,安装该工程依赖的模块,这些模块将被安装在:myTest\node_modules目录下,node_modules文件夹会被新建,而且根据package.json的配置下载该项目的modules。5.运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来原创 2020-05-10 17:58:31 · 769 阅读 · 0 评论 -
Windows下安装Vue
一.下载安装包前往Node.js官网下载:添加链接描述下载如下:双击执行安装,指定安装路径:默认按安装全部组件:安装成功:二.设置nodejs prefix(全局)和cache(缓存)路径1.在nodejs安装路径下,新建node_global和node_cache两个文件夹2.设置缓存文件路径和全局模块存放路径三.基于 Node.js 安装cnpm(淘宝镜像)四.设置环境变量设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径1.鼠标原创 2020-05-10 12:10:56 · 3510 阅读 · 0 评论 -
Vue高级设计【组件、过渡效果】
一.组件前面介绍了Vue的各种功能,但是这些功能并不能直接在项目中使用。因为如果直接使用的话,会导致出现一个非常大的Vue实例,这和将所有代码都写在一个文件的道理是一样的。所以Vue引入了组件来进行模块化功能。代码案例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsd原创 2020-05-09 17:46:22 · 191 阅读 · 0 评论 -
Vue前端框架常用指令集锦
v-once:这个指令让视图只渲染一次,将来就算相应的数据发生变化,也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。el:指定挂载点。v-html:这个指令主要在需要操作原始HTML的时候使用。v-bind:该指令在需要绑定HTML标签属性的时候使用。为了方便,该指令还有一个缩写,例如:class="myClass"就相当于v-bind:class=“myClass”。v-on:该指令主要用于绑定事件处理程序。该指令有缩写@,例如@click="onClick"就相当于v-on:.原创 2020-05-08 17:36:50 · 322 阅读 · 0 评论 -
Vue前端框架快速入门
一.简介Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Anglar来说也更加易学,而且它的作者是国人,中文文档也很完善。二.Vue基本概念1.单文件首先,我们来抛开那些复杂的框架配置,先从单文件开始学习Vue最基本的内容。这里引用了Vue框架的CDN,所以不需要任何配置即可使用Vue。浏览器打开如下:2.Vue实例Vue框架中最重要的东西就是Vue实例,它是...原创 2020-05-06 16:37:50 · 1552 阅读 · 0 评论