真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

new Vue({
 el: '#app',
 data: {
  show: true
 },
 created: () => {
  console.log(this.show)
 },
})

 
 change

new Vue({
 el: '#app',
 data() {
  return {
   event: 'input'
  }
 },
 methods: {
  doSomething () {
   console.log('sss')
  }
 },
})

{{reversedMessage('hello')}}

var app = new Vue({
 el: '#app',
 methods: {
  reversedMessage: function (message) {
   return message.split('').reverse().join('')
  }
 },
})

  
   Username
   
  
  
   Email
   
  
  change

var app = new Vue({
 el: '#app',
 data() {
  return {
   loginType: 'username'
  }
 },
 methods: {
  change () {
   this.loginType = this.loginType === 'username' ? 'email' : 'username'
  }
 }
})

上面代碼中切換loginType將不會清除用戶已經(jīng)輸入的內(nèi)容，因為兩個模版使用了相同的元素，如果不想復(fù)用也很簡單，只需要添加一個具有唯一值的key屬性即可：

 Username
 


 Email
 

change

現(xiàn)在切換，每次都會重新渲染，但是label元素還是會被復(fù)用，因為它沒有加唯一key值

v-if與v-for一起使用

Vue的風格指南不推薦同時使用v-if與v-for，當項目中的eslint繼承了@vue/standard時，同時使用就會編譯報錯，但是可以通過在模版上加進行忽略，同時當它們處于同一節(jié)點，v-for的優(yōu)先級比v-if更高，這意味著v-if 將分別重復(fù)運行于每個v-for循環(huán)中

對象變更檢測

在Vue中對于已經(jīng)創(chuàng)建的實例，不允許動態(tài)添加根級別的響應(yīng)式屬性，但是我們知道可以通過Vue.set(object, propertyName, value)方法向嵌套對象添加響應(yīng)式屬性，那如果需要為已有對象賦值多個新屬性呢？舉個例子：

{{user.name}}-{{user.age}}-{{user.sex}}

var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 created() {
  this.user = Object.assign({}, this.user, {
   age: 18,
   sex: 'name'
  })
 },
})

可以用Object.assign為這個對象重新賦值，這樣就能添加多個新的響應(yīng)式屬性

內(nèi)聯(lián)方法訪問原始DOM事件

有時在模版中調(diào)用方法時，我們需要向方法中傳參數(shù)，但是同時又要傳遞原始的DOM事件，怎么處理呢？舉個例子：

 share

var app = new Vue({
 el: '#app',
 data() {
  return {
   user: {
    name: 'xxx'
   }
  }
 },
 methods: {
  share (info, event) {
   console.log(info, event)
  }
 },
})

如例子所示，可以用特殊變量$event把它傳入方法

once、passive事件修飾符

Vue中提供了多個事件修飾符， once、passive是后面新增的兩個，once用于限定事件只觸發(fā)一次，passive用于修飾的事件發(fā)生后立即觸發(fā)，用于提升移動端性能

表單輸入修飾符

.lazy

在默認情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步，可以添加lazy修飾符，從而轉(zhuǎn)變?yōu)槭褂胏hange事件進行同步，舉個例子：

.number

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給v-model添加number修飾符，這通常很有用，因為即使在type="number"時，HTML輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat()解析，則會返回原始的值，舉個例子：

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給v-model添加trim修飾符，舉個例子：

子組件替換/合并已有的特性

在Vue中對于絕大多數(shù)特性來說，從外部提供給組件的值會替換掉組件內(nèi)部設(shè)置好的值。所以如果傳入type="text"就會替換掉 type="date"并把它破壞！慶幸的是，class和 style特性會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值，舉個例子：

Vue.component('base-input', {
 template: ``
})
new Vue({
 el: '#app',
})

在上例中input的type值為date，class為deafault，在使用子組件時，向子組件中傳入type="text" class="out"，此時input的type值會被替換為text，class值會被合并為"default out"，那么如果想要禁用屬性繼承怎么辦呢？可以在組件的選項中設(shè)置inheritAttrs:false，舉個例子：

Vue.component('base-input', {
 inheritAttrs: false,
 template: ``
})

但是inheritAttrs:false選項不會影響style和class的綁定，因此style和class還是會合并

.sync修飾符

在有些情況下，可能需要對一個 prop進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源，因此Vue提供了sync修飾符，舉個例子：

 {{title}}
 

Vue.component('text-document', {
 props: ['title'],
 template: `change`,
 methods: {
  change () {
   this.$emit('update:title', 'change')
  }
 },
})
new Vue({
 el: '#app',
 data() {
  return {
   title: 'default'
  }
 }
})

當調(diào)用this.$emit('update:title', 'change')，父組件中的title就會改變

以上是“Vue中容易被忽視的知識點有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！