第一次接触神奇的前端框架vue.js

前言

入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js，从网上的资料来看只能惊叹其发展速度太快，让我意外的是其作者是华人的前提下作品这么受欢迎。网上的博客和教程各种组合。以至于我都有些感觉出去。各种vue webpack、vue react、vue es6 npm等等。琳琅满目。真是三天不学习赶不上刘少奇。

开篇主要是初次了解下vue.js，包括v型、v-if、v-else、v-show、v-for(2.0对$索引和$key舍弃，2.0要用指数属性语法为v-for='(person，index) in persons ')、v-on。

看图

看代码

！DOCTYPE html html head meta charset=' UTF-8 ' title vue。js曲线/title meta id=' viewport ' name=' viewport ' content=' width=device-width，最小刻度=1,最大刻度=1' link rel='样式表href=' http://cdn。bootscs。com/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' script src=' http 3360https://unpkg。com/vue/dist/vu长度；I){ var tmp=这个[I]；if(tmp==obj){ return I；} } } var vm=new Vue({ el:'#app '，data:{ editLock:1，newPerson: { id:0，name 3: ' '，age:0，sex: '男性})，人3360[{ id :1，姓名： 'Jack '，年龄3:性别： '男性}，{ id 3360 this . newperson={ id :0，name: ' '，age:0，sex: '男性' };}，createorupdate :函数(){ if(this。editlock====1){ this。人。推(这个。new person)；}else{ //删除老对象var ain dex=这个。人。arrindex(这个。new person)；控制台。日志(ain dex)；this.persons.splice(aindex，1)；//插入新对象这个。人。推(这个。新人)；} this.newPerson={id:0，name: ' '，age:0，sex: '男性' };}，删除person :函数(idx){ this。人。拼接(idx，1)；}，更新：函数(idx){ var p=this。人员[idx]；这个。edit lock=0；这个。NewPerson=p；} } })/脚本/正文/html参考资料：

https://cn.vuejs.org/v2/guide/routing.html

//www .JB 51。net/article/98791。html文件的后缀

//www .JB 51。net/article/96426。html文件的后缀

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。