Vue.js快速入門實例教程
更新時間：2016年10月15日 16:21:47 作者：fareise
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實例教程的相關資料,需要的朋友可以參考下
什么是vue
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。
一、基本結(jié)構(gòu)
index.html代碼：
<script src="../vue.js"></script>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
<!--注意：app.js要最后引入，因為要先有id為app的div,vue才能獲取相應的元素。否則會報錯： [Vue warn]: Cannot find element: #app-->
app.js代碼：
new Vue({
el: '#app', //選定要使用vue的部分
data: { //定義數(shù)組，可以在該部分使用{{}}引用
message: 'Hello Vue.js!'
}
})
二、雙向數(shù)據(jù)綁定
index.html代碼：
<script src="../vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<!--設置雙向數(shù)據(jù)綁定，v-model，屬性值為要綁定的數(shù)據(jù)-->
<input v-model="message">
</div>
<script src="app.js"></script>
app.js代碼
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
三、渲染列表
index.html代碼：
<script src="../vue.js"></script>
<div id="app">
<ul>
<!--v-for進行循環(huán)遍歷-->
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script src="app.js"></script>
app.js代碼：
new Vue({
el: '#app',
data: {
todos: [ //在data中定義todos數(shù)據(jù)
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
四、處理用戶輸入
index.html代碼：
<script src="../vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<!--vue中使用v-on:前綴綁定各種事件觸發(fā)的方法-->
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script src="app.js"></script>
app.js代碼：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: { //methods字段內(nèi)容用來定義處理方法
reverseMessage: function () {
//通過this.message可以更改message數(shù)據(jù)的值，這里進行了顛倒
this.message = this.message.split('').reverse().join('')
}
}
})
以上所述是小編給大家介紹的Vue.js快速入門實例教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的.
相關文章
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)
這篇文章主要介紹了vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實現(xiàn)拼音的模糊搜索,實現(xiàn)思路很簡單，通過安裝配置插件編寫工具類，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11
vue-meta實現(xiàn)router動態(tài)設置meta標簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設置meta標簽,實現(xiàn)思路非常簡單內(nèi)容包括mata標簽的特點和mata標簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細講解需要的朋友可以參考下2022-11-11
本片文章給大家詳細介紹了如何將Vue組件庫發(fā)布到npm的方法以及代碼示例分享，感興趣的朋友參考學習下。2018-02-02
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開詳細內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
ant-design-vue前端UI庫,如何解決Table中時間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時間格式化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue實現(xiàn)圖書管理，分享了圖書管理demo用的知識點，以及遇到問題的總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10