当前位置： 首页 > Web前端 > vue.js

vue_4

时间：2023-04-01 01:03:24 vue.js

1.browser-sync瀹夎npmibrowser-sync-g鍚姩鏂规硶涓€锛歜rowser-syncstart-s-f**/*鏂规硶浜岋細package.json閰嶇疆"scripts":{"start":"browser-syncstart-s-f**/*--directory--watch"}yarnstarthtml缁勪欢锛氭爣绛俱€佸睘鎬с€佸瓙鍏冪礌HTML灞炴€э細鑷畾涔夊睘鎬с€佸唴鍦ㄥ睘鎬?銆乿ue鎻掑€艰〃杈惧紡{{/^abc$/.test('a')}}{{鍋囩殑锛?鎴愬姛':'澶辫触'}}{{obj.x}}{{foo()}}{{(function(){varx=100})()}}vue瀹炰緥鍖?divid="root">

    {{task}}X
//瀹炰緥鍖朧uenewVue({el:"#root",//鏍硅妭鐐筪ata:{//鏁版嵁婧恡itle:'helloworld!!',task:'',tasks:['eat','sleep','playingpeas']},methods:{//methodhandleKeyUp(){//鎿嶄綔浠诲姟this.tasks.push(this.task)this.task=''},handleClick(index){this.tasks.splice(index,1)}},})instructioninstruction(Directives)鏄竴绉嶇壒娈婄殑attributev-bind閫熻锛屽墠缂€涓簐-:鐢ㄤ簬鍝嶅簲寮忔洿鏂癏TML灞炴€?inputv-bind:value="task">
constdata={urlparser:'url',url:'http://www.baidu.com'}v-if鐜板湪浣犵湅鍒版垜浜?/p>v-if鎸囦护灏嗘牴鎹湅鍒扮殑琛ㄨ揪寮忕殑true鎴杅alse鍊兼彃鍏?鍒犻櫎

鍏冪礌銆倂-forv-onshorthand@v-modelv-once鎵ц涓€娆℃彃鍊硷紝褰撴暟鎹彂鐢熷彉鍖栨椂锛屾彃鍊煎鐨勫唴瀹逛笉浼氭洿鏂般€傜洰鐨勶細鎻愰珮鎬ц兘銆?spanv-once>杩欎笉浼氭敼鍙橈細{{msg}}v-html杈撳嚭鐪熸鐨凥TML

