当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-25 01:17 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] 入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js，从网上的资料来看只能惊叹其发展速度太快，让我意外的是其作者是华人的前提下作品这么受欢迎。网上的博客和教程各种组合。以至于我都有些感觉out。各种vue+webpack、vue+react、vue+es6+npm等等。琳琅满目。真是三天不学习赶不上刘少奇。开篇主要是初次了解下vue.js，包括[b]v-model、v-if、v-else、v-show、v-for[/b](2.0对$index和$key舍弃，2.0要用index属性语法为 v-for="(person,index) in persons")、[b]v-on[/b]。 [b]看图[/b] [b][img]http://files.jb51.net/file_images/article/201612/2016121140842301.jpg?201611114851[/img] [/b] [b]看代码[/b]

<!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>

参考资料: [url=https://cn.vuejs.org/v2/guide/routing.html]https://cn.vuejs.org/v2/guide/routing.html[/url] [url=http://www.1sucai.cn/article/98791.htm]http://www.1sucai.cn/article/98791.htm[/url] [url=http://www.1sucai.cn/article/96426.htm]http://www.1sucai.cn/article/96426.htm[/url] 本文已被整理到了《[url=http://www.1sucai.cn/Special/874.htm]Vue.js前端组件学习教程[/url]》，欢迎大家学习阅读。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：ros::spin() 和 ros::spinOnce()函数的区别及详解
下一篇：在原生不支持的旧环境中添加兼容的Object.keys实现方法

资讯排行榜
更多>>