Vue.노트 업데이트

12961 단어 vue.js2Vue.js
Migration from Vue 1.x
Vue의 1.x로부터의 전환 안내서(영어)
https://vuejs.org/guide/migration.html

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)


new Vue({
  el: '#VueApp',
  components: {
    App
  }
})
new Vue({
  render(h) {
    return h(App)
  }
}).$mount('#VueApp')

어셈블리 이름을 설정해야 합니다.


[Vue warn.]: found in anonymous component - use the "name" option for better debugging messages.



component
export default {
  data() {
    return {
      text: 'Hello Vue'
    }
  }
}

component
export default {
  name: 'helloText' // コンポーネント名設定する
  data() {
    return {
      text: 'Hello Vue'
    }
  }
}

구성 요소는 루트 요소가 필요합니다


[ERROR] template syntax error Component template should contain exactly one root element


<template>
  <div class="div1"><div>
  <div class="div2"><div>
</template>
<template>
  <div class="divRoot">
    <div class="div1"><div>
    <div class="div2"><div>
  </div>
</template>

or

<template>
  <div>
    <div class="div1"><div>
    <div class="div2"><div>
  </div>
</template>

v-el을 사용할 수 없기 때문에ref를 사용합니다


[Vue warn]: Failed to resolve directive: el


<div class="HelpItem"
     v-el:help-item>
</div>
this.$els.helpItem
<div class="HelpItem"
     ref="helpItem">
</div>
this.$refs.helpItem

Filter Argument Syntax


[Vue warn]: Failed to resolve filter: omit 100


<div>{{ post.text | omit 100 }}</div>
<div>{{ post.text | omit(100) }}</div>

$eval


this.$eval is not a function


data() {
  return {
    helpSearch: '',
    formatItems: [
      {
        title: 'Hello Vue',
        excerpt: 'xxxxxxxxxxxxxxxxxx'
      }
      {
        title: 'Hello Vue2',
        excerpt: 'xxxxxxxxxxxxxxxxxx'
      }
    ],
  }
}
computed: {
  filteredItems() {
    return this.$eval('formatItems | filterBy helpSearch | limit 7')
  }
}
data() {
  return {
    helpSearch: '',
    formatItems: [
      {
        title: 'Hello Vue',
        excerpt: 'xxxxxxxxxxxxxxxxxx'
      }
      {
        title: 'Hello Vue2',
        excerpt: 'xxxxxxxxxxxxxxxxxx'
      }
    ]
  }
}
computed: {
  filteredItems() {
    return this.formatItems.filter((item) => {
      const searchRegex = new RegExp(this.helpSearch, 'i')
      return (
        searchRegex.test(item.title) ||
        searchRegex.test(item.excerpt)
      )
    })
  }
}

좋은 웹페이지 즐겨찾기