Heim > Artikel > Web-Frontend > Erster Kontakt mit dem magischen Frontend-Framework vue.js

Erster Kontakt mit dem magischen Frontend-Framework vue.js

高洛峰Original: 2016-12-03 10:11:361681Durchsuche

Vorwort

Beginnen Sie mit vue.js, einem der beliebtesten Front-End-Frameworks im Jahr 2016. Ich habe wahrscheinlich einige Informationen im Internet gefunden und mir vue.js angesehen. Den Informationen im Internet nach zu urteilen, kann ich nur staunen, dass das Werk so beliebt ist, wenn man bedenkt, dass es sich um einen Chinesen handelt. Verschiedene Kombinationen aus Blogs und Tutorials online. So sehr, dass ich mich ein wenig deprimiert fühlte. Verschiedene vue+webpack, vue+react, vue+es6+npm usw. Eine umwerfende Auswahl an Artikeln. Es ist wirklich unmöglich, Liu Shaoqi einzuholen, wenn er drei Tage lang nicht lernt.

Am Anfang geht es hauptsächlich darum, vue.js zum ersten Mal kennenzulernen, einschließlich v-model, v-if, v-else, v-show, v-for (2.0 verwirft $index und $key , 2.0 verwendet index Die Attributsyntax lautet v-for="(person,index) in personen"), v-on.

Sehen Sie sich das Bild an

Erster Kontakt mit dem magischen Frontend-Framework vue.js

Sehen Sie sich den Code an

<!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:&#39;#app&#39;,
 data:{
 editLock:1,
 newPerson:{
 id:0,
 name:&#39;&#39;,
 age:0,
 sex:&#39;male&#39;
 },
 persons:[{
 id:1,
 name: &#39;Jack&#39;,
 age: 30,
 sex: &#39;Male&#39;
 }, {
 id:2,
 name: &#39;Bill&#39;,
 age: 26,
 sex: &#39;Male&#39;
 }, {
 id:3,
 name: &#39;Tracy&#39;,
 age: 22,
 sex: &#39;Female&#39;
 }, {
 id:4,
 name: &#39;Chris&#39;,
 age: 36,
 sex: &#39;Male&#39;
 }]
 },
 methods:{
 create:function(){
 this.persons.push(this.newPerson);
 this.newPerson={id:0,name:&#39;&#39;,age:0,sex:&#39;male&#39;};
 },
 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:&#39;&#39;,age:0,sex:&#39;male&#39;};
 },
 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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie einen Schiebeschalter mit jQueryNächster Artikel：So implementieren Sie einen Schiebeschalter mit jQuery

In Verbindung stehende Artikel

Mehr sehen