一個(gè)例子輕松學(xué)會(huì)Vue.js
大家都知道Vue.js是中國(guó)人創(chuàng)造出來(lái)的,簡(jiǎn)單易用,所以必須要支持一下
Vue采用的MVVM設(shè)計(jì)模式
也就是說(shuō)model和view綁定
model改變,view的內(nèi)容改變,反之亦然
Vue主要有以下幾個(gè)關(guān)鍵字
v-model 綁定模型
v-if 判斷是否顯示該dom
v-show 判斷是否將該dom的display設(shè)為none
v-else if或者show為false時(shí)顯示該dom
v-for 迭代
v-bind 綁定屬性
v-on 綁定方法
我們以一個(gè)可查找的信息管理系統(tǒng)為例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <span>key</span> <!-- 綁定model中search.key --> <!-- 內(nèi)容和下面每一列的數(shù)據(jù)進(jìn)行比較 --> <!-- 內(nèi)容改變,下面的每一列都馬上會(huì)進(jìn)行比較 --> <input type="text" v-model="search.key"> <legend> Create New Person </legend> <div class="form-group"> <label>Name:</label> <!-- 綁定model中newPerson.name --> <input type="text" v-model="newPerson.name"/> </div> <div class="form-group"> <label>Age:</label> <!-- 綁定model中newPerson.age --> <input type="text" v-model="newPerson.age"/> </div> <div class="form-group"> <label>Sex:</label> <!-- 綁定model中newPerson.sex --> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label></label> <!-- @click是v-on:click的縮寫 --> <button @click="createPerson">Create</button> </div> </fieldset> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Delete</th> </tr> </thead> <tbody> <!-- 用v-for迭代,$index為每一個(gè)item的索引 --> <!-- v-if判斷為true則顯示,否則則移除,這里更適合用v-show,v-show并不會(huì)移除dom只會(huì)將display屬性改為none --> <!-- 和搜索框內(nèi)容進(jìn)行比較 --> <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key"> <td >{{ person.name }}</td> <!-- :style是v-bind:style的縮寫,滿足條件則值為前面的,否則為后面的,固定的字符串要用' ',變量不需要用'' --> <!-- v-bind后面還可以接其他的屬性例如class,id --> <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td> <!-- v-else元素必須立即跟在v-if或v-show元素的后面——否則它不能被識(shí)別 --> <td v-if="person.sex =='Male'">男</td> <td v-else>女</td> <td class="text-center"><button @click="deletePerson($index)">Delete</button></td> </tr> </tbody> </table> </div> </body> <script src="js/vue.js"></script> <script> // 初始化Vue //el獲取綁定的標(biāo)簽,#app獲取id為app的dom,.app的話則獲取class為app的dom //data中為模型 //methods為方法 var vm = new Vue({ el: '#app', data: { search:{ key:"" }, newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] }, methods:{ createPerson: function(){ this.people.push(this.newPerson); // 添加完newPerson對(duì)象后,重置newPerson對(duì)象 this.newPerson = {name: '', age: 0, sex: 'Male'} }, deletePerson: function(index){ // 刪一個(gè)數(shù)組元素 this.people.splice(index,1); } } }) </script> </html>
不需要太多的解釋,直接看代碼就知道Vue用法是什么
效果圖
代碼我已上傳到github
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析
- JS數(shù)組返回去重后數(shù)據(jù)的方法解析
- js實(shí)現(xiàn)復(fù)選框的全選和取消全選效果
- Node.js學(xué)習(xí)入門
- 通過(guò)AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
- JS實(shí)現(xiàn)簡(jiǎn)單的二元方程計(jì)算器功能示例
- JS求解三元一次方程組值的方法
- 簡(jiǎn)單談?wù)凪ySQL5.7 JSON格式檢索
- Highcharts+NodeJS搭建數(shù)據(jù)可視化平臺(tái)示例
- 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
- IOS與網(wǎng)頁(yè)JS交互詳解及實(shí)例
- 過(guò)期軟件破解辦法實(shí)例詳解
相關(guān)文章
詳解Vue CLI3配置之filenameHashing使用和源碼設(shè)計(jì)使用和源碼設(shè)計(jì)
這篇文章主要介紹了詳解Vue CLI3配置之filenameHashing使用和源碼設(shè)計(jì)使用和源碼設(shè)計(jì),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue前端自適應(yīng)布局實(shí)現(xiàn)教程(一步到位所有自適應(yīng))
?自適應(yīng)布局是一種根據(jù)不同的設(shè)備屏幕分辨率進(jìn)行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關(guān)于vue前端自適應(yīng)布局實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-08-08element-ui中dialog彈窗關(guān)閉按鈕失效的解決
這篇文章主要介紹了element-ui中dialog彈窗關(guān)閉按鈕失效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue自定義過(guò)濾器創(chuàng)建和使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue自定義過(guò)濾器創(chuàng)建和使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟詳解
相信大部分Vue開發(fā)者都使用過(guò)vue-cli來(lái)構(gòu)建項(xiàng)目,它的確很方便,但對(duì)于很多初級(jí)開發(fā)者來(lái)說(shuō),還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟,需要的朋友可以參考下2023-01-01