zoukankan      html  css  js  c++  java
  • 【JS】Vue.js实现简单的ToDoList(一)——前期准备

    一、前言

    最近开始学习轻量级的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:

    1 v-for="(item,index) in todo_items";

    3、绑定事件:Eg:

    1 v-on:click="toogleFinishi(item,index)";

    2.1 创建Vue实例

    在官网中使用了如下的方法来创建一个实例

    1 <div id="app">{{ message }}</div>
     1 var app = new Vue({
     2 
     3   el: '#app',
     4 
     5   data: {
     6 
     7     message: 'Hello Vue!'
     8 
     9   }
    10 
    11 })

    在这里,这个app这个变量就是我们使用构造函数new Vue()构造的一个实例,它是一个对象。那么我们对这个实例的操作就可以看为是对一个对象进行操作。

    我们现在来取一下app的message值。

    首先,取data:app.$data。(Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问)

    然后,取message:app.$data.message

    通过这个方法我们就可以取到实例中我们想要的属性值。

    Eg:

     1 vm = new Vue({
     2 
     3 el : 'test',
     4 
     5 data : {
     6 
     7 msg : ' app.$data.message '
     8 
     9 }
    10 
    11 })

    可以进行实例间的相互传至。

    2.2列表循环

    我们不需要再像原生js一样使用for()循环来渲染一个动态列表,

    直接使用:v-for="item in items"来进行渲染。类似于原生中for in的循环方法
    1 <div v-for="item in items">
    2 
    3   {{ item.text }}
    4 
    5 </div>

    2.3事件绑定

    在JQ中我们常常使用$().on('click',function(){});来进行点击事件绑定。

    在Vue中我们使用v-on:click="doSometing('a','b')";来绑定。
    Eg:
    1 <button v-on:click="doThis"></button>
    有了这3点,就可以开始编写这个简单的ToDoList了。
  • 相关阅读:
    函数指针和指针函数和回调函数以及函数指针数组
    C语言中的结构体,结构体数组
    linux中的shell脚本编程
    回车和换行在linux下和windows下
    内存的段式管理和页式管理,逻辑地址-虚拟地址-物理地址
    [CSAPP-II] 链接[符号解析和重定位] 静态链接 动态链接 动态链接接口
    c语言中函数调用的本质从汇编角度分析
    运算符优先级
    Redis实战经验及使用场景
    RESTful API 设计最佳实践【转】
  • 原文地址:https://www.cnblogs.com/GaoX/p/6118515.html
Copyright © 2011-2022 走看看