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渐进式开发的理解和指令的更多相关文章

  1. vue介绍以及相关概念理解大全

    1.什么是vue 以官网的解释来说,vue是渐进式javascript框架.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 ...

  2. Vue渐进式JavaScript 框架

    1. Vue简介 1.1  初步了解Vue.js框架 Vue.js (读音 /vjuː/,类似于 view) 是一种轻量级前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面 ...

  3. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  4. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  5. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  6. vue+webpack开发(一)

    一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手. 但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解. webpack顾名思 ...

  7. Vue项目开发目录结构

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...

  8. Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)

    想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...

  9. vue前端开发那些事——后端接口.net core web api

    红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...

随机推荐

  1. Windows下安装Nginx及负载均衡

    1.下载Windows版本的Nginx http://nginx.org/en/download.html 2.解压Nginx包,配置conf文件下的nginx.conf文件 3.配置说明: #use ...

  2. php第六天-UNIX时间戳/格式化时间,程序错误发送的领域

    ###0x01 PHP的错误处理 1.1 错误报告级别 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运 ...

  3. 容器云平台No.10~通过gogs+drone+kubernetes实现CI/CD

    什么是CI/CD 持续集成(Continous Intergration,CI)是一种软件开发实践,即团队开发成员经常集成它们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每 ...

  4. 802.1X 账号密码+设备信息双重认证

    名词解释 802.1X: IEEE802 LAN/WAN 委员会为解决无线局域网网络安全问题,提出了 802.1X 协议.后来,802.1X协议作为局域网端口的一个普通接入控制机制在以太网中被广泛应用 ...

  5. 软件定义网络实验记录②--Mininet 实验——拓扑的命令脚本生成

    一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. 三. ...

  6. mapreduce的一些简单使用

    一.键值对RDD的创建 1.从文件中加载 /opt目录下创建wordky.txt文件. wordky.txt文件中输入以下三行字符: Hadoop is good Spark is fast Spar ...

  7. Linux 串口工具 lsz lrz 移植

    //之前写的,刚才不小心误删了,所以重新再发出来. 1 下载源码包 首先下载最新版的lrzsz,地址:https://ohse.de/uwe/software/lrzsz.html.下面以 0.12. ...

  8. 这一次,彻底理解JavaScript深拷贝

    导语 这一次,通过本文彻底理解JavaScript深拷贝! 阅读本文前可以先思考三个问题: JS世界里,数据是如何存储的? 深拷贝和浅拷贝的区别是什么? 如何写出一个真正合格的深拷贝? 本文会一步步解 ...

  9. 多线程循环打印数组 -- Java笔记

    问题描述: 现有多个长度相同的数组,现要求使用多线程将数组内的数交替打印. 如: int[] ai = {1,2,3,4,5,6,7}; String[] ac = {"A",&q ...

  10. JDK1.8新特性之(一)--Lambda表达式

    近期由于新冠疫情的原因,不能出去游玩,只能在家呆着.于是闲来无事,开始阅读JDK1.8的源代码.在开始之前也查询了以下JDK1.8的新特性,有针对性的开始了这段旅程. 只看不操作,也是不能心领神会的. ...