菜单

Vue.js完成轻巧ToDoList 先前时代企图(一)

2019年8月24日 - Json

Vue.js达成轻松ToDoList 中期准备(一),vue.jstodolist

一、前言

近年始发读书轻量级的mvvm框架Vue.js。就中文文书档案来讲,算是很齐全了。此前本来在读书1.0本子,某日顿然展开官方网站发掘已更新为2.0。便把今后的都改为了2.0的语法。ps:如若恰巧你是Vue的初学者的话,慕课网络有四个录像倒是能够去学学参照他事他说加以考察(作者正是参照那多少个写了个ToDoList的小玩具,在这记录一下上学进度)。

二、开篇 mvvm框架是前边一个以后可比销路广的话题,去应聘英特网转一圈,基本八成皆有供给。所以不说虚的,只是为了多挣点钱,大家也该跟上一代的脚步不是。推荐一篇博文‘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前端组件学习课程》,接待我们学习阅读。

如上就是本文的全部内容,希望对我们的就学抱有帮忙,也愿意大家多多援救帮客之家。

http://www.bkjia.com/Javascript/1176546.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1176546.htmlTechArticleVue.js实现简单ToDoList
中期策画(一),vue.jstodolist 一、前言
前段时间开班上学轻量级的mvvm框架Vue.js。就普通话文书档案来讲,算是很齐全了。在此以前本…

一、前言

前不久启幕上学轻量级的mvvm框架Vue.js。就普通话文书档案来讲,算是很齐全了。在此之前本来在念书1.0版本,某日忽地张开官方网站发掘已履新为2.0。便把未来的都改为了2.0的语法。ps:若是正好你是Vue的初学者的话,慕课英特网有一个摄像倒是能够去学习参照他事他说加以考察(小编正是参照那三个写了个ToDoList的小玩意儿,在那记录一下学学进度)。

二、开篇 mvvm框架是后边二个将来比较看好的话题,去58同城络转一圈,基本五分四都有须求。所以不说虚的,只是为着多挣点钱,我们也该跟上一世的步子不是。推荐一篇博文‘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前端组件学习课程》,款待大家学习阅读。

如上正是本文的全体内容,希望对我们的上学抱有帮忙,也可望我们多多帮衬脚本之家。

你大概感兴趣的小说:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图