前后端分離、微服務框架是當下比較流行的詞匯，而vue就是前端框架的佼佼者。下面重點介紹一下vue的用法:
vue起步：1、引包 2、啟動new Vue({el:目的地，template：模板內容}) 其中options參數除了 el、template還有數據data
在html中如何使用vue：
按照上述步驟， 引包 <script src='./node_modules/vue/dist/vue.js'></script>
new Vue對象 <script>
new Vue({
el:"#app",//預留填坑位置，比如html頁面有一個<div id='app'></div>的元素
tempate:"<div>你好</div>"
})
</script>
完成上述后，訪問該html頁面可以看到你好內容。 data:動態數據的聲明 用法如下:添加data
<script>
new Vue({
el:"#app",//預留填坑位置，比如html頁面有一個<div id='app'></div>的元素
template:"<div>你好 {{text}}</div>"，
data:function(){
return {
//代表要在template使用的數據，所以在template中將text變量添加進去,用{{}}包裹
text:'hellow word'
}
}
})
</script>
保存之后，訪問html頁面，可看到內容 你好 hellow word
vue文件介紹
1、插值表達式：格式{{表達式}}
支持字符串{{''}}、對象{{object.key}}、判斷后的布爾值{{true}}、三元表達式{{a==b?'正確':'錯誤'}}
注：必須在data這個函數返回對象中聲明
2、常用指令
v-text其實就是給元素的innerText屬性賦值，只能用在雙標簽中
v-html就是給元素的innerHTml賦值、
v-if\v-if-else\v-else、
v-show隱藏元素，就是將display：none
v-bind給元素屬性賦值，語法：<div v-bind:屬性名='變量'></div>， 簡寫 <div :屬性名='變量'></div>
v-on 處理原生事件的 。用法：在元素上v-on:原生事件名=“操作方法” ， 簡寫：@原生事件名=“操作方法”
v-model 雙向數據流綁定，即頁面改變影響內存，內存數據改變影響頁面。
v-model與v-bind區別：
1、v-bind的是單向的，只能將vue中的數據同步到頁面。
2、v-model 雙向綁定，不只能將vue中的數據同步到頁面，而且可以將用戶數據的數據賦值給vue中的屬性。例子：<input v-model='myValue'></input> <button v-show='myValue=='xxx'>按鈕</button>,new vue中默認myValue='hellow'，如果刷新html頁面，這時候input的默認值是hellow，說明vue的屬性值成功同步到頁面，當輸入xxx時，按鈕能夠顯現，說明用戶輸入的值能夠賦值給vue的屬性，所以是雙向綁定。
3、v-bind可以給任何屬性賦值，v-model只能給具備value屬性的元素進行數據雙向綁定。
v-for的用法
基本用法v-for="item in array"
對象用法v-for="item in object"
v-for 中的屬性 數組 item index ，對象 item 、key、index
3、組件的用法
在new Value中使用components聲明要用的組件,key是組件值，value是組件對象
<script>
var APP = {template:"<h>我是入口組件</h>"} -----------生出子
new Vue({
el:"#app",
template:"<app/>"，//組件調用 ---------------使用子
components:{app:APP} ---------------------聲明子
})
</script>
//訪問頁面后，可以看到我是入口組件 這個顯示內容，說明組件調用成功。 口訣： 生出子、 聲明子、使用子
使用組件以單標簽（<app/>）使用，只能在new Vue中可以，如果在其他地方請使用雙標簽,比如將上述例子中的APP組件再調用其他組件時，必須用雙標簽如下
var myHeader ={template:<h>我是頭</h>"}
var myBody ={template:<h>我是主要內容</h>"}
var APP = {
components:{'my-header':myHeader ,'my-body':myBody } ，
template:"<div>
<my-header></my-header> -----------在這使用時，必須雙標簽，而不能是<my-header/>
<my-body></my-body>
</div>"
}
//訪問頁面可以看到 我是頭 我是主要內容的顯示，說明調用成功。
組件之間傳遞數據
父向子傳遞數據 其實就是給子使用v-bind綁定數據
var APP = {
components:{'my-header':myHeader } ，
template:"<div>
<my-header :title='title' ></my-header> -----------v-bind綁定數據
</div>",
data:function(){
return {
title:'測試'
}
}
｝
子組件的修改如下： 利用props接收父組件傳遞過來的參數
var myHeader ={
template:<h>我是頭 {{title}}</h>",
props:['title']
}
//訪問頁面可以看到 “我石頭 測試”內容顯示
簡單介紹一下vue的最基本用法，后期會繼續完善文章。本人使用vue\mpvup+vant等組件開發的項目作為例子，有興趣的可以下載學習。源代碼已上傳git：Git地址
技術交流群：①群：699050440 ②群：824313640