一、前言
最近开始学习轻量级的mvvm框架Vue.js。就中文文档来说,算是很齐全了。之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0。便把之后的都改为了2.0的语法。ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程)。
二、开篇
mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求。所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是。推荐一篇博文‘http://www.cnblogs.com/xueduanyang/p/3601471.html',我觉得讲的挺透,辩证的看嘛。
废话多了,现在进入正文
/***************************************************************/
在这个todolist当中,一共需要的Vue.js点有:
1、创建Vue实例:Eg:
var vm=new Vue();
2、列表渲染:Eg:
v-for="(item,index) in todo_items";
3、绑定事件:Eg:
v-on:click="toogleFinishi(item,index)";
2.1 创建Vue实例
在官网中使用了如下的方法来创建一个实例
<div id="app">{{ message }}</div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
在这里,这个app这个变量就是我们使用构造函数new Vue()构造的一个实例,它是一个对象。那么我们对这个实例的操作就可以看为是对一个对象进行操作。
我们现在来取一下app的message值。
首先,取data:app.$data。(Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问)
然后,取message:app.$data.message。
通过这个方法我们就可以取到实例中我们想要的属性值。
Eg:
vm = new Vue({ el : 'test', data : { msg : ' app.$data.message ' } })
可以进行实例间的相互传至。
2.2列表循环
我们不需要再像原生js一样使用for()循环来渲染一个动态列表,
直接使用:v-for="item in items"来进行渲染。类似于原生中for in的循环方法
<div v-for="item in items"> {{ item.text }} </div>
2.3事件绑定
在JQ中我们常常使用$().on('click',function(){});来进行点击事件绑定。
在Vue中我们使用v-on:click="doSometing('a','b')";来绑定。
Eg:
<button v-on:click="doThis"></button>
有了这3点,就可以开始编写这个简单的ToDoList了。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍vue.js todolist实现代码,包括了vue.js todolist实现代码的使用技巧和注意事项,需要的朋友参考一下 案例知识点: 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 App.vue代码 总结 以上所述是小编给大家介绍的vue.js todolist实现代码,希望对的大家有所帮助!
本文向大家介绍vue.js实例todoList项目,包括了vue.js实例todoList项目的使用技巧和注意事项,需要的朋友参考一下 新建组件todoList.vue,在App.vue中引入 三处缺一不可,第一处引入文件,第二处注册组件,第三处声明组件位置 由于html中不区分大小写,所以驼峰命名方式中的大写变为-,即第三处中写成todo-list,不理解的可以动手实验一下! todoList
下载 Rust 源代码(供 racer 使用) 从github下载 git clone https://github.com/rust-lang/rust.git 从官网下载源代码包 下载地址: https://static.rust-lang.org/dist/rustc-nightly-src.tar.gz 使用rustup下载(推荐) 使用rustup获取源码最大的好处在于可以使用rustu
本文向大家介绍vue.js 2.0实现简单分页效果,包括了vue.js 2.0实现简单分页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue.js 2.0实现分页效果的具体代码,供大家参考,具体内容如下 效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
如果我们手工安装 LNMP 环境,那么同样需要安装大概 14 个源码包(根据版本和功能不同而不同)。不过,现在网上非常流行的 LNMP 环境的搭建过程是采用 LNMP 一键安装包直接安装。这个一键安装包实际上就是一个事先写好的安装脚本,按照这个安装脚本,只要指定一些基本的选项,就可以完全自动安装,所以安装过程会大大简化。 下面,我们就使用一键安装包来搭建 LNMP 环境。不过在安装之前还是要做一些
本文向大家介绍Vue.js实现简单动态数据处理,包括了Vue.js实现简单动态数据处理的使用技巧和注意事项,需要的朋友参考一下 直接上代码吧 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。