為什麼要使用Vuejs

Vue.js是一種JS函式庫，它使用簡單，容易上手能夠實現回應的資料綁定和組合的視圖元件

Vue.js其實是一個JavaScript UI庫，它是一個構建數據驅動的web 介面的漸進式框架，的目標是盡可能簡單的使用API​​ 實現響應的數據綁定和組合的視圖組件，接下來在文章中將和大家詳細介紹為什麼使用Vue .js

【推薦課程：Vue.js】

使用vue.js的理由

vue.js上手容易，簡單而且擁有很多工具包含API，性能等，它只需要一個腳本就可以體驗它的精彩

每個Vue應用程式的入口點都是透過實例建立的。然後，實例將配置應用程式的其餘部分，並在應用程式擴充時得到子成員

範例：

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;这是我的第一个Vue.js文件!&#39;
  }
})
</script>

效果圖

透過傳入一個物件來配置實例，該物件包含有關應用程式的資訊以及應該載入的位置。

el屬性：指定應該安裝在哪個元素上，值是設定的ID元素。

data屬性：要綁定到視圖資料中的指定數據，該屬性具有可透過範本存取值的物件。

注意：帶ID的div  app是我們安裝應用程式的地方

用雙花括號將資料綁定到模板上，在綁定配置期間用message在data物件中指定值。

資料綁定

#JS框架中一個非常有用的功能是能夠在決策之前將資料綁定到視圖。我們可以告訴Vue僅在值解析為true時才進行綁定

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 v-if="demo1">为true时显示demo1</h2>
  <h2 v-else="demo2">为true时显示demo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   demo1:true
  }
})
</script>

可以為我們提供一個簡單的API來循環存取一組綁定數據，該v-for指令將其用於此目的，我們只需要一個數據數組：

需要用到site in sites 形式的特殊語法，sites 是來源資料數組且site 是陣列元素迭代的別名

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   sites:[
{name:&#39;张三&#39;},
{name:&#39;李四&#39;},
{name:&#39;王五&#39;}
   ]
  }
})
</script>

雙向綁定

################################################################### ###Vue中的雙向綁定非常簡單，只需要一個指令就可以實作v-model。讓我們透過將v-model指令附加到文字輸入並同時顯示資料來看到input框中的值來實現雙向綁定###

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
 <p>
 	<input type="text" v-model="mentor">{{mentor}}
 </p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
  message:&#39;这是双向绑定&#39;,
  mentor:&#39;&#39;,
  mentors:[]
  }
})
</script>

############總結：以上就是本篇文章的全部內容了，希望對大家學習有所幫助。 ###### ###

以上是為什麼要使用Vuejs的詳細內容。更多資訊請關注PHP中文網其他相關文章！