vue渐进式开发的理解和指令
1.vue渐进式开发
vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或者是通过http引入官网的代码。如下,

然后在body下面写个script或者单独写个js文件引导这个页面。el属性是这个页面的根节点,里面的data就可以随便定义了。

使用vue里的数据就跟平常一样,{{变量名}}, v-for渲染数组或者对象就ok了。这就是最简单的vue的渐进式开发,不需要借助vue脚手架。并且一些静态数据比较多的话,
还是比较适合的。这是我对vue渐进式开发的理解,后面如果项目大,就可以npm install vue vuex了。
2.vue的一些基本指令,语法:v-指令名
v-text 只能解析文本,解析出来的文本作为标签的内容展示 =={{}}
v-html 解析标签
v-bind :属性名 //绑定动态属性 简写 :属性名
属性名=“变量名”按字符串解析
:属性名=“变量名” 按变量解析
v-for
//循环对象
(value,key,index) in obj
:key="唯一标识" 如index
第一个value是对象里面的每一项value值,第二个是对象里面的每一项的key,第三项下标;
//循环数组
(item,index,key)in list
第一个是数组里面的每一项 第二个是下标 第三个 没用
//循环数字
(item,index,key)in Number
第一个是从1开始的一个整数,第二个是下标,第三个没用
v-show ="true"展示或隐藏 ===>style="display:none;"或display:block;
v-on:eventname=""//绑定事件 简写@eventname
eventname(click,keyup input change)
@eventname.修饰符
prevent 阻止默认事件的修饰符 @click.prevent
stop 阻止冒泡行为
self 只触发自身事件,不会触发其他元素 与冒泡类似
captrue 捕获阶段触发的
once 只触发一次
left 左键触发
rigth 鼠标右键触发
middle鼠标中建触发
keyCode/keyalias 键盘状态码/键盘别名

vue渐进式开发的理解和指令的更多相关文章
- vue介绍以及相关概念理解大全
1.什么是vue 以官网的解释来说,vue是渐进式javascript框架.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 ...
- Vue渐进式JavaScript 框架
1. Vue简介 1.1 初步了解Vue.js框架 Vue.js (读音 /vjuː/,类似于 view) 是一种轻量级前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面 ...
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- vue+webpack开发(一)
一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手. 但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解. webpack顾名思 ...
- Vue项目开发目录结构
最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...
- Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)
想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...
- vue前端开发那些事——后端接口.net core web api
红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...
随机推荐
- python程序控制--分支结构
单分支结构 单分支结构猜数字 二分支结构 多分支结构 注意多条件之间的包含关系 注意变量取值范围的覆盖 条件判断及组合 程序的异常处理 输入一个整数,进行乘方操作, 但是,如果用户没有输入整数的时 ...
- C#开发PACS医学影像三维重建(一):使用VTK重建3D影像
VTK简介: VTK是一个开源的免费软件系统,主要用于三维计算机图形学.图像处理和可视化.Vtk是在面向对象原理的基础上设计和实现的,它的内核是用C++构建的. 因为使用C#语言开发,而VTK是C++ ...
- 计算几何(一):凸包问题(Convex Hull)
引言 首先介绍下什么是凸包?如下图: 在一个二维坐标系中,有若干点杂乱排列着,将最外层的点连接起来构成的凸多边型,它能包含给定的所有的点,这个多边形就是凸包. 实际上可以理解为用一个橡皮筋包含住所有给 ...
- python中获取中位数
普通方法: 对列表进行排序,然后根据长度为奇数或者偶数的不同情况计算中位数 def huahua(x): length = len(x) print(length) x.sort() print(x) ...
- PPT画成这样,述职答辩还能过吗?
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 标题有点凶,但内容很干! 大部分程序员并不会画PPT,也梳理不出架构图.工作的年头虽 ...
- 使用 Aria2 代替迅雷
一.原因 迅雷下载速度一般,thunder:// 开头的链接也逐渐被 bt 链接替代. 迅雷很流氓,安装后 (尤其是 Windows 系统) 浏览器默认使用迅雷下载,对于小文件来说使用浏览器内置下载可 ...
- 温故知新————c++ 多态
参考: 1. https://blog.csdn.net/weixin_42678507/article/details/89414998 (直接说明原理) 2 .https://www.cnblo ...
- P4279 [SHOI2008]小约翰的游戏(Anti_nim)
Link 题面 题目描述 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有 \(n\) 堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子, 在这堆石子中取走任意多的石子,但不 ...
- JavaCV FFmpeg采集摄像头YUV数据
前阵子使用利用树莓派搭建了一个视频监控平台(传送门),不过使用的是JavaCV封装好的OpenCVFrameGrabber和FFmpegFrameRecorder. 其实在javacpp项目集中有提供 ...
- RHSA-2018:0151-重要: 内核 安全和BUG修复更新(需要重启、存在EXP、本地提权)
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...