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 ...
随机推荐
- Git详解之分布式应用
前言 为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git ...
- learn more ,study less(二):整体性学习技术(下)
随意信息的处理 随意信息,或者内容太多.太复杂的信息,都不容易理解,它们需要不同的技术.假 如你发现联想法不能帮助你理解材料,或者需要花费的时间太长,这时候处理随意信息的方 法就很适合了. 这些处理随 ...
- Oracle批量创建同义词
一.介绍 Oracle的同义词(synonyms)从字面上理解就是别名的意思,和视图的功能类似,就是一种映射关系.它可以节省大量的数据库空间,对不同用户的操作同一张表没有多少差别;它扩展了数据库的使用 ...
- CentOS 7 上CNVnator安装
1.到github上下载最新版本 https://github.com/abyzovlab/CNVnator/releases 2.先看INSTALL文件,要求以下依赖,我的机器上已经安装了前两个,所 ...
- phpstrom激活码
今天PHPstorm又到期了,从网上找到一个激活码的网址,很好用,说是会时时更新的,所以特意记录一下 获取地址:https://www.php.cn/tool/phpstorm/408348.html
- 暑假第四周总结(HDFS编程实践,安装HBASE)
本周根据书上以及教程的提示,对HDFS进行了编程实践,将教程所给的代码(判断文件是否存在,创建文件,读取文件)进行了应用,根据视频的讲解,对一些简单的语句有了一定的了解,但还是比较生疏.另外还根据提示 ...
- 自己动手开发手机APP控制西门子200smart 教程(原创干货)
自己动手开发手机APP控制西门子200smart 教程(原创干货) 自己动手开发手机APP控制西门子200smart 教程(原创干货) 2020-02-09 19:06:45 自己动手开发手机AP ...
- C++类中拷贝构造函数详解
a. C++标准中提到"The default constructor, copy constructor and copy assignment operator, and destruc ...
- eclipse运行python 安装pydev 版本匹配问题
Eclipse 4.5, Java 8: PyDev 5.2.0 PyDev 5.2.0 版本路径:https://dl.bintray.com/fabioz/pydev/5.2.0 1.安装时注意: ...
- postman批量接口测试/批量导入/批量参数化简要全过程及遇到问题处理方法
简单说明下postman批量接口调用的过程及注意事项: 1.报文调试(建议先调通再批量执行,统筹安排时间) 2.参数化,例如: "address": "{{address ...