집 > 기사 > 웹 프론트엔드 > 마법의 프론트엔드 프레임워크 vue.js와의 첫 접촉

마법의 프론트엔드 프레임워크 vue.js와의 첫 접촉

高洛峰원래의: 2016-12-03 10:11:361679검색

머리말

2016년 가장 인기 있는 프런트엔드 프레임워크 중 하나인 vue.js로 시작해 보세요. 아마 인터넷에서 정보를 좀 찾아 vue.js를 봤는데, 인터넷에 있는 정보로 판단하면 그 빠른 발전에 놀랐을 뿐입니다. 작가가 중국인이라는 점을 감안하면 이 작품이 워낙 인기가 많다는 거죠. 블로그와 온라인 튜토리얼의 다양한 조합. 너무 많아서 조금 기분이 나빴습니다. 다양한 vue+webpack, vue+react, vue+es6+npm 등 눈부신 아이템 배열. Liu Shaoqi가 3일 동안 공부하지 않으면 따라잡는 것은 정말 불가능합니다.

시작은 주로 v-model, v-if, v-else, v-show, v-for($index 및 $key는 폐기됨)를 포함하여 vue.js를 처음으로 알아가는 것입니다. 2.0에서는 index가 2.0에서 사용됩니다. 속성 구문은 v-for="(person,index) in people"), v-on입니다.

사진보기

마법의 프론트엔드 프레임워크 vue.js와의 첫 접촉

코드보기

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

성명：

이전 기사：jQuery를 사용하여 슬라이딩 버튼 스위치를 구현하는 방법다음 기사：jQuery를 사용하여 슬라이딩 버튼 스위치를 구현하는 방법

마법의 프론트엔드 프레임워크 vue.js와의 첫 접촉

관련 기사