Vue學習

前言：對於沒有接觸過這個框架的人，面對一個框架可能不知道從何入手，看官方文檔和前輩們的博客以及git 上的項目或許是最好的選擇，當然我也是這樣學習的，作爲一個沒有 接觸過正式工作的我而言，一度對這個紅極一時的框架產生敬畏，但是嘗試了才知道，這個框架很好用也不難學。

安裝：對於Vue的安裝，以npm下載安裝:npm install vue，這是一種比較簡單的方法；對於我們這種小白在做聯繫時這需要引入vue.js即可

主要語法介紹：

1，重要組件設置

      (1)el:綁定的對象       (2)data:數據    (3)methods: 方法    (4)watch:監聽

    

2,模板指令

(1)數據渲染：{{ }}     v-html    v-text

(2)條件渲染控制數據隱藏：v-if    v-show   v-else(必須與v-if或者v-show一起使用)   v-else-if

(3)渲染列表：v-for 

  

3,事件綁定： v-on 縮略@

<button v-on:click="hello"></button>
綁定的內容可以是對變量的監聽(count+1)，可以是方法(hello)，可以是內聯方法（say('hello')）

4,屬性綁定： v-bind 縮略：

<div v-bind:class="hello"></div>

Demo簡單實踐

   (1),demo概述:學生信息管理,添加學生信息，刪除學生信息

   (2),簡單效果（未添加樣式）

                     

   (3),demo源碼

       HTML部分：           

<div class="start-vue">
    <h2>學生信息管理</h2>
    <section class="top">
        <article class="com">
            <label>name:</label>
            <input type="text" v-model="newstudent.name"><span>{{newstudent.name}}</span>
        </article>
        <article class="com">
            <label>age :</label>
            <input type="text" v-model="newstudent.age"><span>{{newstudent.age}}</span>
        </article>
        <article class="com">
            <label>sex :</label>
            <select v-model="newstudent.sex">
               <option value="girl">girl</option>
                <option value="boy">boy</option>
            </select>
                <span>{{newstudent.sex}}</span>
        </article>
        <article class="com">
            <label></label>
            <button v-on:click="create">Creat</button>
        </article>
        <table class="ahowmsg">
            <thead>
            <th>name</th>
            <th>sge</th>
            <th>sex</th>
            <th>do action</th>
            </thead>
            <tbody>
            <tr v-for="student in students">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.sex}}</td>
                <td><button v-on:click="del(this.index)">Delete</button></td>
            </tr>
            </tbody>
        </table>
    </section>
</div>

            JS部分：

<script src="js/vue.js" type="text/javascript"></script>
<script>
  var vm= new Vue({
       el:".start-vue",
       data:{
           newstudent:{
               name:" ",
               age:0,
               sex:" "
           },
           students:[{
               name:"cyan",
               age:12,
               sex:"girl"
           },{
              name:"think",
               age:13,
               sex:"boy"
           },{
               name:"gamer",
               age:15,
               sex:"bor"
           }]
       },
      methods:{
          create:function(){
              this.students.push(this.newstudent);
              this.newstudent={name:"",age:0,sex:""};
          },
          del:function(index){
              this.students.splice(index,1);
          }
      },
   });
</script>