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框架的更多相关文章

  1. 如何实现VM框架中的数据绑定

    作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...

  2. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  3. 终于 Vue.js 成为世界一流的框架

    终于 Vue.js 成为世界一流的框架 随着美团开源基于 Vue.js 的微信小程序框架 mpvue, Vue.js 在微信小程序端的能力被补齐,于是 Vue.js 成为了一个唯一能在 Web, H5 ...

  4. 使用vue,react,angular等框架和不使用框架使用jquery的优缺点

    jquery和vue react等框架有着本质上的区别,从jquery到vue.react 或者说是到mvvm的转变,是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去. vue更关注 ...

  5. 基于vue实现一个简单的MVVM框架(源码分析)

    不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...

  6. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  7. 在vue或者react中使用express框架

    在react 或者 vue项目中使用express框架 1.创建vue或者 react 项目 2.在项目中创建server文件夹,创建server.js //require()方法引入express模 ...

  8. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

  9. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

随机推荐

  1. 解题笔记——NIT 遥远的村庄

    某个小镇有 N 个村庄,村庄编号1-N,给出 M 条单向道路,不存在环,即不存在 村庄A可以到达村庄B 且 村庄B也可以到达村庄A的情况.如果村庄A与村庄B之间存在一条单向道路,则说村庄A和村庄B之间 ...

  2. 冬日曙光——回溯CNN的诞生

    前言 卷积神经网络(CNN)作为深度学习的重要一支,在当前计算机视觉领域应用相当广泛.本文回顾了深度学习的发展历程,讲述CNN基本的理论概念和第一代卷积神经网络LeNet-5的建立.文章言有不当之处, ...

  3. 使用NetBenchmark压测TCP,HTTP和Websocket服务

    NetBenchmark是针对网络服务压测订制的开源组件,组件提供TCP,HTTP和Websocket的压力测试基础功能:为了更好的符合业务需求组件不提供UI配置信息源的方式(毕竟这种方式只能作有限制 ...

  4. js 字符串方法 和 数组方法总览

    字符串方法        search()             方法搜索特定值的字符串,并返回匹配的位置.         相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...

  5. 图像GIST特征和LMGIST包的python实现(有github)

    1什么是Gist特征        (1) 一种宏观意义的场景特征描述        (2) 只识别"大街上有一些行人"这个场景,无需知道图像中在那些位置有多少人,或者有其他什么对 ...

  6. "@阅后即焚"上线了!

    前一阵发现了一个有趣的网站,他可以让你的文字在显示一次后销毁. 直到我把网站发给一个朋友,网站打不开了,于是就想着开发一个. 前端用的bootstrap这个框架,后端用PHP写的,没有后台,现在还不需 ...

  7. appcompat_v7 res values-v21 error

    [2014-11-03 11:30:25 - AndroidApp] appcompat_v7/res/values-v21/styles_base.xml:75: error: Error retr ...

  8. C++:析构函数的调用时机

    结论:只有当类的某个实例化对象的构造函数执行完毕,而且当该对象退出作用域时,才会执行析构函数. 如果在执行构造函数的过程中抛出了异常,就不会调用析构函数 上测试代码: class Test { pub ...

  9. js 常用总结

    1.截取字符串 var a="/s/d";   console.log(a.substr(0,a.indexOf("/",1)))  // 得到/s 2. // ...

  10. 加密算法极先锋之MD5算法

    在开发过程中,避免不了要涉及到数据加密,比如用户账号密码的加密,用户敏感数据的加密,涉及到的加密算法种类繁多,作为拿来主义的开发者时间精力有限,能够清楚其中主流的加密算法和用途,就已经足够了. 主要的 ...