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. centos7+ docker 实践部署docker及配置direct_lvm

    转载于博客园:http://www.cnblogs.com/Andrew-XinFei/p/6245330.html 前言 Docker现在在后端是那么的火热..尤其当笔者了解了docker是什么.能 ...

  2. sass css样式:@for循环、样式变量与#{} 变量插值

    /* sass 可以用写JS的思想来写CSS代码         *   #{}                 用来插值,大括号中填写需要插入的变量         *   @for 变量 from ...

  3. 曹工说Spring Boot源码(15)-- Spring从xml文件里到底得到了什么(context:load-time-weaver 完整解析)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  4. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  5. OpenCV3入门1—环境搭建与实验

    1.环境搭建 1.1 VS2017开发环境搭建 1).下载软件包 https://opencv.org/ 2).配置环境变量 配置win10系统环境变量,把下面路径添加到path. D:\WORK\5 ...

  6. ORA-12547: TNS: 丢失连接

    今天服务器挂掉了,公司的人弄了一下,,把服务器修好了,,但是我本地链接数据库一直报这个ORA-12547: TNS: 丢失连接,是服务器上的TNS监听没有启动,需要重启一下,

  7. 70. Climbing Stairs QuestionEditorial Solution

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. 关于puremvc的几点思考

    软件框架 框架要解决的问题是什么?这个问题感觉不能一概而论,就目前我遇到的项目实际来说主要是要解决以下几个问题 复用 并行开发 跨平台 项目背景:视频监控领域下,C/S & B/S模式的PC客 ...

  9. python列表与元祖

    python 的列表和元素: 共同点:有序的 区别:1.列表可以修改增加删除列表内容,元组不能修改 联系:元组中包含列表的元素,可以修改列表元素. 分析:1.列表:LIST1=[1,2,3,4,5,6 ...

  10. 配置 Docker 加速器

    Linux curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io ...