1.Vue.js的簡單介紹 Vue.js是目前前端領(lǐng)域一個非常流行的MVVM框架，他不像jquery給我們封裝了兼容性的dom操作，Vue不提倡操作dom元素，把程序員從復(fù)雜的dom操作中解放出來，讓我更多的關(guān)心業(yè)務(wù)邏輯代碼的實(shí)現(xiàn)，Vue,js提供了很多的指令為我們更方便的數(shù)據(jù)操作，同時，只要我們修改了vue對象里面的數(shù)據(jù)，頁面就會被重新的渲染。(單向數(shù)據(jù)流，雙向的數(shù)據(jù)綁定,簡單的說就是M-VM-V-M....)
下面一個簡單的小例子說明vue的雙向數(shù)據(jù)綁定(vue.min.js可以找一個CDN),當(dāng)你改變input框里面的值的時候,頁面會重新渲染，上面h2里面的值也會改變,(v-model是一個雙向數(shù)據(jù)綁定的指令)。
head>
title>title>
script type='text/javascript' src='./lib/vue.min.js'>script>
head>
body>
div id='app'>
h2>{{msg}}h2>
input type='input' v-model='msg'>
div>
body>
script type='text/javascript'>
var vm=new Vue({
el:'#app',
data:{
msg:'我愛前端,愛學(xué)習(xí)vue.js'
}
})
script>2.vue.js的簡單指令
1 v-cloak [v-cloak] {display: none;} 取消插值表達(dá)式網(wǎng)速慢時候的閃爍問題（就是網(wǎng)速很慢解析到{{}}時瀏覽器出現(xiàn){{msg}}）。
2. v-text 綁定標(biāo)簽樣式的指令 例如上面的可以改為
這樣可以 解決閃爍問題。3 v-html 可以插入html的標(biāo)簽的vue指令
4 v-bind vue綁定屬性的指令 可以縮寫為：
5 v-on vue 提供的綁定事件的指令 可以縮寫為@
6 v-if vue提供的判斷的指令 不成立元素是不會被創(chuàng)建的
7 v-show vue提供的隱藏元素的指令 元素會創(chuàng)建知識css顯示為無，用法和v-if類似。
8 v-for vue提供的元素迭代的指令 可以迭代數(shù)組 對象和數(shù)字。
3.vm對象和vue綁定事件
vm對象里面的el 表示vue這個對象需要操作的元素，在這個元素外部的vm對象是不能控制的，不要偷懶給body一個id(高版本的vue不支持)
vm對象的data屬性就是當(dāng)前頁面的數(shù)據(jù)，改變這個data里面的數(shù)據(jù)，會印發(fā)頁面的重新渲染。（程序員從復(fù)雜的dom操作里面解放了出來)
vm對象的methods屬性就是這個vm對象里面的方法注意data和methods里面的方法如果互相訪問必須加上this。
body>
div id='app'>
h1>{{msg}}h1>
input type='button' @click='change' value=按鈕>
div>
body>
script type='text/javascript'>
var vm=new Vue({
el:'#app',
data:{
msg:'我愛前端,愛學(xué)習(xí)vue.js'
},
methods:{
change(){
this.msg='我不愛前端,愛學(xué)習(xí)java'
}
}
})
script>
好了，今天的vue.js初體驗(yàn)就到這里了，下次有機(jī)會給大家繼續(xù)介紹其他的知識。
