手机版

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

时间:2021-09-11 来源:互联网 编辑:宝哥软件园 浏览:

前言

入手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前端组件学习教程》 ,欢迎大家学习阅读。

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

版权声明:第一次接触神奇的前端框架vue.js是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。