VUE 是个 M V VM框架
vue基本使用
new出来一个Vue的实例,传一堆配置参数,控制一片html
VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM
new Vue 返回 VM
new Vue({
el:'选择器' 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})
M: 初始化数据
data 选项 number/string/boolean/array/json/undefined/null
V: 数据绑定 插值表达式|指令|属性
{{数据名}} 模板 mustache 插值表达式 声明式渲染
v-text="数据名" vue特有的属性(指令) (不解释标签)
v-html="strong" 非转义输出 ( 解释标签)
v-for="(val,index) in 数据" val值 index索引 变量数组、对象
默认 :key="index" 指定key 是个bmw字符 vue是认得 修改VDom的key值
:key="item.id" 指定key 是数据id(唯一性) 修改VDom的key值
key的优势: 避免数据错乱导致的视图问题,提供性能
v-bind:html属性="数据" 普通的html属性绑定数据
:html属性="数据" 简写 title/src/url/
事件:
v-on:事件名="方法"
@事件名="方法" 简写
@事件名="方法(参数)"
@事件名="方法($event,参数)" methods:{方法:function(ev,参数){ev/event}}
注意:vue提供的选项的值如果是函数时,不可用箭头函数
VUE 是个 M V VM框架的更多相关文章
- 如何实现VM框架中的数据绑定
作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...
- 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...
- 终于 Vue.js 成为世界一流的框架
终于 Vue.js 成为世界一流的框架 随着美团开源基于 Vue.js 的微信小程序框架 mpvue, Vue.js 在微信小程序端的能力被补齐,于是 Vue.js 成为了一个唯一能在 Web, H5 ...
- 使用vue,react,angular等框架和不使用框架使用jquery的优缺点
jquery和vue react等框架有着本质上的区别,从jquery到vue.react 或者说是到mvvm的转变,是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去. vue更关注 ...
- 基于vue实现一个简单的MVVM框架(源码分析)
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...
- angular vue react web前端三大主流框架的对比
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...
- 在vue或者react中使用express框架
在react 或者 vue项目中使用express框架 1.创建vue或者 react 项目 2.在项目中创建server文件夹,创建server.js //require()方法引入express模 ...
- vue、react、angular三大框架对比 && 与jQuery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
随机推荐
- [C语言学习笔记二] extern 函数的用法
extern 用来定义一个或多个变量.其后跟数据类型名和初始值.例如: extern int a =10 它与 int,long long int,double,char的本质区别,在于 extern ...
- idea中使用Live Template自动生成方法所有参数打印
一 新建模板 二 设置代码模板 三 设置变量 表达式是支持groovy脚本的,所以这里写一个groovy脚本,生成给定格式的日志字符串,methodParameters()是idea内置的函数,获取方 ...
- JVM性能分析 | 一次生产系统Full GC问题分析与排查总结
一次生产系统Full GC问题分析与排查总结 背景 最近某线上业务系统生产环境频频CPU使用率过低,频繁告警,通过重启可以缓解,但是过了一段时间又会继续预警,线上两个服务节点相继出现CPU资源紧张,导 ...
- Docker(二):理解容器编排工具Kubernetes内部工作原理
一.Kubernetes是什么 要说到Docker就不得不说说Kubernetes.当Docker容器在微服务的环境下数量一多,那么统一的,自动化的管理自然少不了.而Kubernetes就是一个这样的 ...
- centos最小化安装时网络配置
查看网卡: ip addr 修改网络配置文件 vi /etc/sysconfig/network-scripts/ifcfg-enp33 BOOTPROTO=dhcp ONBOOT=yes 重启网络服 ...
- TLS使用指南(一):如何在Rancher 2.x中进行TLS termination?
引 言 这是一个系列文章,我们将在本系列中探索Rancher使用TLS证书的不同方式.TLS,安全传输层协议,是用于保护网络通信的加密协议.它是目前已经弃用的安全套接层(SSL)的继任者. 你可以从本 ...
- 遇到的一些在ie下的兼容问题和解决方案(ie10+)
1,ie 10下实现水平垂直居中,不固定高度的话,正常的top:50%,left:50%,transform(translate(-50%,-50%)) 是不能实现的,ie下top:50%会失去效果. ...
- 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
- 每日一练_PAT_B1001
鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!——熊字”.鲁宾逊先生和多多都很开心,因为花生正是他们的最爱.在 ...
- ARTS Week 5
Nov 25, 2019 ~ Dec 1, 2019 Algorithm 深度优先搜索--书籍分配 题目描述:有b1-b5五本书,要分配给五个学生,分别是a1-a5.但每个学生都有其喜欢的书,要检查是 ...