第一次接触神奇的前端框架vue.js
2016-12-01 00:00
786 查看
前言
入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎。 网上的博客和教程各种组合。以至于我都有些感觉out。各种vue+webpack、vue+react、vue+es6+npm等等。琳琅满目。真是三天不学习赶不上刘少奇。
开篇主要是初次了解下vue.js,包括v-model、v-if、v-else、v-show、v-for(2.0对$index和$key舍弃,2.0要用index属性语法为 v-for="(person,index) in persons")、v-on。
看图
看代码
参考资料:
https://cn.vuejs.org/v2/guide/routing.html
https://www.geek-share.com/detail/2691522542.html
https://www.geek-share.com/detail/2689157518.html
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
JS框架之vue.js(深入三:组件1)
前端框架Vue.js中Directive知识详解
前端框架Vue.js构建大型应用浅析
vue.js初学入门教程(2)
Vue.js 60分钟轻松入门
Vue.js快速入门实例教程
webpack+vue.js快速入门教程
vue.js入门教程之绑定class和style样式
JavaScript的Vue.js库入门学习教程
入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎。 网上的博客和教程各种组合。以至于我都有些感觉out。各种vue+webpack、vue+react、vue+es6+npm等等。琳琅满目。真是三天不学习赶不上刘少奇。
开篇主要是初次了解下vue.js,包括v-model、v-if、v-else、v-show、v-for(2.0对$index和$key舍弃,2.0要用index属性语法为 v-for="(person,index) in persons")、v-on。
看图
看代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js CURD</title> <meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div class="row" id="app"> <div class="col-xs-12 col-md-8"> <fieldset> <legend>New Person</legend> <div class="form-group"> <label>ID</label> <input type="text" v-model="newPerson.id"/> </div> <div class="form-group"> <label>Name:</label> <input type="text" v-model="newPerson.name"/> </div> <div class="form-group"> <label>Age:</label> <input type="text" v-model="newPerson.age"/> </div> <div class="form-group"> <label>Sex:</label> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label></label> <button @click="createorupdate">ok</button> </div> </fieldset> </div> <div class="col-xs-12 col-md-8"> <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>name</th> <th>age</th> <th>sex</th> </tr> </thead> <tbody> <tr v-for="(person,index) in persons"> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.sex}}</td> <td><button @click="deletePerson(index)">delete</button></td> <td><button @click="update(index)">update</button></td> </tr> </tbody> </table> </div> </div> <script> Array.prototype.arrIndex=function(obj){ for(let i=0;i<this.length;i++){ var tmp=this[i]; if(tmp==obj){ return i; } } } var vm=new Vue({ el:'#app', data:{ editLock:1, newPerson:{ id:0, name:'', age:0, sex:'male' }, persons:[{ id:1, name: 'Jack', age: 30, sex: 'Male' }, { id:2, name: 'Bill', age: 26, sex: 'Male' }, { id:3, name: 'Tracy', age: 22, sex: 'Female' }, { id:4, name: 'Chris', age: 36, sex: 'Male' }] }, methods:{ create:function(){ this.persons.push(this.newPerson); this.newPerson={id:0,name:'',age:0,sex:'male'}; }, createorupdate:function(){ if(this.editLock===1){ this.persons.push(this.newPerson); }else{ //删除老对象 var aindex=this.persons.arrIndex(this.newPerson); console.log(aindex); this.persons.splice(aindex,1); //插入新对象 this.persons.push(this.newPerson); } this.newPerson={id:0,name:'',age:0,sex:'male'}; }, deletePerson:function(idx){ this.persons.splice(idx,1); }, update:function(idx){ var p =this.persons[idx]; this.editLock=0; this.newPerson=p; } } }) </script> </body> </html>
参考资料:
https://cn.vuejs.org/v2/guide/routing.html
https://www.geek-share.com/detail/2691522542.html
https://www.geek-share.com/detail/2689157518.html
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
Vue.js 2.0 和 React、Augular等其他前端框架大比拼JS框架之vue.js(深入三:组件1)
前端框架Vue.js中Directive知识详解
前端框架Vue.js构建大型应用浅析
vue.js初学入门教程(2)
Vue.js 60分钟轻松入门
Vue.js快速入门实例教程
webpack+vue.js快速入门教程
vue.js入门教程之绑定class和style样式
JavaScript的Vue.js库入门学习教程
相关文章推荐
- 第一次接触神奇的前端框架vue.js
- 七周七种前端框架四:Vue.js Directive
- 认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别
- 前端框架vue.js系列(2):条件与循环
- 前端框架vue.js系列(11):元素动画过渡效果
- 前端框架vue.js系列(7):父子组件参数变化传递规范
- 七周七种前端框架四:Vue.js 构建大型应用
- vue.js 对比 angularJS、react 前端框架
- 前端框架vue.js系列(4):事件修饰符与按键修饰符
- 前端框架vue.js系列(1):基础及语法
- vue.js与其他前端框架的对比
- 前端框架vue.js系列(10):生命周期钩子函数
- 前端框架Vue.js中Directive知识详解
- Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0
- 前端mvvm框架vuejs教程集合
- 七周七种前端框架四:Vue.js 概览
- Vue.js 2.0 和 React、Augular等其他前端框架大比拼
- Web前端框架bootstrap实战【第一次接触使用】
- 前端框架大比拼:Angularjs vs Reactjs vs Vue.js
- 前端框架vue.js系列(8):嵌套元素、导入外部文件作为模板