Vue知识点

Vue知识点

Vue.component的缺点：

• 全局定义: 强制要求每个component中的命令不重复
• 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要丑陋的\
• 不支持CSS：意味着当HTML和JavaScript组件化时，CSS被明显遗漏
• 没有构建步骤：限制只能使用HTML和ES5 JavaScript，而不能使用预处理器，如Pug(formerly Jade)和Babel

单文件组件

vue create my-app命令创建一个默认的项目
在main.js文件中有如下的代码：

new Vue({
   
  render: h => h(App),
}).$mount('#app')

如何理解render: h => h(App)，可参考：

• 关于Vue中的 render: h => h(App) 具体是什么含义？
• Vue2.0 render:h => h(App)是什么意思，为什么不加这段没效果？

首先需要了解这是 es 6 的语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。

插槽

v-slot can only be used on components or <template>.

TotoItem.vue

<template>
  <li class="item">
    <input type="checkbox" v-model="checked"/>
    <slot name="item" v-bind="{checked}"></slot>
  </li>
</template>

<script>
export default {
    
  props: ["item"],
  data () {
    
    return {
    
      checked: false
    }
  }
};
</script>

<style scoped>
  .item {
    
    color: red;
  }
</style>

App.vue

<template>
  <div id="app">
    {
  { msg }}
    <div>
      <input type="text" v-model="info">
      <button v-on:click="handleClick