Vue初体验
最近剛接觸到Vue,他主要是以MVVM為主要的主要風格,那么MVVM是什么呢?
?
M----Model ? 模型??
V----View ? 視圖
VM------ViewModel 視圖模型
基本思想:給予view中各種控件一個對應的數據對象,并同步兩者,VM就是view對應著Model,將程序員從復雜的DOM操作中解放出來..
?
主要用法:
Demo1:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="vue.min.js"></script> </head><body><div id="app"><p>{{ msg }}</p> </div><script>//創建一個Vue實例;//當導入包之后,在Browser的內存中就多了一個Vue的構造函數;var vm = new Vue({el: '#app', //該Vue對象是針對id為app元素的 data: { //data中存放的是el中需要用到的數據 msg: 'Welcome!'}})</script> </body> </html>下面是一些應用,大家可以復制下自己測下感受感受:
Demo2:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="vue.min.js"></script><style>[v-cloak] {display: none;}</style> </head><body><div id="app"><p v-cloak>{{ msg }}</p> <!-- 默認不會覆蓋html內容,但會有閃爍問題:表達式會解析的比較慢使網頁上能夠直接看到 --><h4 v-text="msg"></h4> <!-- 默認v-text是沒有閃爍問題的,但會覆蓋html內容,都不會解析html--><div v-html="msg2">111</div><!-- v-bind使屬性內的值綁定到Vue對象內的data域中的對應值 --><!-- v-bind的縮寫: : --><!-- v-bind中可以寫合法的JS表達式 --><!-- v-bind只能實現數據的單向綁定:從vm中向View中綁定 --> <!-- v-on的縮寫: @ --><input type="button" value="Button" v-bind:title="mytitle + '111' " v-on:click.stop="push"> <!-- .stop阻止元素及其父元素中所有的事件冒泡 --><input type="button" value="Button" v-bind:title="mytitle + '111' " v-on:click.prevent="pull"> <!-- .prevent阻止元素及其父元素中所有的默認行為--><!-- .capture添加事件監聽:事件由外向內執行--><!-- .self只能自己觸發事件(阻止自身所有的冒泡和默認行為)--><!-- .once只能觸發一次--></div><script>/* 注意1:在 VM實例中,如果要獲取data上的數據,或者想要調用method中的方法,必須通過* this.屬性名 或 this.方法名來訪問,this就表示該Vue實例* 注意2:VM實例會自動監聽自身data域中所有數據的變更,自動會同步到頁面中去*/var vm = new Vue({el: '#app',data: { msg: 'Welcome!',msg2: '<h1>Welcome!</h1>',mytitle: 'SOS',intervalId: null},methods:{//在實例中用到的方法 push: function(){if(this.intervalId != null){return;}this.intervalId = setInterval( () => { //=>使內部的this指向外部的thisvar start = this.msg.substring(0, 1);var end = this.msg.substring(1);this.msg = end + start;}, 500);},pull: function(){clearInterval(this.intervalId);this.intervalId == null;}}})</script> </body> </html>Demo3:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="vue.min.js"></script> </head><body><div id="app"><h1 :class="['thin', 'italic', flag?'active':'']">{{ msg }}</h1> <p v-for="(item, i) in list">{{ item }}對應索引值: {{ i }}</p><p v-for="user in array">Id: {{ user.id }} name: {{ user.name }}</p><!-- in 後面可以放: 普通數組,對象數組,對象,數字(從1開始) --><input type="number" v-bind="id"><input type="text" v-model="name"><input type="button" value="添加" @click="add"><!-- <input type="button" value="刪除" @click="delete"> --><!-- 用key來進行數據的強制關聯 key屬性只能用number或者Stringkey在使用時必須使用v-bind屬性綁定的值,指定key的值--><p v-for="greatMan in list1" :key="greatMan.id">id: {{ greatMan.id }} name: {{ greatMan.name }}</p></div><script>var vm = new Vue({el: '#app',data: { name: '',id: '',msg: '你好!',flag: true,list: [1, 2, 3, 4, 5],array: [{ id: 001, name: "aaa"},{ id: 002, name: "bbb"},{ id: 003, name: "ccc"}],list1: [{ id: 1, name: "李斯"},{ id: 2, name: "嬴政"},{ id: 3, name: "趙高"},{ id: 4, name: "韓非"},{ id: 5, name: "荀子"},]},methods: {add: function(){if(this.id)this.list1.push({ id: this.id, name: this.name })},delete: function(){//this.list1.pop }}})</script> </body> </html>Demo4:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="vue.min.js"></script> </head><body><div id="app"><input type="button" value="toggle" @click="toggle"><!-- v-if會移除/創建元素,減少初始渲染消耗 --><p v-if="flag">{{ msg }}</p><!-- 而v-show不會移除元素,只會顯示/隱藏元素,切換性能比較好 --><p v-show="flag">{{ msg }}</p><!-- v-show內可以寫稍微復雜一點的邏輯表達式,例如:
v-show=" !showList && getview == 'menu' "
getview即vue對象內的域 -->
</div><script>var vm = new Vue({el: '#app',data: { msg: 'Welcome!',flag: true},methods:{toggle: function(){this.flag = !this.flag;}}})</script> </body> </html>
?Demo5:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="vue.min.js"></script> </head><body><div id="app"><input type="text" v-model="keywords"><table><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><!-- 定義一個search方法,并通過傳參的方式,搜索關鍵字后返回新的結果數組 --><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime }}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table></div><script>//創建一個Vue實例;//當導入包之后,在Browser的內存中就多了一個Vue的構造函數;var vm = new Vue({el: '#app', //該Vue對象是針對id為app元素的 data: { //data中存放的是el中需要用到的數據 msg: 'Welcome!',id: '',name: '',keywords: '',list: [{ id: 1, name: 'BenZ', ctime: new Date() },{ id: 2, name: 'BMW', ctime: new Date() }]},methods:{del: function(id){var index = this.list.some((item, i) => { //當不知道循環次數時用some方式去遍歷數組if(item.id == id){this.list.splice(i, 1);return true;}})},search: function(keywords){var List = [];this.list.forEach(item => {if(item.name.indexOf(keywords) != -1){List.push(item);}});return List;}// $("p:contains(is)") jQuery選擇器:選擇所有包含is文本的p標簽 }})</script> </body> </html>Demo6:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="vue.min.js"></script> </head><body><div id="app"><p>{{ msg | msgFilter('a') }}</p> <!-- |號之前作為管道數據傳輸給過濾器 --> </div><script>//過濾器的使用//創建全局過濾器,可以被多個Vue對象所訪問,第一個參數已經被規定為管道符,第二個參數之后可以傳遞進來了 Vue.filter('msgFilter', function(data, condition) {//對于過濾出來的內容所作的操作var reg = /d/g;return data.replace(reg, condition); //第一個參數也可用RegExp });var vm = new Vue({el: '#app', //該Vue對象是針對id為app元素的 data: { //data中存放的是el中需要用到的數據 msg: 'ddddddaddddd'}})</script> </body> </html>Demo7:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="vue.min.js"></script> </head><body><div id="app"><p>{{ ctime | dateFormat("YYY-mm-dd") }}</p> </div><script>Vue.filter('dateFormat', function (datastr, parttern) {var dt = new Date(datastr);var y = dt.getFullYear();var m = dt.getMonth() + 1;var d = dt.getDay();if(parttern && parttern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-$ozvdkddzhkzd`; //相當于: y + '-' + m + '-' + d }else{var hh = dt.getHours();var mm = dt.getMinutes();var ss = dt.getSeconds();return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}`}});var vm = new Vue({el: '#app',data: {ctime: new Date()},methods: {},filters: { //定義私有過濾器 調用過濾器遵從'就近原則' dateFormat: function(datastr, parttern = ''){var dt = new Date(datastr);var y = dt.getFullYear();var m = dt.getMonth() + 1;var d = dt.getDay();var reg = /(^\d$)/;if(parttern && parttern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-$ozvdkddzhkzd`; //相當于: y + '-' + m + '-' + d }else{var hh = dt.getHours()+'';var mm = dt.getMinutes()+'';var ss = dt.getSeconds()+'';hh.replace(reg, "0$1");mm.replace(reg, "0$1");ss.replace(reg, "0$1");return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}`}}}})</script> </body> </html>Demo8:
<!DOCTYPE html> <html> <head><title>title</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="vue.min.js"></script> </head><body><div id="app"><!-- Vue提供的全部監控的按鍵別名:.enter.tab.delete 捕獲delete與backspace.esc.space.up.down.left.right也可以用jQuery的按鍵監視:通過event和對應按鍵碼(KeyCode)實現docu.onkeydown = function (event) { if (event.keyCode == 116) { event.preventDefault();window.history.go(-1);//返回上一頁 } }--><p>{{ msg }}</p><!-- 自定義全局指令 --><input type="text" @keyup.enter="TODO" v-focus> <!-- v-focus(自定義指令)使進入頁面之后自動獲取文本框焦點--></div><script>//自定義全局按鍵修飾符: Vue.config.keyCodes.f2 = 113; //自定義按鍵別名和對應真實keyCodevar vm = new Vue({el: '#app', data: { msg: 'Welcome!'},methods:{TODO: function(){console.log("TODO");}}})//注冊一個全局自定義指令 v-focus,除了el參數,還可以傳多個參數,但el的位置必須是第一個,el相當于操作的DOM對象 Vue.directive('focus', {inserted: function(el){el.focus()}})</script> </body> </html>轉載于:https://www.cnblogs.com/Joey44/p/9993286.html
總結
- 上一篇： android ------- 开发者的
- 下一篇： vuex入门文档