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 ...
随机推荐
- MySQL拼接字符串,GROUP_CONCAT 值得拥有
上一篇文章 跨表更新,看到自己写的SQL像个憨憨写了关于跨表个更新的内容.一年过的很快,文中后来的两位员工 馮大 和 馮二 也要面对无情的 KPI 考核了,他们工作干的很不错,performance ...
- oc---类方法load和initialize的区别
在iOS开发中,就像Application有生命周期回调方法一样,在Objective-C的类被加载和初始化的时候,也可以收到方法回调,可以在适当的情况下做一些定制处理.而这正是本篇文章所要介绍的lo ...
- mysql--->B+tree索引的设计原理
1.什么是数据库的索引 每种查找算法都只能应用于特定的数据结构之上,例如二分查找要求被检索数据有序,而二叉树查找只能应用于二叉查找树上,但是数据本身的组织结构不可能完全满足各种数据结构(例如,理论上不 ...
- 并发队列之LinkedBlockingQueue
上一篇我们看了一下这个队列ConcurrentLinkedQueue,那就是一个无界非阻塞链表,我们这次来看看LinkedBlockingQueue,这个队列看名字就知道是一个阻塞式队列(也就是一个单 ...
- django3.x版本不支持MySQL5.x版本
其实django2.0版本已经不再支持MySQL5.x的了,最开始是安装了MySQL5.1,在学习django 的时候,django版本为3.0,在执行`python manage.py migrat ...
- 一、Shell概述
什么是Shell 解释Shell脚本名词之前,我们先来说下什么是Shell? Shell是一个命令解释器,它在操作系统的最底层,负责直接与用户对话,把用户的输入解释给操作系统,并处理各种各样的操作系统 ...
- 加快Chrome网页开启速度
谷歌浏览器一直是众多大神心中的最爱,但是对于启动速度还是有一些纠结,这里找到一个好方法可以加快一些启动的速度,亲测有效. 1.地址栏输入chrome://flags: 2.启用"覆盖软件渲染 ...
- Request和Session的生命周期
request的生命周期是request请求域,一个请求结束,则request结束 session的生命周期是session会话域,打开一个浏览器请求一个网站的页面后,Session开始,当sessi ...
- Codeforces_846
A.简单dp. #include<bits/stdc++.h> using namespace std; ],dp[][] = {}; int main() { ios::sync_wit ...
- HDU_2446_打表
http://acm.hdu.edu.cn/showproblem.php?pid=2446 打表,二分查找,注意查找最后的判断. #include<cstdio> #define N 2 ...