基本结构

<div id="app">

{{ message }}

</div>

var app = new Vue({

el: '#wrap',

data: {//数据

msg: 'Hello 初心わするべからず!',

arr:['apple','banana','orange','pear'],

json:{a:'apple',b:'banana',c:'orange'}

},

methods:{//方法

show:function(){

alert(1);

}

},

watch:{//设置其监听方法

}

})

指令: 扩展html标签功能,属性

数据渲染:

v-text  v-html

循环:

v-for="name in arr"

{{$index}}

v-for="name in json"

{{$index}} {{$key}}

v-for="(v,k) in json"

事件:

v-on:click="函数"  or  v-bind:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

显示隐藏:

v-if=" " or  v-show=“true/false”

修饰符:

<a @click.stop="doSomething"></a>//阻止单击事件冒泡

<input @keyup.enter="submit">//只在按下回车键的时候触发事件

传统的MVC:

A:大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护

B:大量DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验

C:无论如何,只要Model发生变化,我们都要将变化的数据更新到View,若数据复杂多变将很难维护

MVVM:以上三个都不是问题

适合移动端项目 小巧 (不兼容IE)  API简洁

vuejs(2.0)基础笔记的更多相关文章

  1. TensorFlow基础笔记(0) 参考资源学习文档

    1 官方文档 https://www.tensorflow.org/api_docs/ 2 极客学院中文文档 http://www.tensorfly.cn/tfdoc/api_docs/python ...

  2. Java基础笔记 – Annotation注解的介绍和使用 自定义注解

    Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 |  被围观 25,969 views+ 1.Anno ...

  3. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  4. DirectX 总结和DirectX 9.0 学习笔记

    转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...

  5. MYSQL基础笔记(六)- 数据类型一

    数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...

  6. MYSQL基础笔记(五)- 练习作业:站点统计练习

    作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...

  7. MYSQL基础笔记(三)-表操作基础

    数据表的操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名( 字段名 数据类型, 字段名 数据类型, 字段n 数据类型 --最后一行不需要加逗号 ...

  8. MYSQL基础笔记(二)-SQL基本操作

    SQL基本操作 基本操作:CRUD,增删改查 将SQL的基本操作根据操作对象进行分类: 1.库操作 2.表操作 3.数据操作 库操作: 对数据库的增删改查 新增数据库: 基本语法: Create da ...

  9. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

随机推荐

  1. windows将某个应用加入开机启动项的解决办法

    找到计算机以下位置,将要加入开机启动项的程序的快捷方式直接Copy到该目录下,下次开机该程序则会自动启动 C:\Users\pc\AppData\Roaming\Microsoft\Windows\S ...

  2. cas单点登录如何获取更多信息

    现在有个新的系统(SpringMVC+Spring+Mybatis),我为它添加了一个单点登录功能.只是在本地客户端的web.xml文件里,添加了以下配置 <!-- 用于单点退出,该过滤器用于实 ...

  3. Codeforces Round #439 (Div. 2) C DP(图论)

    C. The Intriguing Obsession time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. MongoDB复制

    1. 什么是复制 (1)MongoDB复制是将数据同步在多个服务器的过程. (2)复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性, 并可以保证数据的安全性. (3)复制还允 ...

  5. PHP设计模式二:单例模式

    一.什么是单例模式 作为对象的创建模式,单例模式确保某一个类只有一个实例,并且对外提供这个全局实例的访问入口.它不会 创建实例副本,而是会向单例类内部存储的实例返回一个引用. 二.PHP单例模式三要素 ...

  6. 通过Struts了解MVC框架,兼说如何在面试中利用Struts证明自己

    虽然目前Struts MVC框架不怎么用了,但它确是个能帮助大家很好地入门Web MVC框架,而且,一些历史项目可能还用Struts,反正技多不压身,大家如果能在面试中通过项目证明自己Struts这块 ...

  7. url 地址处理(截取,参数等)

    function hrefObj() { var localhref = window.location.href; var localarr = localhref.split('?')[1].sp ...

  8. 关于在Python下安装布隆过滤器(bloomfilter)的方法

    由于在爬虫代码中需要实现信息的去重功能,所以需借助bloomfilter,在看完各种博客后发现没有安装,这就尴尬了,不会连门都找不到吧.那就安装呗,各种错误,查看官方文档:http://axiak.g ...

  9. 2016 湖南省省赛 Problem A: 2016

    Problem A: 2016 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 296  Solved: 171 Description  给出正整数 n ...

  10. 隐藏input的光标

    https://segmentfault.com/q/1010000000684888 https://wap.didialift.com/beatles/campaign/driver/activi ...