vue自學筆記

  作前端也作了一段時間了，爲了高薪，不能一直作網頁不是~~，因此從今天開始整理vue的筆記

　內容都是從網上搜集整合而且本身實踐過了的，須要注意的點，也在後面標註了「注」

  固然了，若是有什麼問題的話但願能及時的告訴我以作修改 - -與君共勉

1.實例化

 <script src="http://unpkg.com/vue"></script>

　　

<div id="app">
    	{{message}}
    </div>

　　

var app = new Vue({
		el:'#app',
		data:{
			message:'Hello Vue!'
		}
	})

　　

2.鼠標懸停查看

<div id='app-2'>
   <span v-bind:title='message'>鼠標懸停顯示信息</span>
</div>

　　

var app2 = new Vue({
     el:'#app-2',
     data:{
	message:'頁面加載於'+new Date().toLocaleString()
     }
})

　　注：message這條數據最後不要放分號，不然會報錯  ;  多條數據放逗號，單條數據不用符號

 

 3.到了上一步的時候，咱們開始接觸了vue的指令v-bind，那麼咱們就總結一下vue中的常見指令吧：

　　(1) v-if 條件渲染指令，根據其後表達式的bool值進行判斷是否渲染該元素；

eg：

<p v-if="age>25">Age:{{age}}</p>

　　

var app = new Vue({
    el:'#app',
    data:{
         age:29
    }      
} 

　　那麼這個時候，age>25判斷爲true，因此會輸出Age:29 ； 若是爲false，該節點會隱藏

　　(2) v-show 與v-if相似，只是會渲染其身後表達式爲false的元素，並且會給這樣的元素添加css代碼：style="display:none";

　　(3) v-else 必須跟在 v-if/v-show 指令以後，否則不起做用，至關於js中if 、else的語義

eg:

<div id="app">

　　<h1 v-if="age >= 25">Age: {{ age }}</h1>
　　<h1 v-else>Name: {{ name }}</h1>

</div>

　　

 var vm = new Vue({
    el: '#app',
    data: {
      age: 21，
　　   name:'xiaoming'
    }
 })

 會輸出：Name:xiaoming

　 （4）v-for 相似JS的便利，用法爲 v-for="item in items",items是數組，item爲數組中的數組元素。 

eg:

<style>
table,th,tr,td{
 border:1px solid #ffcccc;
 border-collapse: collapse;
 }
</style>

　　

<div id="example03">
 <table>
 <thead>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Sex</th>
   </tr>
 </thead>
 <tbody>
   <tr v-for="person in people">
     <td>{{ person.name }}</td>
     <td>{{ person.age }}</td>
     <td>{{ person.sex }}</td>
   </tr>
 </tbody>
 </table>
</div>

　　

<script>
 var vm = new Vue({
     el: '#example03',
     data: {
        people: [
        { name: 'Jack',
          age: 30,
          sex: 'Male'
        },
        {name: 'Bill',
         age: 26,
         sex: 'Male'
       },
       {name: 'Tracy',
        age: 22,
        sex: 'Female'
       }, 
       {name: 'Chris',
        age: 36,
        sex: 'Male'
        }]
    }
   })
</script>

　　效果：

                   

 注意：v-for是在父級上加的，數組格式是數組包json

　　（5）v-bind 指令用於響應HTML更新，如綁定某個class元素或元素的style樣式。

eg:

<li v-for="item in menuItems" v-bind:class="{'dropdown-submenu': item.children}"></li>

　　表示當循環到這項（item）的children屬性爲true時，就給這個li元素加上class名字：dropdown-submenu

 　　（6）v-model 只能用在表單元素上。那麼就不得不介紹下vue大名鼎鼎的雙向綁定

<div id="app">  
    {{ message }}  
    <br/>  
    <input v-model="message"/>  
</div>  
<script>  
    new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue.js!'  
        }  
    })  
</script>  

　　固然了，對於單選按鈕之類的表單元素，v-model要綁定的數據就是布爾值了

　　（7）v-on 用於監聽指定元素的DOM事件，典型的就是 v-on:click