Vue.js 양식 제어 연습

高洛峰원래의: 2016-12-08 15:30:341292검색

최근 프로젝트에서는 DOM 데이터 업데이트를 처리하기 위해 번거로운 jquery를 대체하는 데 vue가 사용되었습니다. 그래서 공식 웹사이트에 가서 조금 연습해 보았습니다.

다음은 폼컨트롤 연습입니다. 새로운 html 파일을 직접 만들어서 붙여넣고 복사해서 효과를 보세요

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PlayAround2 Have Fun</title>
 <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
 <style>
  h2{
   text-decoration:underline;
  }
  .red{
   color: red;
  }
  .green{
   color: green;
  }
 </style>
</head>
<body>
 <div id="app">
 
  <h2>checkBox</h2>
  <input type="checkbox" v-model="checked">
  <label>{{checked}}</label>
 
  <h2>multi checkbox</h2>
  <input type="checkbox" id="Kobe" value="Kobe" v-model="names">
  <label for="Kobe">Kobe</label>
  <input type="checkbox" id="Curry" value="Curry" v-model="names">
  <label for="Curry">Curry</label>
  <input type="checkbox" id="Aaron" value="Aaron" v-model="names">
  <label for="Aaron">Aaron</label>
  <br>
  <span>Checked names: {{names | json}}</span>
 
  <h2>Radio</h2>
  <input type="radio" id="one" value="one" v-model="picked">
  <label for="one">one</label>
  <br>
  <input type="radio" id="two" value="two" v-model="picked">
  <label for="two">two</label>
  <br>
  <span>Picked: {{picked}}</span>
 
  <h2>Select</h2>
  <select v-model="selected">
   <option selected>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{selected}}</span>
 
  <h2>Multi Select</h2>
  <select multiple v-model="multiSelected">
   <option>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{multiSelected}}</span>
 
 
  <h2>Select with for</h2>
  <select v-model="selectedPlayer">
   <option v-for="option in options" :value="option.value">{{option.text}}</option>
  </select>
  <span>Selected: {{selectedPlayer}}</span>
 
  <h2>Lazy-改变更新的事件从input->change</h2>
  <input v-model="msg" lazy>
  <span>Msg:{{msg}}</span>
 
  <h2>Number(没啥吊用。。。.2->0.2,仅此而已吗?)</h2>
  <input v-model="age" number>
  <span>age:{{age}}</span>
 
  <h2>debounce-延迟更新view</h2>
  <p>Edit me<input v-model="delayMsg" debounce="500"></p>
  <span>delayMsg:{{delayMsg}}</span>
 
 </div>
 
 <script>
  var vm = new Vue({
   el:"#app",
   data:{
    checked:false,
    names:[],
    picked:"",
    selected:"",
    multiSelected:"",
    options:[
     {text:"Kobe",value:"Bryant"},
     {text:"Stephen",value:"Curry"},
     {text:"Aaron",value:"Kong"}
    ],
    selectedPlayer:"",
    msg:"",
    age:"",
    delayMsg:""
   },
   methods:{
 
   }
  })
 </script>
</body>
</html>

vue 사용의 여러 장점:

1. 모델 레이어의 데이터 처리에만 집중하면 되며 복잡한 뷰 레이어 업데이트를 처리할 필요가 없습니다.

2. Vue는 개발자가 데이터 바인딩 문제를 처리하는 데 도움이 되는 일련의 작은 도구를 제공하며, 계산 확장은 물론 필터, 정렬 및 기타 지원도 제공합니다. ;

3. 코드가 간결하고 레이어링이 깔끔합니다. 데이터 바인딩은 html로 수행되지만 js는 데이터 및 백그라운드 상호작용만 처리하면 됩니다.

4. 프런트엔드 아키텍처를 더욱 표준화하기 위해 맞춤 구성요소 기능을 제공합니다. 현재는 사용되지 않고 앞으로 연구될 예정이다.

위 내용은 현재 Vue를 사용하면서 느낀 점입니다. 아직까지 단점을 발견하지 못했고, 깊이가 부족할 수도 있지만 전반적으로 매우 좋은 경험이었습니다!

성명：

이전 기사：JavaScript는 Lagou.com과 유사한 마우스 이동 및 이동 효과를 구현합니다.다음 기사：JavaScript는 Lagou.com과 유사한 마우스 이동 및 이동 효과를 구현합니다.

Vue.js 양식 제어 연습

관련 기사