什么是vue.js

Vue.js是目前最火的一個(gè)前端框架，React是最流行的一個(gè)前端框架（React除了開(kāi)發(fā)網(wǎng)站，還可以開(kāi)發(fā)手機(jī)App， Vue語(yǔ)法也是可以用于進(jìn)行手機(jī)App開(kāi)發(fā)的，需要借助于Weex）

Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成為前端三大主流框架！

Vue.js 是一套構(gòu)建用戶(hù)界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。（Vue有配套的第三方類(lèi)庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)）

Vue.js模本語(yǔ)法

1、插值表達(dá)式

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 {{...}}（雙大括號(hào)）的文本插值

 <div id="app">   <div>{{ message }}</div>  </div>  <script>   new Vue({    el: '#app',    data: {     message: '<h1>vue的初次學(xué)習(xí)</h1>'    }   })  </script>

v-html 指令 ：用于輸出 html 代碼：

<div id="app">   <div v-html="message"></div>  </div>  <script>   new Vue({    el: '#app',    data: {     message: '<h1>vue的初次學(xué)習(xí)</h1>'    }   })  </script>

v-text 指令 ：是用于輸出文本       

<div id="app">   <div v-text="message"></div>  </div>  <script>   new Vue({    el: '#app',    data: {     message: '<h1>vue的初次學(xué)習(xí)</h1>'    }   })  </script>

2、Vue.js的條件判斷

v-if條件判斷指令

<div id="app">   <p v-if="seen">現(xiàn)在你看到我了</p>   <template v-if="ok">    <h1>菜鳥(niǎo)教程</h1>    <p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p>    <p>哈哈哈，打字辛苦啊！！！</p>   </template>  </div>  <script>   new Vue({    el: '#app',    data: {     seen: true,     ok: true    }   })  </script>

如果 seen 為true 這顯示 p 標(biāo)簽。否則隱藏

注意：

1、    v-show 其用法和 v-if 相同也可以設(shè)置元素的顯示或隱藏。但是不具備條件判斷功能
2、    v-else、v-else-if 可以給v-if 設(shè)置一個(gè) else 模塊、else-if模塊
3、    v-else 、v-else-if 必須要跟在 v-if 或v-else-if 模塊后面

3、Vue.js循環(huán)語(yǔ)法

v-for 指令需要以  site in sites 形式的特殊語(yǔ)法， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名

1．迭代數(shù)組

<div id="app">   <ol>    <li v-for="site in sites">     {{ site.name }}    </li>   </ol>  </div>  <script>   new Vue({    el: '#app',    data: {     sites: [      {name: 'Runoob'},      {name: 'Google'},      {name: 'Taobao'}      ]    }   })  </script>