constdata={header:'',}瀹规槗瀵艰嚧XSS鏀诲嚮v-text
鏁版嵁鍙屽悜缁戝畾v-modelVue缂栫▼鐗规€ataDriver缂栫▼锛屾棤DOM鎿嶄綔鍝嶅簲寮忥細鍝嶅簲寮忕殑涓€涓壒渚嬪繀椤绘彁鍓嶅湪data涓畾涔夛細vm.fruits.lengthvm.fruits[0]='铮?//debug:vm.$forceUpdate()vm.obj.y=200//缁欏璞℃坊鍔犲睘鎬ф病鏈夊緱鍒板搷搴攄ebug:vm.$set(vm.obj,'y',200)orVue.set(vm.obj,'y',300)BUG鍘熷洜锛歄bject.defineProperty(),鏃犳硶鐩戝惉鏁扮粍鐨勫彉鍖杤m.$set(vm.fruits,0,'馃崏')缁勪欢xml锛氫粎浣滀负涓€绉嶆暟鎹壙杞芥柟寮忕粍浠剁殑浼樼偣鍙互澶嶇敤vscodesnipets//瀹氫箟涓€涓粍浠禫ue.component('my-list',{props:['item','index','tasks','fruits'],template:`
  • {{item}}X
    • `,methods:{handleClick(index){//console.log(index)this.tasks.splice(index,1)}},})instancenewVue({el:"#root",//鏍硅妭鐐筪ata:{//鏁版嵁婧恡itle:'helloworld!!',task:'',tasks:['eating','sleeping','playingpeas'],fruits:['馃崌','馃崚']},methods:{//鏂规硶//handleInput(e){//this.task=e.target.value//}handleKeyUp(){//鎿嶄綔浠诲姟this.tasks.push(this.task)this.task=''}},})鐢熷懡鍛ㄦ湡鍑芥暟锛坙ifecyclehook锛塨eforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedbeforeCreatebeforeCreate(){console.log('beforeCreate')//浣跨敤鍦烘櫙//1銆佽繖閲屽彲浠ヤ笉鍝嶅簲鐗瑰緛鐨勫垵濮嬪寲鏁版嵁//2.璋冪敤Ajax璇锋眰鐨勭涓€涓挬瀛?/娴嬭瘯鐢ㄤ緥console.log(this)console.log(this.title)//鏃犳硶璁块棶鏍囬this.initData='hello'//璁块棶鏈畬鎴愮殑Parsed妯℃澘//console.log(document.querySelector('#root').innerHTML)setTimeout(()=>{this.title='word!!!'},2000)//ajaxsetTimeout(()=>{this.fetchData()},0)},createdcreated(){console.log('created')//浣跨敤鍦烘櫙//1.鍙互鍦╠ata涓垵濮嬪寲鏁版嵁//2.鎮ㄥ彲浠ュ湪姝ゅ鎵цAjax鎺у埗鍙般€俵og(this)console.log(this.title)this.title='world!!!'console.log(document.querySelector('#root').innerHTML)this.fetchData()},beforeMountbeforeMount(){//浣跨敤鍦烘櫙//1.鍐嶇粰data涓殑鏁版嵁涓€涓垵濮嬪寲鐨勬満浼?/鈥嬧€?.鍙互鎵цAjaxconsole.log('beforeMount')console.log(this)console.log(this.title)鎺у埗鍙般€傛棩蹇楋紙鏂囨。銆俼uerySelector锛?#root'锛夈€俰nnerHTML锛墋锛岀背mountedmounted(){//Mounted鍙湁鍦ㄧ涓€娆℃覆鏌撳畬鎴愬悗鎵嶄細琚皟鐢?/浣跨敤鍦烘櫙//1.DOM绗竴娆℃覆鏌撳畬鎴愬悗锛屽仛涓€浜涗簨鎯?/2.杩欓噷鍋欰jax鎺у埗鍙版瘮杈冨悎閫?鏃ュ織锛堣繖锛夋帶鍒跺彴銆傛棩蹇楋紙杩檛his.fetchData()setTimeout(()=>{this.$destroy()},2000)},beforeUpdatebeforeUpdate(){console.log('beforeUpdate')},updatedupdated(){console.log('鏇存柊')},beforeDestroybeforeDestroy(){console.log('beforeDestroy')},destroyeddestroyed(){console.log('destroyed')},varvm=newVue({//el:'#root',}vm.$mount('#root')鐢熷懡鍛ㄦ湡鍥撅細https://cn.vuejs.org/images/l...璁＄畻灞炴€omputed

    鍘熷娑堟伅锛?{{message}}"

    璁＄畻鍑虹殑鍙嶅悜娑堟伅锛?{{reversedMessage}}"

    varvm=newVue({el:'#example',data:{message:'Hello'},computed:{//璁＄畻灞炴€х殑getter//getter鍑芥暟//鏍规嵁渚濊禆鑷姩杩斿洖涓€涓柊鐨勫€硷紝杩欎釜鍊煎彲浠ュ搷搴?/鏍规嵁渚濊禆缂撳瓨锛氱殑鍊间緷璧栧叧绯绘病鏈夋敼鍙橈紝璁＄畻灞炴€э紙鍑芥暟锛変笉璋冪敤//璁＄畻灞炴€у繀椤绘湁涓€涓繑鍥炲€紃eversedMessage:function(){//`this`鎸囧悜vm瀹炰緥returnthis.message.split('').reverse().join('')}}})褰搗m.message鏀瑰彉鏃讹紝鎵€鏈変緷璧栦簬vm.reversedMessage鐨勭粦瀹氫篃灏嗚鏇存柊銆傜洃鍚睘鎬atch1锛岀洃鍚暟鎹紙鏁版嵁锛夊彉鍖栵紝鍋氫竴浠朵簨鎯?锛岀壒鍒€傚悎寮傛鎿嶄綔鍦烘櫙{{fullName}}varvm=newVue({el:'#demo',data:{firstName:'Foo',lastName:'Bar',fullName:'FooBar'},watch:{firstName:function(val){this.fullName=val+''+this.lastName},lastName:function(val){this.fullName=this.firstName+''+val}}})computedpropertysettercomputedproperty榛樿鍙湁涓€涓猤etter锛屼絾鏄綘涔熷彲浠ュ湪闇€瑕佺殑鏃跺€欐彁渚涗竴涓猻etter锛歝omputed:{fullName:{//getterget:function(){returnthis.firstName+''+this.lastName},//setterset:function(newValue){varnames=newValue.鍒嗚锛?'锛塼his.firstName=names[0]this.lastName=names[names.length-1]}}}鐜板湪褰撲綘杩愯vm.fullName='JohnDoe'鏃讹紝setter灏嗚璋冪敤锛寁m.firstName鍜寁m涔熷皢琚皟鐢ㄣ€俵astName鐩稿簲鏇存柊绔嬪嵆璋冪敤鍑芥暟琛ㄨ揪寮?IIFE)=鑷墽琛屽嚱鏁拌绠楃殑灞炴€ч拡瀵逛緷璧栭」杩涜缂撳瓨锛屾柟娉曚笉鏄€?/p>
    vue_4相关文章
    最新推荐
    猜你喜欢

    Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

    重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。